前言:一、理解事件 1、什么是事件 事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！ 我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！ 2、事件目标 你可以简单的理解为事件发生在的最具体的那个目标元素即为事件目标，有时也可能是document或者window! 3、事件类型 事件类型是一个用来说明发生了什么类型事件的字符串，你可以简单的理解为事件
一、理解事件
1、什么是事件
事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！
我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！
2、事件目标
你可以简单的理解为事件发生在的最具体的那个目标元素即为事件目标，有时也可能是document或者window!
3、事件类型
事件类型是一个用来说明发生了什么类型事件的字符串，你可以简单的理解为事件的名字！
常见的事件类型有哪些？
1）常用的与浏览器有关的事件类型：
①resize
当窗口或者框架的大小变化时在window对象上或框架上触发
②scroll
当用户滑动（滚动）带有滚动条的元素中的内容时在该元素上触发
滑动整个页面会在document以及window上触发
③error
当发生JavaScript错误时在window上面触发，当无法加载图像时在<img>元素上面触发，当无法加载嵌入内容时在<object>
元素上面触发，或者当有一或多个框架无法加载时在框架集上面触发
2）常用的与文档加载有关的事件类型：
①load
当页面完全加载后（包括所有图像、JavaScript文件、CSS文件等外部资源）在window对象上触发。
当所有的框架都加载完毕的时候会在框架集上面触发，
当图像加载完毕时会在img元素上面触发
使用object元素嵌入的内容加载完毕时会在object元素上触发
说白了：等内容（包括外部资源）加载完毕之后，在对应的元素对象上面触发
②beforeunload
会在window对象上面触发这个事件，让开发人员有可能在页面卸载前阻止这一操作。
这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。
将事件对象的returnValue 属性设置为要显示给用户的内容，并且将其返回才能够实现兼容各种浏览器;
3）常用的与表单有关的事件类型：
①blur
在元素失去焦点时在对应的元素上触发，该事件不会冒泡
②focus
在元素获得焦点时触发在对应的元素上，这个事件不会冒泡
③select
当用户选择文本框（<input>或<texterea>）中的一或多个字符时，在对应的元素上触发
④change
对于<input>和<textarea>元素，在它们失去焦点且value 值改变时在对应元素上触发
对于<select>元素，在其选项改变时在select元素上触发
⑤submit
浏览器会在将请求发送给服务器之前在对应的表单上触发submit事件
focusin与focusout作用同focus以及blur,区别 前者 是支持事件冒泡的！
4）常用的与键盘有关的事件类型：
①keydown
当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
事件对象中keyCode属性表示 键码
②keyup
当用户释放键盘上的键时触发
③keypress
当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件
事件对象中charCode属性表示 ASCII码
5）常用的与鼠标有关的事件类型：
我们的与鼠标有关的事件类型，最能体现”事件传播“,由于我们后面需要专门的一节课来学习”事件传播“，
所以说，我们这节课在讲鼠标有关的事件类型的时候，我们先避开”事件传播“这个概念！
①click
在用户点击鼠标或者按下回车键时或者移动用户触摸时触发
②dblclick
在用户双击鼠标时触发
③mousedown
按下鼠标按键时，会发生 mousedown 事件
与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生
④mouseup
在用户释放鼠标按钮时触发
⑤mouseenter
在鼠标光标从元素外部移动到元素范围之内时触发,这个事件不冒泡
⑥mouseleave
在位于元素上的鼠标光标移动到元素范围之外时触发,这个事件不冒泡
⑦mouseover
在鼠标指针移入一个元素边界之内,或者移入任何后代元素时触发
⑧mouseout
鼠标从当前元素移动到其他元素时触发（哪怕移动到的元素是当前元素的后代元素或者离开任何后代元素）
⑨mousemove
当鼠标指针在元素内部移动时重复地触发
4、事件处理程序(事件监听程序)
其实事件一直在发生，有人会问为什么我没感觉到？因为你没有为事件作出响应！怎么作出响应？
为"元素"绑定对应的事件处理程序（一个函数，当具体的元素上发生对应的事件时的就会触发这个函数的执行）
绑定的这个函数我们可以称为事件处理程序！
我们通过DOM对象的addEventListener方法来为具体的目标绑定对应的事件处理函数
Internet Explorer 8 及更早IE版本不支持 addEventListener() ，Opera 7.0 以及更早版本也不支持。
当然我们目前只是用这个原生的方法演示一下即可，后面我们jQuery会提供一个兼容各种浏览器的方法!
addEventListener()参数说明：
eventType：字符串，表示监听的事件类型
function：事件在预定目标发生时，执行的函数
useCapture：(可选)布尔值，是否注册到捕获阶段，默认false
5、事件传播（事件流）
事件传播指的是事件在页面中传播的顺序（事件流）
既然可能有很多个元素一齐发生了同样的事件，那么总该有个先后顺序吧？
事件传播描述的是从页面中接收事件的顺序。有意思的是，IE 和Netscape开发团队在当时居然提出了差不多是完全相反的事件流的概念。
当时IE开发团队提出的的事件传播顺序为事件冒泡，而Netscape公司提出的事件传播顺序为事件捕获。
IE开发团队提出的的事件传播顺序：事件冒泡
即事件开始是由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
Netscape公司提出的事件传播顺序：事件捕获
事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。
“捕获”的用意在于在于一层一级的往里找，在找的过程中把事件依次传播给它们，直到找到具体的事件目标。
老版本的ie浏览器不支持（ie9以下的ie版本）
W3C规定的事件传播方式(我们可以称为DOM事件传播,或DOM事件流)
事件传播有三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
事件捕获阶段：如果有绑定在事件捕获阶段的处理函数则按照捕获的顺序执行
处于目标阶段：如果有直接绑定在事件目标上的处理函数则按照绑定的先后顺序来执行（不管addEventListener的第三个参数是true还是false）
事件冒泡阶段：如果有绑定在事件冒泡阶段的处理函数则按照冒泡的顺序执行
PS:并不是所有的事件类型都支持事件冒泡！低版本的ie浏览器也没有捕获这个阶段！
一堆烂摊子，坐等我们后面jQuery来解决这个问题！
6、事件对象
当我们事件处理函数执行的时候，我们的事件处理函数会接受到参数->事件对象，我们使用一个变量接受即可
当然低版本的ie浏览器是接受不到的，并且事件对象内的一些属性名称和W3C规定的标准的属性名称也可能不一致！
事件对象内部，包含了与该事件类型以及目标有关的数据，不同的事件类型，包含的属性以及方法可能也不太一样！
bubbles Boolean 表明事件是否冒泡
preventDefault() Function 取消事件的默认行为。如果cancelable是true，则可以使用这个方法
stopImmediatePropagation() Function 忽略当前元素尚未执行的的事件处理函数；终止事件在元素树种的传播
stopPropagation() Function 执行完当前元素的所有事件处理函数后；终止事件在元素树中的继续传播
target Element 事件的目标
currentTarget Element 其事件处理程序当前正在处理事件的那个元素
当前执行的事件处理函数所绑定在的那个元素对象！
注意：在事件处理程序内部，this始终等于currentTarget的值，而target则只包含事件的实际目标
type String 被触发的事件的类型
7、事件委托
正常思路：
直接将事件处理函数绑定到事件目标上！
事件委托：
将事件处理函数委托给他们的祖先对象！
事件冒泡！
退一步，海阔天空！
注意点：
事件类型必须要支持事件冒泡！
大家最好将委托对象选择为 是举例事件目标近一点的！
二、jQuery事件处理
1、jQuery为事件处理做了什么？
jQuery为事件处理做了很多处理
经过上一点的学习我们知道为元素绑定事件处理函数可以使用addEventListener方法，但是低版本的ie浏览器非常“任性”，根本不支持
这个方法，它有自己专有的方法来绑定事件处理函数，以及它产生的事件对象和W3C规定的也有很多出入！（这个专有方法我们本课程不
做介绍，一个原因是jQuery为我们提供了更好的兼容各浏览器的方法，另外一个原因就是抵制低版本的ie浏览器，人人都有责任！）
还有就是低版本的ie浏览器根本不支持W3C规定的事件流，因为它们不支持其中的事件捕获阶段！
这么一大堆烂摊子，jQuery该如何面对呢？
我们伟大的jQuery竭尽全力的把浏览器之间的不一致从咱们眼前隐藏起来，从而使我们使用起来更加简单，方便！
jQuery针对事件处理为我们做了很多：
提供绑定事件处理程序的统一方法
由于低版本ie不支持事件捕获阶段，因此我们通过jQuery绑定事件处理程序，都不会绑定在捕获阶段！
可以在每个元素上为每个事件类型建立多个处理程序
采用标准的事件类型名称（也就是我们上面列出的）
事件对象作为事件处理程序的参数
对事件对象中最常用的属性以及事件对象中常用的方法进行规范化
接下来我们一起来愉快的学习！
2、绑定事件处理函数
1）使用on方法绑定事件处理函数
从jQuery1.7版本开始，on() 方法是将事件处理程序绑定到文档的首选方法！
使用说明：
1> jQuery对象.on('事件类型'[,选择器][,数据],handler(eventObject) )
事件类型：
一个或多个空格分隔的事件类型和可选的命名空间
选择器：
一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，
那么被选中的元素总是能触发事件
传入选择器就代表，在绑定目标的后代范围内，与选择器相匹配的元素在发生指定事件类型时
才会执行这个处理函数！
传不传选择器，完全就是两个世界！传入选择器会非常的强大！
数据：
如果data参数传给.on()并且不是null 或者 undefined，那么每次触发事件时，data参数都传递给处理程序。data
参数可以是任何类型，但如果是字符串类型时，那么selector参数必须提供，或明确地传递null，这样的 data 参
数不会误认为是选择器。最好是使用一个对象（键值对） ，所以可以作为属性传递多个值
事件处理函数：
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
2> jQuery对象.on(对象[,选择器] [,数据] )
!****对于直接事件而言，处理程序内部的this 代表绑定事件的元素对象。对于委托事件而言，this 则代表了与 selector 相匹配的元素对象
移除on方法绑定的事件处理函数：
off方法
使用说明：
1> off( events [, selector ] [, handler ] )
events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间
selector：一个选择器，当绑定事件处理程序时匹配最初传递给 .on()的那个
handler：事件处理函数
2> off( 事件对象 )
将事件对象传入，此方法适合在事件处理函数内部，移除自己
3> off()
移除匹配结果集，所有的事件处理函数
2）使用bind方法绑定事件处理函数
在之前的jQuery版本里面，bind的方法是最常用的用来绑定事件处理函数的方法！
相当于是on方法的弱化版，on方法是bind方法的加强版！
bind方法不可以传入选择器，这个方法的内部本身并没有 事件委托的思路在里面！
使用说明：
1> jQuery对象.bind('事件类型',[数据,]事件处理函数)
事件类型：
一个或多个空格分隔的事件类型和可选的命名空间
事件处理函数：
事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
2> jQuery对象.bind('事件类型',布尔值)
用来阻止事件默认行为，以及冒泡
3> jQuery对象.bind(对象,[数据,] )
移除bind方法绑定的事件处理函数：
unbind方法
使用说明：
1> unbind( [eventType ] [, handler(eventObject) ] )
events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间
handler：事件处理函数
2> unbind(事件对象)
将事件对象传入，此方法适合在事件处理函数内部，移除自己
3> unbind()
移除匹配结果集，所有的事件处理函数
3）使用one方法绑定事件处理函数
为元素的事件添加处理函数。处理函数在每个元素上每种事件类型只执行一次
使用方法与on方法相同
区别：绑定的事件处理函数，仅执行一次即移除！
其他的一些绑定事件的函数，已经过时，不再建议使用，以上3个方法足够我们使用了！
3、名词解释：
命名空间：
这边的命名空间你可以理解为“类别”，即给添加的各种事件类型“人工分类”，只需要在事件类型名字后用点接
上有一个分类名字即可，以下划线开头的命名空间是供 jQuery 使用的，所以我们不要将名字以下划线开头即可。
一个事件类型可以属于多个命名空间，是不分层次的。
作用：简化、灵活的删除或触发事件
jQuery事件对象：
jQuery事件对象作为事件处理程序的参数，对原生事件对象中最常用的属性以及事件对象中常用的方法进行规范化
成员如下：
currentTarget 这个属性总是等于函数的this
target 触发事件的事件目标
data 返回绑定事件时传递给绑定方法的可选数据参数
pageX 相对于页面左上角的鼠标位置
pageY
preventDefault() 阻止当前时间的默认行为
stopImmediatePropagation() 阻止剩余的事件处理函数执行并且防止事件冒泡到DOM树上
stopPropagation() 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数
originalEvent 未经jQuery加工的原始的DOM Event对象
isDefaultPrevented() 若已经调用过preventDefault()方法则返回true
isImmediatePropagationStopped() 若已经调用过stopImmediatePropagation()方法则返回true
isPropagationStopped() 若已经调用stopPropagation()方法则返回true
relatedTaregt 仅对鼠标事件有效，返回该鼠标事件有关的元素
result 事件被触发的一个事件处理程序的最后返回值
timeStamp 这个属性返回事件触发时距离1970年1月1日的毫秒数
type 事件类型
which 针对键盘和鼠标事件，这个属性能确定你到底按的是哪个键
对于keydown返回键码，对于keypress返回ASCII码
三、jQuery人工调用事件处理函数
我们可以通过代码手动的触发绑定在元素上的事件处理函数的执行，而无需真正的事件发生！
1、trigger方法
使用说明：
trigger( eventType [, extraParameters ] )
eventType：一个包含JavaScript事件类型的字符串，比如click 或 submit，也可以在后面接上命名空间
extraParameters：类型: Array 或 PlainObject
在执行事件处理函数时传递给事件处理程序的数据
接受方法：处理函数那边使用一个变量接收即可！
2、triggerHandler方法
使用说明：
1）triggerHandler( eventType [, extraParameters ] )
同上
这个方法的行为与 .trigger() 相似，不同之处有如下几点：
1>triggerHandler() 和真实的事件发生不一样，仅仅是触发绑定的函数执行，至于其他的默认行为都会忽略，并且也不会事件传播
2>trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
3>与普通的方法返回 jQuery 对象(这样就能够使用链式用法)不同，triggerHandler() 返回最后一个处理的事件的返回值。如果没有
触发任何事件，会返回 undefined
补充:自定义事件：
我们可以自己定义一些事件类型，这些事件类型不会由浏览器通知给应用程序，而是我们通过trigger或者triggerHandler方法触发！
四、jQuery绑定事件处理函数的快捷方法
blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover,
mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error
使用方法，直接对选中的元素：调用对应的快捷方法即可！
$('form input').focusin(function(){
//作用同focus,但是也有区别 focusin冒泡
console.log('光标移动到我上面了');
});
$('a').click(function(jqE){
console.log('嘿嘿！');
jqE.preventDefault();
});
补充：hover方法
同时绑定 mouseenter和 mouseleave事件，使用更加方便
使用方法一：.hover( handlerIn(eventObject), handlerOut(eventObject) )
使用方法二：也可以只传一个函数
转载请注明出处及附上该链接：http://www.highallxy.com/web/198.html
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
上一篇:<<CSS3里面动画效果有哪些 下一篇:jQuery特效与队列>>
