Dom事件的注册和移除【待修改】

忘是亡心i 2023-10-14 14:21 44阅读 0赞

### *DOM* 注册事件 ###

使用 *JavaScript* 为 *DOM* 元素注册事件的方式有多种。但是并不是一开始就设计了多种方式，而是随着技术的发展，发展前一种方式有所缺陷，所以设计了新的 *DOM* 元素注册事件的方式。

这里我们就一起来总结一下 *DOM* 中注册事件的方式有哪些。

#### *HTML* 元素中注册事件 ####

*HTML* 元素中注册的事件，又被称之为行内事件监听器。这是在浏览器中处理事件最原始的方法。

具体的示例如下：

function onClick(param) {
        
      console.log(`你点击了按钮，${
          param}`);
    }

在上面的代码中，我们为 *button* 元素添加了 *onclick* 属性，然后绑定了一个名为 *onclick* 的事件处理器。

在 *JavaScript* 中只需要书写对应的 *onclick* 事件处理函数即可。

但是有一点需要注意，就是这种方法已经过时了，原因如下：

*  *JavaScript* 代码与 *HTML* 标记混杂在一起，破坏了结构和行为分离的理念。
 *  每个元素只能为每种事件类型绑定一个事件处理器。
 *  事件处理器的代码隐藏于标记中，很难找到事件是在哪里声明的。

但是如果是做简单的事件测试，那么这种写法还是非常方便快捷的。

#### *DOM* 方式注册事件 ####

这种方式是首先取到要为其绑定事件的元素节点对象，然后给这些节点对象的事件处理属性赋值一个函数。

这样就可以达到 *JavaScript* 代码和 *HTML* 代码相分离的目的。

具体的示例如下：

var button = document.getElementById("myButton");
    button.onclick = function() {
        
      console.log("按钮被点击");
    }

这种方式虽然相比 *HTML* 元素中注册事件有所改进，但是它也有一个缺点，那就是它依然存在每个元素只能绑定一个函数的局限性。

下面我们尝试使用这种方式为同一个元素节点绑定 *2* 个事件，如下：

var button = document.getElementById("myButton");
    
    button.onclick = function() {
        
      console.log("点击事件1");
    };
    
    button.onclick = function() {
        
      console.log("点击事件2");
    };

当我们为该 *DOM* 元素绑定 *2* 个相同类型的事件时，后面的事件处理函数就会把前面的事件处理函数给覆盖掉。

#### 添加事件监听器 ####

*DOM2* 级再次对事件的绑定方式进行了改进。

*DOM2* 级通过 *addEventListener* 方法来为一个 *DOM* 元素添加多个事件处理函数。

该方法接收 *3* 个参数：事件名、事件处理函数、布尔值。

如果这个布尔值为 *true*，则在捕获阶段处理事件，如果为 *false*，则在冒泡阶段处理事件。若最后的布尔值不填写，则和 *false* 效果一样，也就是说默认为 *false*，在冒泡阶段进行事件的处理。

接下来我们来看下面的示例：这里我们为 *button* 元素绑定了 *2* 个事件处理程序，并且 *2* 个事件处理程序都是通过点击来触发。

var button = document.getElementById("myButton");
    
    button.addEventListener('click', function() {
        
      console.log("点击事件1");
    });
    
    button.addEventListener('click', function() {
        
      console.log("点击事件2");
    });

在上面的代码中，我们通过 *addEventListener* 为按钮绑定了 *2* 个点击的事件处理程序，*2* 个事件处理程序都会执行。

另外需要注意的是，在 *IE* 中和 *addEventListener* 方法与之对应的是 *attachEvent* 方法。

### *DOM* 移除事件 ###

在JavaScript中，通过onclick属性添加的事件可以通过将onclick属性设置为null来移除。这将会移除该元素的onclick事件处理器。例如：

var button = document.getElementById("myButton");
    
    // 添加一个事件处理器
    button.onclick = function() {
        
      console.log("按钮被点击");
    };
    
    // 移除事件处理器
    button.onclick = null;

在这个例子中，我们首先给按钮添加了一个点击事件处理器，这个处理器会在控制台输出"按钮被点击"。然后我们通过将按钮的onclick属性设置为null来移除这个事件处理器。移除事件处理器后，点击按钮将不会有任何效果。

如果你是通过 addEventListener 方法添加的事件处理器，那么你需要使用 removeEventListener 方法来移除它。

下面是一个例子：

var button = document.getElementById("myButton");
    
    // 定义一个事件处理器
    function handleClick() {
        
      console.log("按钮被点击");
    }
    
    // 添加一个事件处理器
    button.addEventListener('click', handleClick);
    
    // 移除事件处理器
    button.removeEventListener('click', handleClick);

在这个例子中，我们首先定义了一个名为 handleClick 的事件处理器。然后，我们使用 addEventListener 方法将 handleClick 添加为按钮的点击事件处理器。最后，我们使用 removeEventListener 方法移除了 handleClick 事件处理器。

值得注意的是， removeEventListener 需要和 addEventListener 使用相同的参数（事件类型和处理器函数）。这意味着，如果你是通过 addEventListener 添加一个匿名函数作为事件处理器，你将无法使用 removeEventListener 来移除它，因为匿名函数无法被重新引用。所以，在可能需要移除事件处理器的情况下，最好使用具名函数。