jQuery-事件

在交互操作中,最简单直接的操作就是点击操作.

点击事件

1. click方法,用于监听用户单击操作
2. dbclick方法,用于监听用户双击操作

两种点击事件相似,就来以click方法为例

方法一：$ele.click()

绑定$ele元素，不带任何参数一般是用来指定触发一个事件

$("ele").click(function(){
    alert("触发指定事件");
})
$("#test").click(function(){
    $("ele").clik()
})

方式二：$ele.click(handler(eventObject))

绑定$ele元素，每次$ele元素触发点击操作会执行回调handler函数，这样可以针对事件的反馈做很多操作,方法中的this是指向; 绑定事件的元素

<div id="test">点击触发</div>
<script>
$("#test").click(function(){
    //this指向div元素
})
</script>

方式三：$ele.click([eventData],handler(eventObject))

使用和方式二一致,不过可接受以数据参数，这样处理为解决不同作用域下数据传递的问题

<div id="test">点击触发</div>
<script>
$("#test").click(1111,function(e){
    //this指向div元素
    //e.data => 1111 传递数据
})
</script>

dbclick()和click()用法类似，但仍与一些区别:
click事件触发需要一些因素:

• click事件其实是由mousedown和mouseuo这两个动作构成,所以点击的动作在松手后才会触发

dbclick事件触发需要一些因素:

• 鼠标指针在元素里面点击
• 鼠标指针在元素里面释放
• 鼠标指针在元素里面再次点击,点击间隔时间,是系统而定
• 鼠标指针在元素里面时再次释放

需要注意的是,

在同一元素上同时绑定click和dbclick事件是不可取的

mousedown和mouseup事件

1. mousedown,监听用户鼠标按下的操作
2. mouseup,监听用户鼠标弹起的操作

和点击事件相似.
mousedown事件触发需要注意的因素:

• mousedown强调是按下触发
• 如果在一个元素上按住了鼠标不放,并且拖动鼠标离开这个元素后再松开鼠标键,仍然属于mousedown事件
• 任何鼠标按钮被按下时都能触发mousedown事件
• 用event对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

mouseup事件触发需要注意的因素:

• mouseup强调是松手触发,与mousedown是相反的
• mouseup和mousedown结合起来就是click事件
• 如果用户在一个元素上按下鼠标按键,并且拖动鼠标离开这个元素再释放,仍然属于mouseup事件
• 任何鼠标按钮松手时都能触发mouseup事件
• 用event对象的which区别按键,敲击鼠标左键which的值是1,敲击鼠标中键which的值是2,敲击鼠标右键which的值是3

mousemove事件

移动事件,监听用户移动的操作.

1. mousemove事件触发的一些因素:
2. mousemove事件是当鼠标指针移动时触发的，即使是一个像素

如果处理器做任何重大的处理，或者如果该事件存在多个处理函数，这可能造成浏览器的严重的性能问题

mouseover和mouseout事件

移入移出事件

mouseenter和mouseleave事件

监听用户移动到元素内部或外部的操作

mouseenter事件和mouseover的区别:
关键点是对于冒泡的方式处理问题
譬如,

<div id="div">
    <p>这是个测试</p>
</div>

如果在p元素和div元素上都绑定mouseover事件,在鼠标离开p元素还没有离开div元素时,触发的结果是p元素响应事件,div元素也相应事件

这是因为事件冒泡的缘故,p元素触发了mouseover,它会一直往上找父元素上的mouseover事件触发(当然是该父元素存在mouseover事件)。

因此,在这种情况中，jQuery推荐我们使用 mouseenter事件。mouseenter事件只会在绑定它的元素上被调用，而不会在后代节点上被触发

hover事件

可以实现切换的效果
只需要在hover方法中传递2个回调函数就可以了，不需要显示的绑定2个事件

$(selector).hover(handlerIn, handlerOut)

其中:

