JavaScript 是现代 Web 开发中必不可少的一部分。处理用户交互需要在 HTML 元素上注册事件,以便在特定行为发生时执行相应的代码。虽然 jQuery 提供了方便的 API 来处理这些事件,但是你并不一定需要依赖 jQuery 来注册事件。本文将演示如何使用原生 JavaScript 注册事件。
1. addEventListener()
addEventListener() 是原生 JavaScript 中用于添加事件侦听器的方法。该方法有三个参数:要监听的事件类型、触发事件时要执行的函数、以及一个可选的布尔值,用于指定是否在捕获阶段触发事件。以下是一个示例:
----- ------ - ------------------------------------- -------------------------------- ---------- - ------------------- ----------- ---
在这个示例中,我们首先通过 document.querySelector() 方法获取了一个 ID 为 my-button 的元素,并将其存储在变量 button 中。然后,我们调用了 button 对象的 addEventListener() 方法来监听 click 事件。当按钮被点击时,控制台将输出 "Button clicked!"。
2. removeEventListener()
removeEventListener() 方法与 addEventListener() 方法类似,可以用于从元素中删除事件侦听器。它需要传入两个参数,第一个参数是要移除的事件类型,第二个参数是要移除的函数的引用。以下是一个示例:
-------- -------------- - ------------------- ----------- - ----- ------ - ------------------------------------- -------------------------------- -------------- -- ------------ --------------------- - ----------------------------------- -------------- -- ------
在这个示例中,我们首先定义了一个名为 clickHandler 的函数,该函数将在按钮被点击时被调用。然后,我们通过 addEventListener() 方法将 clickHandler 函数添加为按钮的点击事件处理程序。最后,我们使用 removeEventListener() 方法在两秒钟后从按钮中删除 clickHandler 函数。
3. 事件委托
事件委托是一种处理事件的技术,它通过将事件处理程序添加到父元素上来减少事件处理程序的数量。这种方法可以提高性能,并使代码更易于维护。以下是一个示例:
--- ------------- -------- ------ -------- ------ -------- ------ -----
----- ---- - ----------------------------------- ------------------------------ --------------- - -- --------------------- --- ----- - ------------------------------------ - - --- ----------- - ---
在这个示例中,我们通过获取 ID 为 my-list 的元素并使用 addEventListener() 方法将 click 事件添加到该元素上。当单击列表项时,事件会冒泡到列表本身,并且我们可以检查 event.target.tagName 是否为 'LI' 来确定单击的是哪个列表项。
4. 总结
在本文中,我们介绍了如何在不使用 jQuery 的情况下注册 JavaScript 事件。我们展示了如何使用原生 JavaScript 的 addEventListener() 和 removeEventListener() 方法来处理事件,并介绍了事件委托的概念及其优点。通过这些技术,您可以编写更节省资源、更灵活和可维护的 JavaScript 代码。
示例代码:https://codepen.io/chatgpt/pen/YzZjKYm
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/30096