JS的DOM事件系统

事件系统

事件对象

当响应函数被触发时，会有一个默认参数event被传入，event中包含着触发函数中的所有细节，可以通过调用event中的属性来进行各种操作。

ps兼容性问题，在IE8中event不是作为默认参数传入的，，是将事件对象作为window对象的属性保存的

if(!event){
    event = window.event
}

事件冒泡

事件的冒泡是指事件的向上传导，当后代元素上的事件被触发，其祖先元素的相同事件也会被触发。在开发中，大部分的冒泡都是有用的，如果不希望事件冒泡可以使用事件对象s上的cancelBubble属性来取消冒泡。

s1.onclick  = function(event){
    event = event || window.event;
    event.cancelBubble = true;
}

事件委派

我们希望，只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将事件绑定到这些元素共同的祖先元素上。这就是事件的委派。

指将事件统一绑定到元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素（实质是利用事件冒泡的特质），从而使用祖先元素的响应函数处理。

但是此种方法会使祖先元素下所有元素都可以使用响应事件。

我们可以将我们需要触发事件的元素绑定相同的class，通过使用event.target属性，判断当前触发事件对象是否是我们需要的。

event.target表示当前触发事件的对象

if(event.target==className){
    x.oncilck(){
        
    }
​
}

事件绑定

在为一个元素绑定多个相同的事件函数时，后添加的事件会将前边添加的事件覆盖掉。

可以使用addEventListener（）方法，为元素添加绑定响应函数，此方法有三个参数，

1.事件的字符串，不要on，

2.回到函数，当时间触发时会被调用。

3.是否在捕获阶段触发事件，需要一个布尔值，一般是false

使用函数为元素绑定相同事件绑定多个响应函数，这样当事件触发时，响应函数就会按照函数的绑定顺序执行

IE8兼容性问题，attachEvent（），要on，且执行方式是从后往前执行回调函数

事件传播

事件的传播总共分为三个阶段

1.捕获阶段

在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时时间不会触发

2.目标阶段

事件捕获到目标元素，捕获结束开始在目标元素上触发事件

3.冒泡阶段

事件从目标元素向她的祖先元素传递，依次触发元素上的事件

ps如果希望在捕获阶段就触发事件，可以将addEventListener（）的第三个参数设置为true