JavaScript事件学习小结(二)js事件处理程序

以下是“JavaScript事件学习小结(二)js事件处理程序”攻略的详细讲解：

简介

JavaScript中事件处理程序是指在用户与网页交互时由浏览器调用的函数。事件处理程序通常用来响应用户的点击、鼠标移动、键盘输入等行为。

事件处理程序的三种方式

JavaScript中有三种方式定义事件处理程序：

1. 直接在HTML标签中使用内联事件处理程序;
2. 在JS脚本中使用dom0级事件处理程序;
3. 在JS脚本中使用dom2级事件处理程序。

内联事件处理程序

内联事件处理程序是把事件处理程序直接嵌入到HTML元素中的一种方式。示例如下：

<button onclick="alert('Hello World')">Click Me!</button>

内联事件处理程序的缺点是不太好维护，且不同浏览器的实现方式不一样。

dom0级事件处理程序

dom0级事件处理程序是在JS脚本中直接给HTML元素添加事件处理程序的一种方式。示例如下：

<script>
    var btn = document.getElementById("myButton");
    btn.onclick = function() {
        alert("Hello World");
    };
</script>
<button id="myButton">Click Me!</button>

dom0级事件处理程序的缺点是只能为一个事件添加一个处理程序，且添加的处理程序会覆盖之前添加的处理程序。

dom2级事件处理程序

dom2级事件处理程序是在JS脚本中通过addEventListener()或attachEvent()方法添加事件处理程序的一种方式。与dom0级事件处理程序不同，使用dom2级事件处理程序可以为同一事件添加多个处理程序，并且可以自由移除处理程序。示例如下：

<script>
    var btn = document.getElementById("myButton");
    btn.addEventListener("click", function() {
        alert("Hello World");
    }, false);
</script>
<button id="myButton">Click Me!</button>

dom2级事件处理程序为同一元素和事件类型添加多个回调函数，每个回调按照添加的顺序依次调用。可以使用removeEventListener()方法移除添加的事件处理程序。

事件对象

事件处理程序会自动传入一个事件对象event，其中包含了许多属性和方法，用来获取事件相关信息。以下是常用的事件对象属性和方法：

• type: 事件类型
• target: 引起事件的HTML元素
• stopPropagation(): 阻止事件冒泡
• preventDefault(): 阻止默认事件

示例如下：

<script>
    var a = document.getElementById("myLink");

    function handleClick(event) {
        // 取消默认行为
        event.preventDefault();

        // 阻止事件冒泡
        event.stopPropagation();

        alert("You clicked the link " + event.target.href);
    }

    a.addEventListener("click", handleClick, false);
</script>
<a href="http://www.example.com" id="myLink">Click Me!</a>

事件冒泡

事件冒泡指的是事件从触发的元素向上冒泡到父元素的过程。例如，如果点击一个按钮，该事件会先触发按钮上的事件处理程序，然后冒泡到父元素，如所属的表单、div等。如果父元素上定义了相同类型的事件处理程序，它也将被触发。

可以使用stopPropagation()方法来阻止事件冒泡。示例如下：

<div onclick="alert('Clicked DIV')">
  <button onclick="alert('Clicked BUTTON');event.stopPropagation()">Click Me!</button>
</div>

在这个例子中，如果单击按钮，则首先会调用按钮上的事件处理程序，然后停止冒泡，因此无法触发DIV元素上的事件处理程序。

结语

JavaScript事件处理程序是前端开发中常用的技术之一，可以通过多种方式定义和添加事件处理程序，最佳实践是使用dom2级事件处理程序实现事件处理。在事件处理程序中，可以利用事件对象来获取事件发生的相关信息，防止事件冲突，提高用户体验。

希望这篇攻略能帮助你更好地理解JavaScript事件处理程序，如果需要更多的示例可以访问 MDN 进行学习。