事件

最新推荐文章于 2025-02-06 11:41:03 发布

原创最新推荐文章于 2025-02-06 11:41:03 发布 · 154 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

19 篇文章

订阅专栏

JavaScript事件流模型

事件捕获：事件有最不具体的元素接收，逐级向下传播，一直到最具体的节点元素（ie的兼容性不好，建议冒泡）。
事件冒泡：事件由最具体的节点元素接收，逐级向上传播，直到document文档对象。

DOM事件流的三个阶段：事件捕获--》目标阶段--》事件冒泡 IE9,Opera,Firebox,chrome,Safari;IE8以及更早版本不支持

注意：如果给一个事件绑定两个点击事件，一个用冒泡，一个用捕获，执行顺序为 非目标元素捕获>目标元素>非目标元素冒泡

IE事件流：冒泡型

Netscape（网络信息浏览器）：捕获型

阻止事件冒泡

if(ev.stopPropagation){

    ev.stopPropagation();

} else{

    ev.cancelBubble=true;//IE

}

阻止事件的默认行为

if(ev.preventDefault){

    ev.preventDefault();

} else{

    ev.returnValue=false;//IE  

}

阻止冒泡和默认行为

return false;

添加事件的方法

直接在html元素上添加οnclick="函数名（）"； //HTML事件处理程序
在js中获取dom元素后添加onclick事件，dom元素.οnclick=function(){}; //DOM0级事件处理程序 dom元素=null移除
绑定事件 attachEvent()方法，支持ie；obj. attachEvent('onclick',menthod); //IE事件处理程序 ie6-8
绑定事件 addEventListener()方法，支持事件冒泡和事件捕获，不兼容低版本 ie6-8

DOM2级事件处理程序obj. addEventListener('click',method,false); //默认false为冒泡，true为捕获

注意：普通添加事件的方法不支持添加多个事件，后面的会覆盖前面的。而绑定事件的方式可以添加多个。

removeEventListener()可以移除绑定addEventListener（）绑定的事件，条件是提供参数一致。。

同样的，detachEvent()方法可以移除attachEvent（）绑定的事件，条件也是提供参数一致。

事件对象

在触发DOM上的事件时，会产生一个事件对象event，对象中包含着事件的元素、类型、以及相关事件的方法等信息。

1.DOM中的事件对象

DOM0和DOM2中，都会传入event对象。HTML事件处理程序中，也会保存着event对象。

var btn=document.getElementById('myBtn'); 

    btn.onclick=function(event){

    alert('event.type');//click

}

event对象常见属性和方法有：

bubbles 事件是否可以冒泡

cancelable 是否可以取消事件的默认行为

detail 与事件相关的细节信息

currentTarget 某事件处理程序当前正在处理事件的那个元素

target 事件的目标

stopPropagation() 取消事件的进一步捕获或者冒泡（bubbles为true）

preventDefault() 取消事件的默认行为（cancelable 为true）

type 被触发事件的类型

事件处理程序内部，对象this一直等于currentTarget的值，而target只包含事件的实际目标。如果事件处理元素就是目标元素，那么三者的值一致。event.currentTarget==event.target==this

2.IE中的事件对象

如果是通过DOM0添加的事件处理程序，event作为window对象的一个属性存在。

var btn=document.getElementById('myBtn'); 

btn.onclick=function(){

    var event=window.event;

    alert('event.type');//click

}

如果是通过attachEvent()添加的，event对象会作为参数传入事件处理程序函数中。

var btn=document.getElementById('myBtn'); 

btn.attachEvent('onclick',function(event){

    alert('event.type');//click

});

event对象常见属性和方法有：

cancelBubble 为true时可以取消事件冒泡

returnValue 为false时可以取消事件的默认行为

srcElement 事件的目标（与DOM中target属性相同）

type 被触发事件的类型

DOM与IE事件流的不同总结：

1.绑定事件方法不同；

2.this指向不同，IE事件流中的this指向window对象，而DOM事件流中的this指向DOM对象；

3.执行顺序不一样，IE不按照注入顺序，而DOM事件流按注入顺序执行事件；

4.事件名不同，IE加on，DOM不加。

事件委托

定义：利用事件冒泡原理，让自己所触发的事件，由他的父元素来代替执行。

减少了监听事件的数量，比如很多ui li；
其次对于动态添加的元素，普通事件监听不到，利用事件委托可以由自动的事件响应处理。

注意：事件委托并不是直接处理事件，而是根据event.target得到了发生事件的子元素，让子元素调用事件回调函数。

mouseenter 阻止事件冒泡传播

mouseover 事件冒泡传播