js事件自定义dom事件自定义事件

Posted 2020-10-13

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js事件自定义dom事件自定义事件相关的知识，希望对你有一定的参考价值。

本文参考资料是：高级编程语言第三版（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.处于目标阶段：div
3.事件冒泡阶段：(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（捕获阶段）时，控制台输出如下：

技术分享

事件处理程序（事件侦听器）：响应某个事件的函数。像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>

待更……

以上是关于js事件自定义dom事件自定义事件的主要内容，如果未能解决你的问题，请参考以下文章

Vue.js 绑定到名称中带有点的 DOM 自定义事件（如引导事件）

js自定义事件模式

原生js之document.createEvent建立自定义事件

js的自定义事件

DOM3中的自定义事件

自定义DOM事件函数封装