js中事件传播

js中的事件传播

Javascript与HTML之间的交互是通过事件实现的。

事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。

可以使用侦听器来预定事件，以便事件发生时执行相应代码。

事件的默认传播机制：

• 捕获阶段：从外向里依次查找元素(只有dom二级事件才支持捕获)
• 目标阶段：从当前事件源本身的操作
• 冒泡阶段：从内到外依次触发相关的行为（我们最常用的就是冒泡阶段，dom对象添加了相同的事件，像click等，才会有冒泡产生）

事件流的原理图 :

0级DOM
分为2个：一是在标签内写onclick事件
　　　　 二是在JS写onlicke=function（）{}函数
　　　　
1.

<input id="myButton" type="button" value="Press Me" onclick="alert('thanks');" >

2

document.getElementById("myButton").onclick = function () {
    alert('thanks');
}

2级DOM–(为什么没有1级DOM)

DOM级别1于1998年10月1日成为W3C推荐标准。1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。在2级DOM中除了定义了一些DOM相关的操作之外还定义了一个事件模型 ，这个标准下的事件模型就是我们所说的2级DOM事件模型

2级DOM
只有一个：监听方法，有两个方法用来添加和移除事件处理程序：addEventListener()和removeEventListener()。

它们都有三个参数：

• 第一个参数是事件名（如click）；

• 第二个参数是事件处理程序函数；

• 第三个参数如果是true则表示在捕获阶段调用，为false表示在冒

  泡阶段调用。

addEventListener():可以为元素添加多个事件处理程序，触发时会按照添加顺序依次调用。
removeEventListener():不能移除匿名添加的函数。

document.getElementById(“myTest”).attachEvent(“onclick”, function(){
	 alert(1)
});

//兼容IE，事件名不加on
document.getElementById(“myTest”).addEventListener(“click”, function(){
   	 alert(1)
}, false);

只有2级DOM包含3个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。0级DOM不支持捕获。