1. handlerIn(eventObject)：当鼠标指针进入元素时触发执行的事件函数
2. handlerOut(eventObject)：当鼠标指针离开元素时触发执行的事件函数

focusin事件

当一个元素,或者在其内部任何一个元素获得焦点的时候,譬如input元素,用户在点击聚焦的时候,开发者想要捕获这个动作话,可以使用focusing事件

focusout事件

当一个元素，或者其内部任何一个元素失去焦点的时候，比如input元素，用户在点击失去焦的时候，如果开发者需要捕获这个动作，jQuery提供了一个focusout事件

对于处理表单的事件有以上提到的处理焦点事件focusin和focusout，还有同样处理焦点的事件blur和focus事件

它们之间的本质区别：是否支持冒泡处理
譬如:

<div>
    <input type="text">
</div>

假设其中input元素可以触发focus()事件
div是input的父元素，当它包含的元素input触发了focus事件时，这个div就产生了focusin()事件
focus()在元素本身产生，focusin()在元素包含的元素中产生

change事件

<input>元素，<textarea>和<select>元素的值都是可以发生改变的,开发者可以通过change事件去监听这些改变的动作

1. input元素,监听value值的变化,但有改变时,失去焦点时后触发change事件,对于单选按钮或复选框,当用户用鼠标作出改变时,该事件立即触发
2. select元素,当用户用鼠标作出选择时,该事件立即触发
3. textarea元素,当有改变时,失去焦点后触发change事件

select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。
select事件只能用于<input>元素与<textarea>元素

<input type="text" value="imooc">
<textarea name="info" id="" cols="30" rows="10"></textarea>
<script>
    $("input").select(function(e){
        alert(e.target.type);
    });
    $("textarea").select(function(){
        alert("文本被选中")
    })
</script>

submit事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作
例如：验证表单输入的正确性，如果错误就阻止提交，需重新输入，此时可以通过submit事件，监听下提交表单的这个动作。

通过在<form>元素上绑定submit事件，开发者可以监听到用户提交表单的行为
具体能触发submit事件的行为:

• <input type="submit">
• <input type="image">
• <button type="submit">
• 当某些表单元素获取焦点时,敲击Enter键

需要特别注意：
form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为
传统的方式是调用事件对象  e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可
jQuery处理如下：

$("#target").submit(function(data) { 
   return false; //阻止默认行为，提交表单
});

键盘事件，将用户行为分解成2个动作，键盘按下与松手.

keydown事件

当用户在一个元素上第一次按下键盘上字母键的时候，就会触发它。

keyup事件

当用户在一个元素上第一次松手键盘上的键的时候，就会触发它。
注意：

keydown是在键盘按下就会触发，keyup是在键盘松手就会触发。理论上它可以绑定到任何元素，但keydown/keyup事件只是发送到具有焦点的元素上，不同的浏览器中，可获得焦点的元素略有不同，但是表单元素总是能获取焦点，所以对于此事件类型表单元素是最合适的。

keydown事件触发在文字还没敲进文本框，这时如果在keydown事件中输出文本框中的文本，得到的是触发键盘事件前的文本，而keyup事件触发时整个键盘事件的操作已经完成，获得的是触发键盘事件后的文本。

keypress事件

也是捕获键盘输入的

keypress事件与keydown和keyup的主要区别

1. 只能捕获单个字符，不能捕获组合键
2. 无法响应系统功能键（如delete，backspace）
3. 不区分小键盘和主键盘的数字字符

总而言之，

1. KeyPress主要用来接收字母、数字等ANSI字符，
2. 而 KeyDown 和 KeyUP 事件过程可以处理任何不被 KeyPress 识别的击键。
3. 诸如：功能键（F1-F12）、编辑键、定位键以及任何这些键和键盘换档键的组合等。

on()的多事件绑定

