JS事件---DOM2级事件处理:addEventListener()、removeEventListener()、attachEvent()

时间:2022-07-18 04:38:38

事件处理有HTML事件处理、DOM0级事件处理、DOM2级事件处理。

HTML事件处理将事件看做标签的一个属性,与HTML混写,代码多时不容易管理。

DOM0级事件处理脚本方式添加事件,实现了HTML和JS的分离,但是它存在缺陷,例如:要为一个按钮添加点击事件,但只能为点击事件添加一个函数,不能同时添加多个函数,如果同时添加多个函数,则最后的函数将覆盖前面的函数。

DOM2级事件处理实现了HTML和JS的分离,又能够为事件添加多个事件句柄。下面举例说明:

上面的代码中,btn3是通过getElementById获取的input对象,其中,click是input的点击(onclick())事件,function1表示点击时调用function1函数。

同理,第二句代码表示btn3在点击时同时调用函数function2。通过ele.addEventListener()方法同时给btn3的onclick()事件添加了两个函数。

DOM2级事件处理中也包括删除事件句柄,具体用法和ele.addEventListener()方法相同,如下

DOM2级事件处理存在兼容性问题,IE8及其以下需要使用IE事件处理程序attachEvent/detachEvent

为解决兼容性问题,可以使用if...else...语句实现