2.01 JavaScript基础事件以及Event对象（原生态）.pdf

JavaScript 基础事件与 Event 对象 本文将详细介绍 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -------- 事件是指文档或者浏览器窗口中发生的一些特定交互瞬间。事件是可以被 JavaScript 监测到的行为。每个 DOM 节点都可以触发事件，如我们点击页面上的某个按钮，那么你就触发了某个按钮的点击事件。我们每个节点都有自己的事件，可以把节点比喻人，事件就是我们人的能力，例如说话，例如走路。 EventTarget 接收事件接口 -------------------------- EventTarget 是一个由可以接收事件的对象实现的接口，并且可以为它们创建侦听器。DOM 的事件操作（监听和触发），都定义在 EventTarget 接口。所有节点对象都部署了这个接口，其他一些需要事件通信的浏览器内置对象（比如，XMLHttpRequest、AudioNode、AudioContext）也部署了这个接口。该接口主要提供三个实例方法：addEventListener、removeEventListener 和 dispatchEvent。 ### addEventListener 方法 addEventListener 方法用于在当前节点或对象上，定义一个特定事件的监听函数。一旦这个事件发生，就会执行监听函数。该方法没有返回值。 语法：`target.addEventListener(type, listener[, useCapture])` 实例： ```javascript document.getElementById("btn1").addEventListener("click", hello); function hello() { alert("hello world!"); } ``` ### removeEventListener 方法 removeEventListener 方法用来移除 addEventListener 方法添加的事件监听函数。该方法没有返回值。 语法：`target.removeEventListener(type, listener[, useCapture])` 实例： ```javascript var btn = document.getElementById("btn"); btn.addEventListener("click", good); btn.removeEventListener("click", good2); ``` ### dispatchEvent 方法 dispatchEvent 方法在当前节点上触发指定事件，从而触发监听函数的执行。该方法返回一个布尔值，只要有一个监听函数调用了 event.preventDefault()，则返回值为 false，否则为 true。 语法：`target.dispatchEvent(event)` 实例： ```javascript var event = new MouseEvent("click", { bubbles: true }); document.getElementById("btn1").dispatchEvent(event); ``` JavaScript 中常用的事件 ------------------------- ### UI 事件 UI 事件中 UI 即（User Interface，用户界面），当用户与页面的元素交互时触发。UI 事件中主要包括 load、unload、abort、error、select、resize、scroll 事件。 #### load 事件 load 事件是在页面完全加载完之后（包括所有的图像、js 文件、css 文件等外部资源），就会触发 window 上面的 load 事件。这个事件是 JavaScript 中最常用的事件，比如我们经常会使用 `window.onload = function(){}`; 这样的代码。 ### 其他事件 除了 UI 事件之外，JavaScript 中还有一些其他的事件，如 mouse 事件、keyboard 事件、touch 事件等。 #### mouse 事件 Mouse 事件是指跟踪鼠标的移动和点击事件，如 click、dblclick、mousedown、mousemove、mouseout 等。 #### keyboard 事件 Keyboard 事件是指跟踪键盘的输入事件，如 keydown、keyup、keypress 等。 #### touch 事件 Touch 事件是指跟踪触摸屏的触摸事件，如 touchstart、touchmove、touchend 等。 本文详细介绍了 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。