javascript事件详解笔记：
一、事件流
1、事件流：
描述的是页面中接受事件的顺序,有事件冒泡、事件捕获两种。
2、事件冒泡：
由最具体的元素接收，然后逐级向上传播到最不具体的元素的节点（文档）。
3、事件捕获：
最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>事件</title> </head> <body> <div id="div1"> <button id="btn1">按钮</button> </div> </body> </html> | 1、事件冒泡情况——这种情况使用得最多： 点击按钮后，最先由button#btn1接收，然后传递给它的父级div#div1，然后再上级上html,再上级是document,最顶级是window. 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有Javascript全局对象、函数以及变量均自动成为 window 对象的成员。(全局变量是 window 对象的属性,全局函数是 window 对象的方法)。HTML DOM 的 document 也是 window 对象的属性之一. 2、事件捕获情况： 点击按钮后最先由document接收，然后是div#div1,然后是button#btn1 |
二、事件处理
1、HTML事件处理：
直接添加到HTML结构中。
<div id="div"> <button id="btn1" onclick="myAlert(‘hello‘)">按钮</button> </div> <script type="text/javascript"> function myAlert(str){ alert(str); } </script> |
2、DOM0级事件处理
把一个函数赋值给一个事件处理程序属性。
<div id="div"> <button id="btn1">按钮</button> </div> <script type="text/javascript"> var button = document.getElementById("btn1"); button.onclick = function(){ alert("hello"); } button.onclick = null; //清除事件 </script> |
这种方式的缺点是，当有多个事件函数同名时前者会被后者覆盖掉，如
button.onclick = function(){alert(“hello——1"); } button.onclick = function(){alert(“hello——2"); } button.onclick = function(){alert(“hello——3"); } //最终只会执行最后一个 |
3、DOM2级事件处理——最方便，使用得多
addEventListener(“事件名”, “事件处理函数”, “布尔值”);
true:事件捕获；
false:事件冒泡；
removeEventListener();
var button = document.getElementById("btn1"); button.addEventListener(‘click‘,myAlert1); button.addEventListener(‘click‘,myAlert2); function myAlert1(){ alert("DOM2级事件处理 1"); } function myAlert2(){ alert("DOM2级事件处理 2"); } button.removeEventListener(‘click‘,myAlert1);//移除事件 |
这种方式会依次把事件执行；
4、IE事件处理程序(版本小于等于8的情况)
attachEvent——作用和用法与addEventListener一样(只是需要在事件前加on，如onclick)
detachEvent——作用和用法与removeEventListener一样
5、根据浏览器来应用：
var button = document.getElementById("btn1"); if(button.addEventListener){ button.addEventListener(‘click‘,myAlert1); }else if(button.attachEvent){ button.attachEvent(‘onclick‘,myAlert1); }else{ button.onclick = myAlert1(); } function myAlert1(){ alert("DOM2级事件处理 1"); } |
三、事件对象（event/e）
1、事件对象：
在触发DOM事件的时候都会产生一个对象；
2、事件对象event：
1) type: 获取事件类型
2) target: 获取事件目标
var button = document.getElementById("btn1"); button.addEventListener(‘click‘,myAlert); function myAlert(event){ console.log(event.type);//==>click console.log(event.target.id);//==>btn1 } |
3) stopPropagation(): 阻止事件冒泡（向上传递）
阻止冒泡前： var button = document.getElementById("btn1"); button.addEventListener(‘click‘,myAlert); function myAlert(event){ console.log(“button元素触发”); } var div = document.getElementById("div"); div.addEventListener(‘click‘, myAlert2); function myAlert2(){ console.log("div元素触发"); } | 执行后： button元素触发 div元素触发 //事实上经常是点击按钮后并不想触发div元素事件 |
阻止冒泡后： function myAlert(event){ console.log("button元素触发");//==>btn1 event.stopPropagation(); } | //执行结果 button元素触发 |
<a href="#" id="aa">我是链接</a> var aa = document.getElementById("aa"); aa.addEventListener(‘click‘, clickA); function clickA(event){ event.preventDefault(); } | //a标签的默认行为是打开链接，而加入了这个 event.preventDefault();之后再点击a标签就不会执行打开链接这个动作了 |
本文出自 “木香蔷薇” 博客，转载请与作者联系！
原文：http://muxiangqiangwei.blog.51cto.com/3832230/1763203