JS：Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序

Posted 2020-10-01 yyy_鸳鸯

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS：Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序相关的知识，希望对你有一定的参考价值。

1.html事件处理程序

某个元素支持的某种事件，可以通过一个与相应事件处理程序同名的HTML特性指定。这个特性的值应该是能够执行的JS代码。例如：按钮单击是要执行一些js代码，可以像下面：

在js中就可以像下面一样处理：

function showMessage(){

alert("hello function");

alert(this == window) // true

}

</script>

此时showMessage中的this指向的window，但是showMessage函数可以被多个元素同时调用。

但是此方法有的缺陷就是js和html耦合在一起，如果要更换事件处理程序，需要改html和js两个地方。所以很多人喜欢用dom事件处理程序。

2. DOM0级事件处理程序

通过js指定事件处理程序的方式，就是将一个函数赋值给一个事件处理程序的属性。

每个元素（包括window和document）都有自己的事件处理程序的属性，这些属性通常全部小写，就像onclick，将这个属性的值设置为一个函数，就可以指定事件处理程序。如下：

<html>
    <head></head>
    <body>
        <input type="button" value="click me2" id="btn2">
        <script>
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            console.log(this);
        }
        </script>
    </body>
</html>

上面的this输出的结果是：<input type="button" value="click me2" id="btn2">，说明dom0级事件处理程序中的this指向的是当前元素本身，而不是windows，通过this可以访问元素的任何属性和任何方法。

3.DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener().所有的DOM节点都包含这两个方法，并且接受3个参数，要处理的事件名，作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true，则表示在捕获阶段，是false则表示在冒泡阶段。

<html>
    <head></head>
    <body>
        <input type="button" value="click me2" id="btn2">
        <script>
        var btn2 = document.getElementById("btn2");
        //addEventListener接受3个参数:要处理的事件名，作为事件处理程序的函数和一个布尔值。最后一个布尔值如果是true，则表示在捕获阶段，是false则表示在冒泡阶段
        btn2.addEventListener(‘click‘,function(){
            console.log(this);
        }, false);
        </script>
    </body>
</html>

上面代码输出的结果和dom0级代码输出的结果一样：<input type="button" value="click me2" id="btn2">，说明dom2级事件处理程序中的this指向的是当前元素本身，而不是windows。

注意：addEventListener()方法只能通过removeEventListener()方法来移除。

但是使用removeEventListener()方法移除事件的时候需要注意的一点：

<html>
    <head></head>
    <body>
        <input type="button" value="click me2" id="btn2">
        <script>
        var btn2 = document.getElementById("btn2");
        btn2.addEventListener(‘click‘,function(){
            console.log(this);
        }, false);
        btn2.removeEventListener(‘click‘,function(){//没有用
            console.log(this);
        }, false);
        </script>
    </body>
</html>

上面的方法移除click事件是没有用的，为什么呢？因为addEventListener和removeEventListener的第二个参数需要同一个函数，而上面的代码看似是同一个函数，其实不然，它们是功能相同的，但是是不同的匿名函数。如果需要正真移除事件处理程序，需要向下面这样：

<html>
    <head></head>
    <body>
        <input type="button" value="click me2" id="btn2">
        <script>
        var btn2 = document.getElementById("btn2");
        var handler = function(){
            console.log(this);
        }
        btn2.addEventListener(‘click‘, handler, false);
        btn2.removeEventListener(‘click‘,handler, false);
        </script>
    </body>
</html>

像上面一样，就可以保证addEventListener和removeEventListener的第二个参数是同一个函数。

attachEvent()与detachEvent()

在早期的IE浏览器，如：IE8中，没有实现addEventListener()和removeEventListener()，但提供了两个替代方法attachEvent()和detachEvent()。由于Microsoft当前最新的系统Windows 10中，已放弃IE被edge浏览器替代，所在attachEvent()和detachEvent()已没有意义。

上面的内容基本上是从《javascript高级程序设计》摘抄，在加上自己的一些理解。如果有错误，欢迎指正。

以上是关于JS：Html事件处理程序 vs DOM0级事件处理程序 vs DOM2级事件处理程序的主要内容，如果未能解决你的问题，请参考以下文章