事件监听的几个要点

最新推荐文章于 2024-11-24 03:15:15 发布

Byte_Dance

最新推荐文章于 2024-11-24 03:15:15 发布

阅读量408

点赞数

文章标签： javascript Event

本文介绍了事件处理机制，包括冒泡型和捕获型事件，以及不同浏览器支持的事件绑定方式，如onclick、addEventListener和attachEvent，并提供了解决浏览器兼容性的通用绑定和解绑方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1:事件主要分为冒泡型事件和捕获型事件,IE浏览器目前仅支持冒泡型事件.

2:事件的几种写法:

1、onlick -->事件冒泡，重写onlick会覆盖之前属性，没有兼容性问题

ele.onclik = null;   //解绑单击事件，将onlick属性设为null即可

2、addEventListener(event.type, handle, boolean); IE8及以下不支持，属于DOM2级的方法，可添加多个方法不被覆盖

//事件类型没有on，false 表示在事件第三阶段（冒泡）触发，true表示在事件第一阶段（捕获）触发。 如果handle是同一个方法，只执行一次。
ele.addEventListener('click', function(){ }, false);    //括号内的参数为(事件 , 触发事件后调用的函数名 , false<冒泡>/true<捕获>)
//解绑事件，参数和绑定一样
ele.removeEventListener(event.type, handle, boolean);

3、attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

//如果handle是同一个方法，绑定几次执行几次，这点和addEventListener不同,事件类型要加on,例如onclick而不是click
ele.attachEvent('onclick', function(){ }); 
//解绑事件，参数和绑定一样
ele.detachEvent("onclick", function(){ });3、attachEvent(event.type, handle ); IE特有，兼容IE8及以下，可添加多个事件处理程序，只支持冒泡阶段

怎样解决浏览器兼容性问题?

>>>>>>绑定事件:

function addEvent(element, eType, handle, bol) {
    if(element.addEventListener){           //如果支持addEventListener
        element.addEventListener(eType, handle, bol);
    }else if(element.attachEvent){          //如果支持attachEvent
        element.attachEvent("on"+eType, handle);
    }else{                                  //否则使用兼容的onclick绑定
        element["on"+eType] = handle;
    }
}


>>>>>>事件解绑:

function removeEvent(element, eType, handle, bol) {    if(element.addEventListener){        element.removeEventListener(eType, handle, bol);    }else if(element.attachEvent){        element.detachEvent("on"+eType, handle);    }else{        element["on"+eType] = null;    }}