之前学的鼠标事件，表单事件与键盘事件都有个特点，就是直接给元素绑定一个处理函数，所有这类事件都是属于快捷处理。翻开源码其实可以看到，所有的快捷事件在底层的处理都是通过一个"on"方法来实现的。jQuery on()方法是官方推荐的绑定事件的一个方法。

譬如,以点击事件为例看一下on和click的不同写法

$("p").click(function(){})
$("p").on("click",function(){})

这最大的不同就on可以自定义事件名

多事件绑定同一个函数

$("p").on("mouseover mouseout",function(){});

通过空格分离,传递不同的事件名,可以绑定多个事件.

多事件绑定不同函数

$("p").on(
    mouseover:function(){},
    mouseout:function(){}
)

通过空格分离，传递不同的事件名，可以同时绑定多个事件，每一个事件执行自己的回调方法

譬如，将数据传递到处理程序

<input type="button" value="按钮">
<script>
    function say(event){
        alert("Hello "+event.data.name);
    }
    $("input").on("click",{
        name:"imooc"
    },say);
</script>

可以通过第二参数（对象），当一个事件被触发时，要传递给事件处理函数的

on的委托机制

.on(event,[selector],[data],handler(eventObject))

举个栗子：

<div>
    <p>
        <a href="#">这就是个测试</a>
    </p>
</div>
<script>
$("div").on("click","a",function(){
    alert("test");
})
</script>

事件绑定在最上层div元素上，当用户触发在a元素上，事件将往上冒泡，一直会冒泡在div元素上。如果提供了第二参数，那么事件在往上冒泡的过程中遇到了选择器匹配的元素，将会触发事件回调函数。也就说遇到了第二个参数的 “a” 就不再往上冒泡泡了。

卸载事件off()方法

1. 通过.on()绑定的事件处理程序
2. 通过off()方法移除该绑定

当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除

举个栗子：

绑定2个事件

$("p").on("mousedown mouseup",fn)

如果要删除其中一个事件

$("p").off("mousedown")

若要删除所有事件

$("p").off("mousedown mouseup")

删除所有事件还有个快捷方式，不需要传递事件名了，节点上绑定的所有事件讲全部销毁

$("p").off()

trigger事件

mousedown、click、keydown等这类型事件都是浏览器提供的，也称之为原生事件。这类型事件是需要有交互行为才能够被触发。
可通过on方法绑定一个原生事件

$("element").on("click",function(){
    alert("触发系统事件")
})

如上，alert的执行必须要有用户点击才可以，如果不同用户交互是否能在某一个时刻自动触发该事件呢？ jQuery中提供trigger方法来触发浏览器事件。

$("element").trigger("click");

在绑定on的事件元素上，通过trigger方法就可以调用到alert了。

讲了半天的trigger事件,那这个trigger到底是什么呢?

trigger事件就是根据绑定到匹配元素的给定事件类型执行所有的处理程序和行为

trigger除了能够触发浏览器事件,同时还支持自定义事件,并且自定义时间还支持传递参数

$("element").on("")

trigger触发浏览器事件与自定义事件区别？

1. 自定义事件对象，是jQuery模拟原生实现的
2. 自定义事件可以传递参数

triggerHandler事件

trigger事件还有一个特性：会在DOM树上冒泡，所以如果要阻止冒泡就需要在事件处理程序中返回false或调用事件对象中的.stopPropagation() 方法可以使事件停止冒泡

trigger事件是具有触发原生与自定义能力的，但是存在一个不可避免的问题： 事件对象event无法完美的实现，毕竟一个是浏览器给的，一个是自己模拟的。尽管 .trigger() 模拟事件对象，但是它并没有完美的复制自然发生的事件，若要触发通过 jQuery 绑定的事件处理函数，而不触发原生的事件，使用.triggerHandler() 来代替

triggerHandler与trigger的用法是一样的，重点看不同之处：

1. triggerHandler不会触发浏览器的默认行为，.triggerHandler( "submit" )将不会调用表单上的.submit()
2. .trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
3. 使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。 如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
4. 与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined