js addeventlistener 参数
    在Web开发中，我们经常需要给页面元素添加事件，以响应用户的交互操作。而在 JavaScript 中，我们可以通过 addEventListener 方法来实现这一功能。本文将介绍 addEventListener 方法的使用，以及其常见的参数。
    二、addEventListener 方法blur事件
    addEventListener 方法是 JavaScript 中用于添加事件的方法。它的语法如下：
    element.addEventListener(event, function, useCapture);
    其中，element 表示要添加的元素，event 表示要监听的事件类型，function 表示要执行的函数，useCapture 表示是否使用事件捕获机制（默认为 false）。
    例如，我们可以为一个按钮添加 click 事件，如下所示：
    ```
    var btn = ElementById('btn');
    btn.addEventListener('click', function() {
    alert('按钮被点击了！');
    });
    ```
    当用户点击该按钮时，就会弹出一个对话框，显示“按钮被点击了！”的提示信息。
    三、常见的事件类型
    addEventListener 方法可以监听多种事件类型，常见的事件类型包括：
    1. click：鼠标左键单击事件；
    2. dblclick：鼠标左键双击事件；
    3. mouseover：鼠标移入事件；
    4. mouseout：鼠标移出事件；
    5. keydown：按键按下事件；
    6. keyup：按键释放事件；
    7. focus：元素获得焦点事件；
    8. blur：元素失去焦点事件；
    9. submit：表单提交事件；
    10. load：页面加载完成事件；
    11. unload：页面卸载事件。
    除了上述事件类型，还有许多其他的事件类型，可以根据实际需求进行选择。
    四、事件处理函数
    在 addEventListener 方法中，function 参数表示要执行的事件处理函数。事件处理函数可以是一个具名函数，也可以是一个匿名函数。
    例如，我们可以为一个文本框添加一个 keyup 事件，用于在用户输入时实时计算文本框中的字符数，如下所示：
    ```
    var input = ElementById('input');
    input.addEventListener('keyup', function() {
    var value = this.value;
    var len = value.length;
    ElementById('count').innerHTML = len;
    });
    ```
    在上述代码中，我们使用了一个匿名函数作为事件处理函数。该函数在每次用户输入时
被调用，计算文本框中的字符数，并将结果显示在页面上。
    除了匿名函数，我们还可以使用具名函数作为事件处理函数。例如，我们可以定义一个名为 handleClick 的函数，用于处理按钮的 click 事件，如下所示：
    ```
    var btn = ElementById('btn');
    btn.addEventListener('click', handleClick);
    function handleClick() {
    alert('按钮被点击了！');
    }
    ```
    在上述代码中，我们使用了一个具名函数 handleClick 作为事件处理函数。该函数在按
钮被点击时被调用，弹出一个对话框，显示“按钮被点击了！”的提示信息。
    五、事件捕获机制
    addEventListener 方法的第三个参数 useCapture 表示是否使用事件捕获机制。事件捕获机制是指在事件传播过程中，先从文档根节点开始捕获事件，然后再依次向下传递，最终到达目标元素。
    默认情况下，addEventListener 方法使用事件冒泡机制，即从目标元素开始，依次向上冒泡，直到文档根节点。如果将 useCapture 参数设置为 true，则使用事件捕获机制。
    例如，我们可以为一个 div 元素添加 click 事件，同时设置 useCapture 参数为 true，如下所示：
    ```
    var div = ElementById('div');
    div.addEventListener('click', function() {
    alert('div 被点击了！');
    }, true);
    ```
    在上述代码中，我们为 div 元素添加了一个 click 事件，并设置了 useCapture 参数为 true。当用户点击 div 元素时，事件会先经过文档根节点，然后再传递到 div 元素。因此，事件处理函数会先被执行，弹出一个对话框，显示“div 被点击了！”的提示信息。
    六、总结
    本文介绍了 JavaScript 中的 addEventListener 方法，以及其常见的参数。通过 addEventListener 方法，我们可以为页面元素添加事件，响应用户的交互操作。除了常见的事件类型，还可以根据实际需求选择其他的事件类型。事件处理函数可以是一个具名函数或匿名函数，也可以使用事件捕获机制来处理事件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。