本文参考资料是：高级编程语言第三版（13章事件和22章自定义事件）。
本文涉及到：
- 事件的组成元素、
- 事件优化、
- 模拟事件、
- 自定义事件的内容
js事件是什么？高级程序13章第一句话说：js与html之间的交互是通过事件实现的。事件是浏览器或者用户自身执行的某种动作，例如我们最常用到的点击事件。
1：js事件
- 事件流
- 事件处理程序
- 事件对象
- 事件类型
- 事件流：从页面上接收事件的顺序
- 事件冒泡：概念事件从最具体的元素接收事件，然后逐级向上传播到较为不具体的元素。这个概念是由ie提出。
<!DOCTYPE html> <html> <head> <title>测试事件流的页面</title> <meta charset="utf-8" /> <script type="text/javascript"> </script> </head> <body> <div> 测试 </div> </body> </html>页面1-1
以页面1-1为例，如果点击了div，那么click事件会按照div < body < html <document的顺序传播。现在浏览器都已经支持事件冒泡，在IE5.5及更早版本中的事件冒泡会跳过html，直接由body到document。
- 事件捕获：事件由最不具体的元素接收，而最具体的元素最后接收。由Netscape Communicator团队提出
以页面1-1为例，如果点击了div，那么click事件将按照document < html < body < div的顺序传播。由于老版本浏览器不支持，因此很少有人使用事件捕获。
- DOM事件流：“DOM2级事件”规定的事件流分为三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段
以页面1-1为例，点击div会发生如下三个阶段：1.事件捕获阶段：document < html < body < (div)2.处于目标阶段：div3.事件冒泡阶段：(div) < body < html <document当事件到达“处于目标阶段”时，事件在<div>上发生，并在事件处理中被看成冒泡阶段的一部分。“DOM2级事件”明确规定：要求捕获阶段不会涉及事件目标，但是IE9+，Safari，Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。所以，有两个机会在目标对象上面操作对象。
- 实例：测试上面所说的事件冒泡和事件捕获。直接使用的vue-clic创建的项目，所以测试代码是vue所写：
<template> <div id="app"> test </div> </template> <script> import {addEvent} from "./scripts/test"; export default { name: ‘app‘, data () { return { } }, mounted() { this.test(); }, methods: { callback(event) { event = event || window.event; console.log(event.currentTarget.tagName + " is " + event.type + "ing") }, test() { var div = document.getElementById("app"), body = document.body || document.documentElement, type = "click", tag = false; addEvent(div, type, this.callback, tag); addEvent(body, type, this.callback, tag); } } } </script>/** * * @param {*} dom 元素 * @param {*} type 类型 * @param {*} fun 回调函数 * @param {*} tag 捕获/冒泡 */ export function addEvent(dom, type, fun, tag) { dom.addEventListener(type, fun, tag); }当tag是false（冒泡阶段）时，控制台输出如下：
当tag是true（捕获阶段）时，控制台输出如下：
- 事件冒泡：概念事件从最具体的元素接收事件，然后逐级向上传播到较为不具体的元素。这个概念是由ie提出。
- 事件处理程序（事件侦听器）：响应某个事件的函数。像click、load等是事件的名称，而事件处理程序的名称则是："on" + 事件名称，比如onclick、onload等等
添加事件处理器有如下几种方式：- HTML事件处理程序，用于事件处理程序同名的HTML特性设定。事件处理程序可以直接是要执行的动作，也可以是别处定义的脚本函数。
<div onclick="alert(1)"> 测试 </div> - DOM0级事件处理程序（后添加的会覆盖新添加的事件）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.onclick = function () { alert(1); } </script> - DOM2级事件处理程序（可以为同一元素绑定多个事件，事件执行顺序：先添加的先执行）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.addEventListener("click", function () { alert(1); }, false); </script> - IE事件处理程序（注意：通过attachEvent指定的事件处理程序的作用域指向的是全局作用域，this指向window，而其他的都是指向的绑定事件的对象，仅局限在所属元素的作用域。）（可以为同一元素绑定多个事件，事件执行顺序：先添加的后执行）
<div id="test"> 测试 </div> <script type="text/javascript"> var test = document.getElementById("test"); test.attachEvent("click", function () { alert(this === window); }); </script>待更……
- HTML事件处理程序，用于事件处理程序同名的HTML特性设定。事件处理程序可以直接是要执行的动作，也可以是别处定义的脚本函数。
时间： 2024-11-05 21:49:31