事件处理程序

news2025/4/18 8:44:06

事件处理程序

一、事件处理程序的定义

事件处理程序是一段代码，用于响应特定的事件。在网页开发中，事件是在文档或浏览器窗口中发生的特定交互瞬间，如用户点击按钮、页面加载完成等。事件处理程序则是针对这些事件执行的函数，它能让网页实现交互性和动态性。

二、事件处理程序的绑定方式

2.1 HTML 内联事件处理程序

原理：

直接在 HTML 标签中使用事件属性来绑定事件处理程序，事件属性的值是 JavaScript 代码。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <button onclick="alert('你点击了按钮！')">点击我</button> 
</body> 
</html>

优缺点：

优点是简单直接，适合简单的交互。
缺点是 HTML 和 JavaScript 代码耦合度高，不利于代码的维护和复用。

2.2 DOM0 级事件处理程序

原理：

通过 JavaScript 获取 DOM 元素，然后将一个函数赋值给元素的事件属性。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <button id="myButton">点击我</button> 
    <script> 
        const button = document.getElementById('myButton');  
        button.onclick  = function() { 
            alert('你点击了按钮！'); 
        }; 
    </script> 
</body> 
</html>

优缺点：

优点是兼容性好，所有浏览器都支持。
缺点是一个元素的一个事件只能绑定一个处理程序，如果多次绑定，后面的会覆盖前面的。

2.3 DOM2 级事件处理程序

原理：

使用 addEventListener() 方法来绑定事件处理程序，它可以为元素的同一个事件绑定多个处理程序。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <button id="myButton">点击我</button> 
    <script> 
        const button = document.getElementById('myButton');  
        button.addEventListener('click',  function() { 
            alert('第一次点击响应'); 
        }); 
        button.addEventListener('click',  function() { 
            alert('第二次点击响应'); 
        }); 
    </script> 
</body> 
</html>

上述代码，当用户点击按钮时，会依次弹出两个警告框，先显示“第一次点击响应！”，再显示“第二次点击响应！”。如果用户的意图是只让其中一个处理程序响应，那么这段代码会导致两个处理程序都被触发。

下面对事件处理逻辑进行调整

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>title</title>
</head>
<body> 
    <!-- 创建一个按钮 --> 
    <button id="myButton">点击我</button> 
 
    <script> 
        // 获取按钮元素 
        const button = document.getElementById('myButton');  
        // 初始化点击次数为 0 
        let clickCount = 0; 
 
        // 为按钮添加点击事件监听器 
        button.addEventListener('click',  function () { 
            // 点击次数加 1 
            clickCount++; 
            if (clickCount === 1) { 
                // 第一次点击时显示相应信息 
                alert('第一次点击响应'); 
            } else if (clickCount === 2) { 
                // 第二次点击时显示相应信息 
                alert('第二次点击响应'); 
            } 
        }); 
    </script> 
</body> 
</html>

优缺点：

优点是可以为同一个事件绑定多个处理程序，并且可以控制事件的捕获和冒泡阶段。
缺点是部分旧浏览器（如 IE8 及以下）不支持，需要使用
attachEvent() 方法作为替代。

三、事件对象

定义：

当事件触发时，会自动创建一个事件对象，它包含了与该事件相关的信息，如事件类型、触发事件的元素、鼠标位置等。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function (event) {
            console.log(' 事件类型：', event.type);  // 事件类型： click
            console.log(' 触发事件的元素：', event.target); // 触发事件的元素：<button id="myButton">点击我</button>
        }); 
    </script>
</body>
</html>

常见事件属性和方法：

type：返回事件的类型，如 click、mouseover 等。
target：返回触发事件的元素。
preventDefault()：阻止事件的默认行为，如阻止链接的跳转、表单的提交等。
stopPropagation()：阻止事件的冒泡或捕获。

四、事件流

定义：

事件流：描述了事件在页面中触发的顺序，主要有事件捕获和事件冒泡两种机制。
事件捕获：事件从文档的根节点开始，依次向下查找触发事件的元素，直到找到目标元素。在这个过程中，如果元素绑定了相应的捕获阶段的事件处理程序，会依次执行。
事件冒泡：事件从目标元素开始，依次向上传播到文档的根节点。如果元素绑定了相应的冒泡阶段的事件处理程序，会依次执行。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <div id="outer"> 
        <div id="inner">点击我</div> 
    </div> 
    <script> 
        const outer = document.getElementById('outer');  
        const inner = document.getElementById('inner');  
 
        outer.addEventListener('click',  function() { 
            console.log(' 外层 div 冒泡阶段触发'); 
        }, false); 
        outer.addEventListener('click',  function() { 
            console.log(' 外层 div 捕获阶段触发'); 
        }, true); 
 
        inner.addEventListener('click',  function() { 
            console.log(' 内层 div 冒泡阶段触发'); 
        }, false); 
        inner.addEventListener('click',  function() { 
            console.log(' 内层 div 捕获阶段触发'); 
        }, true); 
    </script> 
</body> 
</html>

这段代码的主要功能是展示事件在DOM中的捕获和冒泡机制。当你点击inner div时，首先会触发outer div的捕获阶段事件处理程序，然后是inner div的捕获阶段事件处理程序。接着，事件开始冒泡，首先触发inner div的冒泡阶段事件处理程序，最后是outer div的冒泡阶段事件处理程序。通过这种方式，可以控制事件处理程序的执行顺序。

五、事件委托

原理：

利用事件冒泡的原理，将事件处理程序绑定到父元素上，当子元素触发事件时，事件会冒泡到父元素上，从而触发父元素上的事件处理程序。通过判断事件的 target 属性，可以确定是哪个子元素触发了事件。

示例：

<!DOCTYPE html> 
<html lang="en"> 
<body> 
    <ul id="myList"> 
        <li>列表项 1</li> 
        <li>列表项 2</li> 
        <li>列表项 3</li> 
    </ul> 
    <script> 
        const list = document.getElementById('myList');  
        list.addEventListener('click',  function(event) { 
            if (event.target.tagName  === 'LI') { 
                console.log(' 你点击了列表项：', event.target.textContent);  
            } 
        }); 
    </script> 
</body> 
</html>