JS事件分析.docx

1、JS事件分析JS事件分析1.注册事件 1.1 使用HTML元素的事件属性1.2 给元素对象添加事件属性-DOM0形式复制代码 function clickHandler() console.log(click handler); /click handler console.log(arguments.length); /0 console.log(event.type); var myDiv = document.getElementById(myDiv); myDiv.onclick = clickHandler; 复制代码1.3 使用script标签的for和event属性(仅IE支持)

2、 alert(clicked in IE) 1.4 attachEventh和detachEvent(仅 lt IE 11支持)-DOM2形式 var myDiv = document.getElementById(myDiv); myDiv.attachEvent(onclick,function()alert(clicked in ie); 在IE 11中:对象不支持“attachEvent”属性或方法1.5 addEventListener和removeEventListener(gte IE 9支持，chrome支持，ff支持)-DOM2形式 var myDiv = document.

3、getElementById(myDiv); myDiv.addEventListener(click,function()alert(clicked); 在addEventListener中，第二个参数可以是函数也可以一个对象，要求该对象必须有handleEvent方法属性复制代码 var myDiv = document.getElementById(myDiv); var obj = name:handle, handleEvent:function() alert(clicked); myDiv.addEventListener(click,obj); function removeL

4、istener() myDiv.removeEventListener(click,obj); 复制代码2.this的指向2.1 使用HTML事件属性this指代绑定监听器的HTML元素 this指向myDiv2.2 给元素对象添加事件属性this指向绑定监听器的HTML元素复制代码 function clickHandler() console.log(this); var myDiv = document.getElementById(myDiv); myDiv.onclick = clickHandler;复制代码this指向myDiv2.3 使用script标签的for和eventth

5、is指代绑定监听器的HTML元素复制代码 console.log(this);复制代码this指向myDiv2.4 使用attachEvent和detachEventthis指向window对象复制代码 function clickHandler() console.log(this = window); var myDiv = document.getElementById(myDiv); myDiv.attachEvent(onclick,clickHandler); 复制代码打印结果:true2.5 使用addEventListener和removeEventListenerthis指代

6、绑定监听器的HTML元素复制代码 function clickHandler() console.log(this); var myDiv = document.getElementById(myDiv); myDiv.addEventListener(click,clickHandler); 复制代码3.事件对象EventIE各个版本会将Event对象绑定到window中，在需要使用Event对象时，只需window.event;在使用DOM0方法注册事件时:gte IE 9的版本会将Event对象作为参数传递到处理函数中在使用attachEvent方法注册事件时:IE的各个版本Event对

7、象作为参数传递到处理函数中firefox会将Event对象作为参数传递到处理函数中chrome:两种都有复制代码 function clickHandler(ev) console.log(ev); var myDiv = document.getElementById(myDiv); myDiv.onclick = clickHandler; 复制代码4.事件对象的属性和方法4.1 cancleBubble:是否取消冒泡4.1.1该属性在IE的各个版本都支持复制代码 function parentCliked(ev) console.log(parent clicked); var ev =

8、 ev ? ev : window.event; function childClicked1(ev) console.log(child clicked1); var ev = ev ? ev : window.event; ev.cancelBubble = true; function childClicked2(ev) console.log(child clicked2); var ev = ev ? ev : window.event; var myDiv = document.getElementById(myDiv); var d1 = document.getElementB

9、yId(d1); myDiv.onclick = parentCliked; d1.attachEvent(onclick,childClicked2); d1.attachEvent(onclick,childClicked1); 复制代码IE中打印:child clicked1child clicked2注意:添加监听器的顺序4.1.2 chrome和firefox的高版本也支持复制代码 function parentCliked(ev) console.log(parent clicked); var ev = ev ? ev : window.event; function child

10、Clicked1(ev) console.log(child clicked1); var ev = ev ? ev : window.event; ev.cancelBubble = true; function childClicked2(ev) console.log(child clicked2); var ev = ev ? ev : window.event; var myDiv = document.getElementById(myDiv); var d1 = document.getElementById(d1); myDiv.onclick = parentCliked;

11、d1.addEventListener(click,childClicked1); d1.addEventListener(click,childClicked2); 复制代码打印出:child clicked1child clicked24.2 stopPropagation():取消冒泡bubbles:返回boolean值，判断当前事件能否冒泡(只读)只有使用addEventListener方法添加的监听器，该属性才有效(即使在IE 中)复制代码 function parentCliked(ev) console.log(parent clicked); var ev = ev ? ev

12、: window.event; function childClicked1(ev) console.log(child clicked1); var ev = ev ? ev : window.event; ev.stopPropagation(); function childClicked2(ev) console.log(child clicked2); var ev = ev ? ev : window.event; var myDiv = document.getElementById(myDiv); var d1 = document.getElementById(d1); my

13、Div.onclick = parentCliked; d1.addEventListener(click,childClicked1); d1.addEventListener(click,childClicked2); 复制代码打印出:child clicked1child clicked24.3 stopImmediatePropagation():取消冒泡，监测该事件的其他监听器都停止工作只有使用addEventListener方法添加的监听器，该属性才有效复制代码 function parentCliked(ev) console.log(parent clicked); var e

14、v = ev ? ev : window.event; function childClicked1(ev) console.log(child clicked1); var ev = ev ? ev : window.event; ev.stopImmediatePropagation(); function childClicked2(ev) console.log(child clicked2); var ev = ev ? ev : window.event; var myDiv = document.getElementById(myDiv); var d1 = document.g

15、etElementById(d1); myDiv.onclick = parentCliked; d1.addEventListener(click,childClicked1); d1.addEventListener(click,childClicked2); 复制代码打印出:child clicked14.4 cancelable和preventDefault();preventDefault()方法阻止默认行为cancelable:返回boolean值，判断能否阻止默认行为(只读)只有使用addEventListener方法添加的监听器，该属性才有效复制代码click here var

16、 link = document.getElementById(aa); link.addEventListener(onclick,clickHandler); function clickHandler(ev) var ev = ev ? ev : window.event; ev.preventDefault(); 复制代码cancelable是只读的复制代码a id=aa href= here var link = document.getElementById(aa); link.addEventListener(click,clickHandler); function click

17、Handler(ev) var ev = ev ? ev : window.event; console.log(ev.cancelable);/true ev.cancelable = false; ev.preventDefault(); console.log(ev.cancelable);/true 复制代码即使设置了cancelable=true,仍然能阻止默认行为 4.5 returnValue:是否取消默认行为，设置为false则取消默认行为 是IE浏览器特有的属性复制代码click here var link = document.getElementById(aa); lin

18、k.attachEvent(onclick,clickHandler); function clickHandler(ev) var ev = ev ? ev : window.event; ev.returnValue = false; 复制代码 复制代码click here var link = document.getElementById(aa); link.attachEvent(onclick,clickHandler); function clickHandler(ev) ev.returnValue = false; 复制代码 IE中:当使用attachEvent注册监听器时，

19、可以使用参数ev或者window.event来设置returnValue;当使用addEventListener注册监听器时IE 9,10 window.event.returnValue = false;或者ev.preventDefault();IE 11 ev.preventDefault()或者window.event.preventDefault();当使用obj.onclick = clickHandler形式时IE 9，10，11支持参数传递，但是参数ev对象中没有returnValue属性，通过ev参数来设置行不通IE 510 可以使用window.event.returnVa

20、lue = false来阻止默认行为IE 11: window.event没有returnValue属性，设置失败 综上:IE 浏览器 5，6，7，8，9，10都能使用attachEvent来注册监听，使用此方法生成的Event对象是具有IE 特性的对象，里面包含了cancelBubble,returnValue等IE标志IE 11废弃了对attachEvent的支持IE 9,10,11实现了对addEventListener的支持，该方法生成的Event对象是符合DOM标准的IE 9,10 的ev对象是DOM标准对象，window.event是IE 私有对象IE 11的ev对象和window.event都是DOM标准对象 DOM标准对象中没有IE 私有属性4.6 srcElement、target、currentTargetsrcElement只在IE浏览器中存在，不管以addEventListener还是attachEvent它指向触发事件的元素，而不是绑定事件的元素currentTarget和target:只有使用addEven