JavaScript DOM 事件 (笔记)
DOM (Document Object Model) 是 HTML 和 XML 文档的编程接口,JavaScript 可以使用 DOM 来访问和操作网页中的元素。
事件简介
事件是在用户与网页交互时发生的。例如,当用户点击按钮、滚动页面或按下键盘键时,都会触发相应的事件。
JavaScript 可以通过事件监听器来捕获和处理这些事件。事件监听器是一个函数,它会在特定事件发生时被调用。
添加事件监听器
可以使用 addEventListener()
方法来添加事件监听器。该方法需要传入两个参数:要监听的事件类型和事件发生时要执行的函数。
----- ------ - ------------------------------------ -------- ------------- - ------------------- --- ----------- - -------------------------------- -------------
上面的代码将为 ID 为 myButton
的元素添加一个 click
事件监听器。当用户点击该按钮时,handleClick
函数将被调用,并在控制台中打印一条消息。
事件对象
当事件发生时,JavaScript 会创建一个事件对象。事件对象包含有关事件的所有信息,例如事件类型、目标元素、鼠标位置等。
可以通过将事件对象作为参数传递给事件处理程序来访问事件对象:
----- ------ - ------------------------------------ -------- ------------------ - ------------------- --- ------- --- -- - ------------- - -- - - ------------- - ----- - -------------------------------- -------------
上面的代码将在用户点击按钮时,打印该事件发生时鼠标指针所在的位置。
阻止默认行为
有些事件会导致浏览器执行默认操作。例如,如果用户在表单中按下“提交”按钮,则浏览器会向服务器发送表单数据并刷新页面。
可以使用 preventDefault()
方法来防止浏览器执行默认操作:
----- ---- - ---------------------------------- -------- ------------------- - ----------------------- -- -------------- - ------------------------------- --------------
上面的代码将阻止表单提交并自定义处理表单数据。
冒泡和捕获
事件在 DOM 树上从目标元素冒泡(向上传递)到根元素或在根元素处开始捕获(向下传递)。
可以使用 addEventListener()
方法的第三个参数来指定事件是在冒泡阶段还是捕获阶段处理:
----- ------ - ------------------------------------ -------- ------------------ - ------------------- --- ----------- - -------------------------------- ------------ ---- -- ---- ----
上面的代码将在捕获阶段处理 click
事件。
总结
JavaScript DOM 事件是 web 前端开发中重要的一部分。掌握事件监听器、事件对象、阻止默认行为以及冒泡和捕获等知识,可以帮助我们更好地构建交互式网页。
示例代码:https://codepen.io/ChatGPT/pen/RwKgNGO
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/2525