一、什么是事件:
事件是您在编程时系统内发生的动作或者发生的事情,系统响应事件后,如果需要,您可以某种方式对事件做出回应。
浏览器赋予元素天生默认的一些行为,不论是否绑定相关的方法,只要进行相应的行为操作了,那么一定会触发相应的事件
事件是文档或者浏览器窗口中发生的,特定的交互瞬间。
事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之间交互的桥梁。
你若触发,我便执行——事件发生,调用它的处理函数执行相应的JavaScript代码给出响应。
典型的例子有:页面加载完毕触发load事件;用户单击元素,触发click事件。
事件三要素:事件源(事件被触发的对象)、事件类型(什么事件,比如鼠标点击事件)和事件处理函数(针对某个事件要做出的相应)。
二、事件处理程序(事件处理器)
响应某个事件的函数就叫事件处理程序(也叫事件处理函数、事件句柄)。事件处理程序的名字以"on"开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。
三、事件对象
什么是事件对象?
用我自己的话说,当某个事件触发时,浏览器就会创建一个对象,这个对象包含了该事件所有相关的属性和方法等有关信息,我们可以调用这个事件对象。
有人这么定义事件对象,说事件在浏览器中是以对象的形式存在的,触发一个事件,就会产生一个事件对象,该对象包含着所有与事件有关的信息,包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。这感觉就像是“手机”和“华为P7手机”的关系一样。
例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。
所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。
(一)、html事件处理程序中的event
会创建一个包含局部变量event的函数。可通过event直接访问事件对象。
<input id="btn" type="button" value="click" onclick=" console.log('html事件处理程序'+event.type)"/>
(二)、DOM中的事件对象
都会把event作为参数传入事件处理程序
DOM中事件对象重要的属性和方法。
属性:
-
- type属性,用于获取事件类型
- target属性 用户获取事件目标 事件加在哪个元素上。(主要在事件委托时使用)
方法:
-
- stopPropagation()方法 用于阻止事件冒泡
- preventDefault()方法 阻止事件的默认行为 移动端用的多
1 <body> 2 <input id="btn" type="button" value="click"/> 3 <script> 4 var btn=document.getElementById("btn"); 5 btn.onclick=function(event){ 6 console.log("DOM0 & click"); 7 console.log(event.type); //click 8 } 9 btn.addEventListener("click", function (event) { 10 console.log("DOM2 & click"); 11 console.log(event.type); //click 12 },false); 13 </script> 14 </body>
(三)、IE中的事件对象
第一种情况: 通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。
第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.onclick= function () { var event=window.event; console.log(event.type); //click } </script> </body>
<body> <input id="btn" type="button" value="click"/> <script> var btn=document.getElementById("btn"); btn.attachEvent("onclick", function (type) { console.log(event.type); //click }) </script> </body>这里有个大大的问题没搞懂
(四)、事件对象的公共成员
1、DOM中事件对象的公共成员
事件对象包含与创建它有关的属性和方法。所以事件类型不一样,可用的属性和方法不一样。但是,DOM中所有事件都有以下公共成员。【注意bubbles属性和cancelable属性】
属性/方法 | 类型 | 读/写 | 说明 |
bubbles | Boolean | 只读 | 表明事件是否冒泡 |
stopPropagation()*** | Function | 只读 | 取消事件的进一步捕获或冒泡。如果bubbles为true,则可以使用这个方法 |
stopImmediatePropagation() | Function | 只读 | 取消事件的进一步捕获或冒泡,同时阻止任何事件处理程序被调用(DOM3级事件中新增) |
cancelable | Boolean | 只读 | 表明是否可以取消事件的默认行为 |
preventDefault()*** | Function | 只读 | 取消事件的默认行为。如果cancelable是true,则可以使用这个方法 |
defaultPrevented | Boolean | 只读 | 为true表示已经调用了preventDefault()(DOM3级事件中新增) |
currentTarget*** | Element | 只读 | 事件处理程序绑定的那个元素(currentTarget始终===this,即处理事件的元素) |
target*** | Element | 只读 | 直接事件目标,真正触发事件的目标 |
detail | Integer | 只读 | 与事件相关的细节信息 |
eventPhase*** | Integer | 只读 | 调用事件处理程序的阶段:1表示捕获阶段,2表示处于目标阶段,3表示冒泡阶段 |
trusted | Boolean | 只读 | 为true表示事件是由浏览器生成的。为false表示事件是由开发人员通过JavaScript创建的(DOM3级事件中新增) |
type*** | String | 只读 | 被触发的事件的类型 |
view | AbstractView | 只读 | 与事件关联的抽象视图。等同于发生事件的window对象 |
a、对比currentTarget和target
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只是包含事件的实际目标。
举例:页面有个按钮,在body(按钮的父节点)中注册click事件,点按钮时click事件会冒泡到body进行处理。
1 <body> 2 <input id="btn" type="button" value="click"/> 3 <script> 4 document.body.onclick=function(event){ 5 console.log("body中注册的click事件"); 6 console.log("this===event.currentTarget? "+(this===event.currentTarget)); //true 7 console.log("currentTarget===document.body?"+(event.currentTarget===document.body)); //true 8 console.log('event.target===document.getElementById("btn")? '+(event.target===document.getElementById("btn"))); //true 9 } 10 </script> 11 </body>
b、通过type属性,可以在一个函数中处理多个事件。
原理:通过检测event.type属性,对不同事件进行不同处理。
举例:定义一个handler函数用来处理3种事件:click,mouseover,mouseout。
运行效果:点击按钮,弹出框。鼠标经过按钮,按钮背景色变为粉色;鼠标离开按钮,背景色恢复默认。
1 <body> 2 <input id="btn" type="button" value="click"/> 3 <script> 4 var handler=function(event){ 5 switch (event.type){ 6 case "click": 7 alert("clicked"); 8 break; 9 case "mouseover": 10 event.target.style.backgroundColor="pink"; 11 break; 12 case "mouseout": 13 event.target.style.backgroundColor=""; 14 } 15 }; 16 var btn=document.getElementById("btn"); 17 btn.onclick=handler; 18 btn.onmouseover=handler; 19 btn.onmouseout=handler; 20 </script> 21 </body>
c、stopPropagation()和stopImmediatePropagation()对比
异:二者的区别在于当一个事件有多个事件处理程序时,stopImmediatePropagation()可以阻止之后事件处理程序被调用。
举例:
1 <body> 2 <input id="btn" type="button" value="click"/> 3 <script> 4 var btn=document.getElementById("btn"); 5 btn.addEventListener("click",function(event){ 6 console.log("buttn click listened once"); 7 // event.stopPropagation();//取消注释查看效果 8 // event.stopImmediatePropagation();//取消注释查看效果 9 },false); 10 btn.addEventListener("click",function(){ 11 console.log("button click listened twice"); 12 },false); 13 document.body.onclick= function (event) { 14 console.log("body clicked"); 15 } 16 </script> 17 </body>
d、eventPhase
eventPhase值在捕获阶段为1,处于目标阶段为2,冒泡阶段为3。可以通过下面代码查看:
var btn=document.getElementById("btn"); btn.onclick= function (event) { console.log(event.CAPTURING_PHASE); //1 console.log(event.AT_TARGET); //2 console.log(event.BUBBLING_PHASE); //3 }
(2)、IE中event的公共成员
IE中的event的属性和方法和DOM一样会随着事件类型的不同而不同,但是也有一些是所有对象都有的公共成员,且这些成员大部分有对应的DOM属性或方法。
属性/方法 | 类型 | 读/写 | 说明 |
cancelBubble | Boolean | 读/写 | 默认为false,但将其设置为true就可以取消事件冒泡(与DOM中stopPropagation()方法的作用相同) |
returnValue | Boolean | 读/写 | 默认为true,但将其设置为false就可以取消事件的默认行为(与DOM中的preventDefault()方法的作用相同) |
srcElement | Element | 只读 | 事件的目标(与DOM中的target属性相同) |
type | String | 只读 | 被触发的事件的类型 |
(五)总结JS事件对象(event)的一些兼容性写法
获得event对象兼容性写法
event || (event = window.event);
获得target兼容型写法
event.target||event.srcElement
阻止浏览器默认行为兼容性写法
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
阻止冒泡写法
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
添加事件监听和取消事件监听
//添加事件监听兼容函数 function addHandler(target, eventType, handler){ if(target.addEventListener){//主流浏览器 addHandler = function(target, eventType, handler){ target.addEventListener(eventType, handler, false); }; }else{//IE addHandler = function(target, eventType, handler){ target.attachEvent("on"+eventType, handler); }; } //执行新的函数,如果不在这里执行,则智能添加一个处理程序 addHandler(target, eventType, handler); } //删除事件监听兼容函数 function removeHandler(target, eventType, handler){ if(target.removeEventListener){//主流浏览器 removeHandler = function(target, eventType, handler){ target.removeEventListener(eventType, handler, false); } }else{//IE removeHandler = function(target, eventType, handler){ target.detachEvent("on"+eventType, handler); } } //执行新的函数 removeHandler(target, eventType, handler); }
四、事件流:
定义:事件流是从页面中接收事件的顺序,事件发生时会在元素节点与根节点之间按照特定的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流。
DOM标准规定事件流包括三个阶段:
-
- 事件捕获阶段;由根节点到达事件实际目标的阶段,实际目标在捕获阶段不会接收事件。
- 处于目标阶段;目标阶段事件处理会被看成是冒泡阶段的一部分。
- 事件冒泡阶段。事件又传播回文档。
注:
1)、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标,但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两次机会在目标对象上面操作事件。
2)、并非所有的事件都会经过冒泡阶段 。所有的事件都要经过捕获阶段和处于目标阶段,但是有些事件会跳过冒泡阶段:如,获得输入焦点的focus事件和失去输入焦点的blur事件。
两次机会在目标对象上面操作事件例子:
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 #outer{ 9 position: absolute; 10 400px; 11 height: 400px; 12 top:0; 13 left: 0; 14 bottom:0; 15 right: 0; 16 margin: auto; 17 background-color: deeppink; 18 } 19 #middle{ 20 position: absolute; 21 300px; 22 height:300px; 23 top:50%; 24 left: 50%; 25 margin-left: -150px; 26 margin-top: -150px; 27 background-color: deepskyblue; 28 } 29 #inner{ 30 position: absolute; 31 100px; 32 height:100px; 33 top:50%; 34 left:50%; 35 margin-left: -50px; 36 margin-top: -50px;; 37 background-color: darkgreen; 38 text-align: center; 39 line-height: 100px; 40 color:white; 41 } 42 #outer,#middle,#inner{ 43 border-radius:100%; 44 } 45 </style> 46 <body> 47 <div id="outer"> 48 <div id="middle"> 49 <div id="inner"> 50 click me! 51 </div> 52 </div> 53 </div> 54 <script> 55 var innerCircle= document.getElementById("inner"); 56 innerCircle.addEventListener("click", function () { 57 alert("innerCircle的click事件在捕获阶段被触发"); 58 },true); 59 innerCircle.addEventListener("click", function () { 60 alert("innerCircle的click事件在冒泡阶段被触发"); 61 },false); 62 var middleCircle= document.getElementById("middle"); 63 middleCircle.addEventListener("click", function () { 64 alert("middleCircle的click事件在捕获阶段被触发"); 65 },true); 66 middleCircle.addEventListener("click", function () { 67 alert("middleCircle的click事件在冒泡阶段被触发"); 68 },false); 69 var outerCircle= document.getElementById("outer"); 70 outerCircle.addEventListener("click", function () { 71 alert("outerCircle的click事件在捕获阶段被触发"); 72 },true); 73 outerCircle.addEventListener("click", function () { 74 alert("outerCircle的click事件在冒泡阶段被触发"); 75 },false); 76 </script> 77 </body> 78 </html>
运行效果就是会陆续弹出6个框,为说明原理我整合成了一个图:
五、事件类型
(一)、按级别划分:
1、HTML事件
事件直接加在html元素上。
首先,这种方法已经过时了。因为动作(javascript代码)和内容(html代码)紧密耦合,修改时即要修改html也要修改js。但是写个小demo的时候还是可以使用的。
这种方式也有两种方法,都很简单:
第一种:直接在html中定义事件处理程序及包含的动作。
<input type="button" value="click me!" onclick="alert('clicked!')"/>
第二种:html中定义事件处理程序,执行的动作则调用其他地方定义的脚本。
1 <input type="button" value="click me!" onclick="showMessage()"/> 2 <script> 3 function showMessage(){ 4 alert("clicked!"); 5 } 6 </script>
注:
1)通过event变量可以直接访问事件本身,比如onclick="alert(event.type)"会弹出click事件。
2)this值等于事件的目标元素,这里目标元素是input。比如 onclick="alert(this.value)"可以得到input元素的value值。
2、DOM0级事件(无法绑定多个处理函数,后定义的处理函数会覆盖前面定义的函数)
绑定事件:element.onclick=function(){}
解绑事件:element.onclick=null;
3、DOM1没有跟事件相关的更新
4、DOM2级事件(可以绑定多个处理函数,所有的DOM节点都包含这2个方法。)
绑定事件:element.addEventListener('click', 函数名, false);
解绑事件:element.removeEventListener('click', 函数名, false);
function 函数名(){};
注:通过addEventListener添加的匿名函数将无法删除。。
为了能删除事件处理程序,代码可以这样写:
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); var handler=function(){ alert("hello"); } myBtn.addEventListener("click",handler,false); myBtn.removeEventListener("click",handler,false); </script>
5、DOM3级事件 (定义了自定义事件)
element.addEventListener('keyup', function(){}, false)
(二)、按事件类型划分
1、鼠标事件
- click:用户单击主鼠标按钮(一般是左键)或者按下在聚焦时按下回车键时触发
- dblclick:用户双击主鼠标按键触发(频率取决于系统配置)
- mousedown:用户按下鼠标任意按键时触发
- mouseup:用户抬起鼠标任意按键时触发
- mousemove:鼠标在元素上移动时触发
- mouseover:鼠标进入元素时触发
- mouseout:鼠标离开元素时触发
- mouseenter:鼠标进入元素时触发,该事件不会冒泡
- mouseleave:鼠标离开元素时触发,该事件不会冒泡
区别:
over和out,不考虑子元素,从父元素移动到子元素,对于父元素而言,仍然算作离开
enter和leave,考虑子元素,子元素仍然是父元素的一部分
mouseenter和mouseleave不会冒泡
事件对象
所有的鼠标事件,事件处理程序中的事件对象,都为 MouseEventaltKey:触发事件时,是否按下了键盘的alt键
ctrlKey:触发事件时,是否按下了键盘的ctrl键
shiftKey:触发事件时,是否按下了键盘的shift键
button:触发事件时,鼠标按键类型
0:左键
1:中键
2:右键
位置
page:pageX、pageY,当前鼠标距离页面的横纵坐标
client: clientX、clientY,鼠标相对于视口的坐标
offset:offsetX、offsetY,鼠标相对于事件源的内边距的坐标
screen: screenX、screenY,鼠标相对于屏幕
x、y,等同于clientX、clientY
movement:movementX、movementY,只在鼠标移动事件中有效,相对于上一次鼠标位置,偏移的距离
2、键盘事件
3、表单事件
4、html5事件
5、window全局对象
IE事件兼容问题
IE8及以下浏览器不支持addEventListener,在实际开发中如果要兼容到IE8及以下浏览器。如果用原生的绑定事件,需要做兼容处理,可利用jquery的bind代替。
IE8及以下版本浏览器实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。
这两个方法都需要两个参数:事件处理程序名称和事件处理程序函数。由于IE8及更早版本只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。注意是事件处理程序名称而不是事件名称,所以要加上on,是onclick而不是click。
注:
IE11只支持addEventListener!
IE9,IE10对attachEvent和addEventListener都支持!
TE8及以下版本只支持attachEvent!
可以拿下面代码在IE各个版本浏览器中进行测试。
1 <input id="myBtn" type="button" value="click me!"/> 2 <script> 3 var myBtn=document.getElementById("myBtn"); 4 var handlerIE=function(){ 5 alert("helloIE"); 6 } 7 var handlerDOM= function () { 8 alert("helloDOM"); 9 } 10 myBtn.addEventListener("click",handlerDOM,false); 11 myBtn.attachEvent("onclick",handlerIE); 12 </script>
添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world”
1 <script> 2 var myBtn=document.getElementById("myBtn"); 3 myBtn.attachEvent("onclick",function(){ 4 alert("hello"); 5 }); 6 myBtn.attachEvent("onclick",function(){ 7 alert("world"); 8 }); 9 </script>
注:这里运行效果值得注意一下:
IE8以下浏览器中先弹出“world”,再弹出“hello”。和DOM中事件触发顺序相反。
IE9及以上浏览器先弹出“hello”,再弹出“world”。和DOM中事件触发顺序相同了。
可见IE浏览器慢慢也走上正轨了。。。
删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除,且参数一致。
和DOM事件一样,添加的匿名函数将无法删除。
所以为了能删除事件处理程序,代码可以这样写:
1 <input id="myBtn" type="button" value="click me!"/> 2 <script> 3 var myBtn=document.getElementById("myBtn"); 4 var handler= function () { 5 alert("hello"); 6 } 7 myBtn.attachEvent("onclick",handler); 8 myBtn.detachEvent("onclick",handler); 9 </script>
note:IE事件处理程序中还有一个地方需要注意:作用域。
使用attachEvent()方法,事件处理程序会在全局作用域中运行,因此this等于window。
而dom2或dom0级的方法作用域都是在元素内部,this值为目标元素。
下面例子会弹出true。
<input id="myBtn" type="button" value="click me!"/> <script> var myBtn=document.getElementById("myBtn"); myBtn.attachEvent("onclick",function(){ alert(this===window); }); </script>
在编写跨浏览器的代码时,需牢记这点。
IE7\8检测:
1 //判断IE7\8 兼容性检测 2 var isIE=!!window.ActiveXObject; 3 var isIE6=isIE&&!window.XMLHttpRequest; 4 var isIE8=isIE&&!!document.documentMode; 5 var isIE7=isIE&&!isIE6&&!isIE8; 6 7 if(isIE8 || isIE7){ 8 li.attachEvent("onclick",function(){ 9 _marker.openInfoWindow(_iw); 10 }) 11 }else{ 12 li.addEventListener("click",function(){ 13 _marker.openInfoWindow(_iw); 14 }) 15 }
焦点事件
鼠标事件
六、事件代理(事件委托)
传统的事件处理中,需要为每个元素添加事件处理器。js事件代理则是一种简单有效的技巧,通过它可以把事件处理器添加到一个父级元素上,从而避免把事件处理器添加到多个子级元素上。
1、事件代理
事件代理的原理用到的就是事件冒泡和目标元素,把事件处理器添加到父元素,等待子元素事件冒泡,并且父元素能够通过target(IE为srcElement)判断是哪个子元素,从而做相应处理。
传统事件处理,为每个元素添加事件处理器,代码如下:
1 <body> 2 <ul id="color-list"> 3 <li>red</li> 4 <li>orange</li> 5 <li>yellow</li> 6 <li>green</li> 7 <li>blue</li> 8 <li>indigo</li> 9 <li>purple</li> 10 </ul> 11 <script> 12 (function(){ 13 var colorList=document.getElementById("color-list"); 14 var colors=colorList.getElementsByTagName("li"); 15 for(var i=0;i<colors.length;i++) 16 { 17 colors[i].addEventListener('click',showColor,false); 18 }; 19 function showColor(e) 20 { 21 e=e||window.event; 22 var targetElement=e.target||e.srcElement; 23 alert(targetElement.innerHTML); 24 } 25 })(); 26 </script> 27 </body>
事件代理的处理方式,代码如下:
1 <body> 2 <ul id="color-list"> 3 <li>red</li> 4 <li>orange</li> 5 <li>yellow</li> 6 <li>green</li> 7 <li>blue</li> 8 <li>indigo</li> 9 <li>purple</li> 10 </ul> 11 <script> 12 (function(){ 13 var colorList=document.getElementById("color-list"); 14 colorList.addEventListener('click',showColor,false); 15 function showColor(e) 16 { 17 e=e||window.event; 18 var targetElement=e.target||e.srcElement; 19 if(targetElement.nodeName.toLowerCase()==="li"){ 20 alert(targetElement.innerHTML); 21 } 22 } 23 })(); 24 </script> 25 </body>
2、事件代理的好处
总结一下事件代理的好处:
- 将多个事件处理器减少到一个,因为事件处理器要驻留内存,这样就提高了性能。想象如果有一个100行的表格,对比传统的为每个单元格绑定事件处理器的方式和事件代理(即table上添加一个事件处理器),不难得出结论,事件代理确实避免了一些潜在的风险,提高了性能。
- DOM更新无需重新绑定事件处理器,因为事件代理对不同子元素可采用不同处理方法。如果新增其他子元素(a,span,div等),直接修改事件代理的事件处理函数即可,不需要重新绑定处理器,不需要再次循环遍历。
3、事件代理的问题:
代码如下:事件代理同时绑定了li和span,当点击span的时候,li和span都会冒泡。
<li><span>li中的span的内容</span></li> <script> $(document).on('click', 'li', function(e){ alert('li li'); }); $(document).on('click', 'span', function(e){ alert('li span'); }) </script>
解决办法:
方法一:span的事件处理程序中阻止冒泡
$(document).on('click', 'span', function(e){ alert('li span'); e.stopPropagation(); })
方法二:li的事件处理程序中检测target元素
$(document).on('click', 'li', function (e) { if (e.target.nodeName == 'SPAN') { e.stopPropagation(); return; } alert('li li'); });
4、事件代理的一个有趣应用
点击一个列表时,输出对应的索引
<script> var ul=document.querySelector('ul'); var lis=ul.querySelectorAll('ul li'); ul.addEventListener('click', function (e) { var target= e.target; if(target.nodeName.toUpperCase()==='LI'){ alert([].indexOf.call(lis,target)); } },false) </script>
举例:
页面加载事件
JS:window.onload = function(){};
-----函数表达式结构创建函数
当页面所有资源加载完毕之后执行,无法同时绑定多个处理程序–DOM0级
DOM2级加载:
document.addEventListener("DOMContentLoaded",function(){ alert(2) },false);