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

 

事件 function type
您的回应...

相关话题

查看全部

也许你感兴趣

换一批

热门标签

更多