JavaScript事件(Event)
一、事件流
1、事件冒泡
事件沿DOM树向上传播
2、事件捕获
事件到达预定目标之前被捕获
3、DMO2级事件
事件捕获阶段,处于目标阶段,事件冒泡阶段
二、事件处理程序
格式:on + "事件名"
1、HTML事件处理程序
1 <input type="button" value="click me" onclick="showMessage()" >
2、DOM0级事件处理程序
1 element.onclick = function(){ //... }
3、DOM2级事件处理程序
1 element.addEventListener(type,handle,boolean); 2 element.removeEventListener(type,handle,boolean);
4、IE事件处理程序(ie9以下版本)
1 element.attachEvent("on" + type,handle); 2 element.detachEvent("on" + type,handle);
【注:此时事件处理函数的作用域为全局作用域,this等于window】
三、事件对象
1、DOM(DOM0或DOM2级)中的事件对象
a、事件对象(event)作为参数传入于事件处理程序中
b、对象this,currentTarget,target之间的关系
对象this始终等于currentTarget
当事件处于捕获或冒泡阶段时,三者不相等
当事件处于目标阶段时,三者相等
c、preventDefault()与stopPropagation()
preventDefault(): 取消事件默认行为
stopPropagation(): 阻止事件的捕获和冒泡
2、IE中的事件对象(ie9以下版本)
a、通过window.event来访问事件对象,在使用attach添加事件时,也可以作为参数传入
b、cancelBubble设置为true时,取消事件冒泡
c、returnValue设置为false时,取消事件的默认行为
d、srcElement与DOM中的target属性相同
四、跨浏览器的事件对象
1 var EventUtil = { 2 addHandler: function(element,type,handler){ 3 if(element.addEventListener){ 4 element.addEventListener(type,handler,false); 5 }else if(element.attachEvent){ 6 element.attachEvent( "on" + type,handler); 7 }else{ 8 element["on" + type] = handler; 9 } 10 }, 11 getEvent: function(e){ 12 return e ? e : window.event; 13 }, 14 getTarget: function(e){ 15 e = this.getEvent(e); 16 return e.target || e.srcElement; 17 }, 18 getRelatedTarget: function(e){ 19 e = this.getEvent(e); 20 if(e.relatedTarget){ 21 return e.relatedTarget; 22 }else if(e.fromTarget){ 23 return e.fromTarget; 24 }else if(e.toTarget){ 25 return e.toTarget; 26 }else{ 27 return null; 28 } 29 }, 30 stopPropagation: function(e){ 31 e = this.getEvent(e); 32 if(e.stopPropagation){ 33 e.stopPropagation(); 34 }else{ 35 e.cancelBubble = true; 36 } 37 }, 38 preventDefault: function(e){ 39 e = this.getEvent(e); 40 if(e.preventDefault){ 41 e.preventDefault(); 42 }else{ 43 e.returnValue = false; 44 } 45 }, 46 removeHandler: function(element,type,handler){ 47 if(element.removeEventListener){ 48 element.removeEventListener(type,handler,false); 49 }else if(element.detachEvent){ 50 element.detachEvent( "on" + type,handler); 51 }else{ 52 element["on" + type] = null; 53 } 54 } 55 }
五、事件委托
事件委托: 就是利用事件冒泡,把事件注册到目标元素的更高层级元素上,用来减少页面事件处理程序,提高页面性能
如:HTML
1 <ul id="ul"> 2 <li id="li1"></li> 3 <li id="li2"></li> 4 <li id="li3"></li> 5 </ul>
JavaScript
1 var ul = document.getElementById("ul"); 2 EventUtil.addHandler(ul,"click",function(e){ 3 var target = EventUtil.getTarget(e); 4 switch(target.id){ 5 case "li1": 6 console.log(target.id); 7 break; 8 9 case "li2": 10 console.log(target.id); 11 break; 12 13 case "li3": 14 console.log(target.id); 15 break; 16 } 17 });
六、命名空间(对象)中的变量访问
命名空间中的变量可以直接访问全局中的变量,但是不能访问其他(函数)作用域中的变量,只能通过传递参数来访问
1、错误代码:
1 obj = { 2 method: function(){ 3 console.log(arg); 4 } 5 } 6 function fn(arg){ 7 obj.method(); 8 } 9 fn("test"); //arg is not defined
不能直接访问其他作用域中的变量
2、访问全局变量:
1 var arg = "test"; 2 var obj = { 3 method: function(){ 4 console.log(arg); //可以直接访问全局变量arg 5 } 6 } 7 obj.method(); //test
3、传递参数来访问变量:
1 var obj = { 2 method: function(arg){ //通过传递参数来访问其他函数中的变量 3 console.log(arg); 4 } 5 } 6 function fn(arg){ 7 obj.method(arg); 8 } 9 fn("test"); //test