js事件event处理机制_js事件event处理详细讲解

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

<script>
  document.getElementById('myList').addEventListener('click', function(event) {
    if (event.target && event.target.nodeName == 'LI') {
      console.log('List item clicked:', event.target.textContent);
    }
  });
</script>

在这个例子中，我们将点击事件监听器绑定到了

元素上。当任何一个
• 元素被点击时，
  元素上的监听器都会被触发。然后，我们通过event.target属性来获取触发事件的元素，并判断它是否是一个
  • 元素。如果是，我们就执行相应的操作。

    事件委托的优点在于，它可以减少事件监听器的数量，从而提高性能。特别是当你有大量的子元素需要绑定事件时，事件委托的优势就更加明显。 想象一下，如果不用事件委托，每次新增一个

  • ，你都要重新绑定事件，简直是噩梦。

    如何阻止事件冒泡和捕获？

    有时候，我们可能需要阻止事件冒泡或捕获，以防止不必要的事件触发。可以使用event.stopPropagation()方法来阻止事件继续传播。

    <div id="outer">
      <div id="inner">
        Click Me!
      </div>
    </div>
    
    <script>
      document.getElementById('inner').addEventListener('click', function(event) {
        console.log('Inner div clicked');
        event.stopPropagation(); // 阻止冒泡
      });
    
      document.getElementById('outer').addEventListener('click', function(event) {
        console.log('Outer div clicked');
      });
    </script>

    登录后复制

    在这个例子中，点击 "Click Me!" 时，只会输出 "Inner div clicked"，而不会输出 "Outer div clicked"。因为我们在inner元素的点击事件处理函数中调用了event.stopPropagation()方法，阻止了事件继续向上冒泡。

    另外，event.stopImmediatePropagation()方法可以阻止同一个元素上的其他事件监听器被触发。

    preventDefault()的作用是什么？

    event.preventDefault()方法用于阻止事件的默认行为。例如，点击一个链接时，浏览器会默认跳转到链接的URL。如果你调用了event.preventDefault()方法，浏览器就不会跳转。

    <a href="https://www.example.com" id="myLink">Click Me!</a>
    
    <script>
      document.getElementById('myLink').addEventListener('click', function(event) {
        event.preventDefault(); // 阻止默认行为
        console.log('Link clicked, but no navigation');
      });
    </script>

    登录后复制

    在这个例子中，点击 "Click Me!" 时，浏览器不会跳转到https://www.example.com，而是会在控制台输出 "Link clicked, but no navigation"。preventDefault()在表单提交、右键菜单等场景下非常有用。

    为什么事件处理函数中要传入event对象？

    事件处理函数中的event对象包含了关于事件的各种信息，例如事件类型、目标元素、鼠标位置、键盘按键等等。通过event对象，我们可以获取这些信息，并根据需要进行处理。

    例如，我们可以使用event.type属性来获取事件类型：

    <button id="myButton">Click Me!</button>
    
    <script>
      document.getElementById('myButton').addEventListener('click', function(event) {
        console.log('Event type:', event.type); // 输出 "Event type: click"
      });
    </script>

    登录后复制

    或者，我们可以使用event.clientX和event.clientY属性来获取鼠标点击位置的坐标：

    <div id="myDiv" style="width: 200px; height: 100px; border: 1px solid black;"></div>
    
    <script>
      document.getElementById('myDiv').addEventListener('click', function(event) {
        console.log('Mouse position:', event.clientX, event.clientY);
      });
    </script>

    登录后复制

    总之，event对象是事件处理函数中非常重要的一个参数，它提供了丰富的信息，让我们能够更好地处理事件。