JS事件机制全解，手把手教你搞定event流程

  
Item 1
  
Item 2
  
Item 3

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

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

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

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

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

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

    
      
    
        Click Me!
      
    
    
    

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

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

    preventDefault()的作用是什么？

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

    Click Me!
    
    

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

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

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

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

    Click Me!
    
    

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

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

    到这里，我们也就讲完了《JS事件机制全解，手把手教你搞定event流程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于JS事件,event处理的知识点！