Javascript标准事件模型

本文为原创，转载请注明出处： cnzt       文章：cnzt-p

 http://www.cnblogs.com/zt-blog/p/6676913.html

 

1. 分类

IE -- 冒泡型

现代浏览器 -- 捕获型冒泡型

 

2. DOM事件流

捕获(window? --> document --> 父 --> 子) --> 目标 --> 冒泡(子 --> 父 --> document --> window?) 
*********DOM标准的事件模型最独特的性质是,文本节点也会触发事件(在IE不会)*********

 

3. 事件句柄 VS 事件监听器

事件句柄：onclick  只能监听一次

　　onclick = function(){}  /  onclick = null

事件监听器：允许注册多个监听器

　　ie   --  attachEvent("onclick", callback)  /  detachEvent("onclick", callback)

　　　　    *****callback回调函数中的this指向window！！！

　　DOM标准 -- addEventListener("click", callback, ifCapture)  /  removeEventListener("click", callback, ifCapture)

　　　　　 ifCapture指明事件是捕获型事件(true,捕获阶段调用)还是冒泡型事件(false,冒泡阶段调用)。

               callback中的this执行注册事件的element

 

4. 事件对象

　　ie -- window.event

　　DOM标准 -- callback中的参数e

 

5. 事件的目标元素获取

　　ie --  event.srcElement

　　DOM标准 -- e.target

 

6. 阻止冒泡

　　ie --  event.cancelBubble = true;

　　DOM标准 -- e.stopPropagation(); -- 也可阻止捕获继续向下传递

 

7. 阻止默认行为

　　ie --  event.returnValue = false;

　　DOM标准 -- e.preventDefault();

 

综合：

　　return false;