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>

事件对象（触发DOM的某个事件时，会产生一个事件对象，即我们常用到的event，event对象中包含着所有与事件相关的信息），下面列举一下event属性和方法，并详细说明一下几个经常用到的属性和方法【标红】

bubbles -> Boolean->只读-----> 表明事件是否冒泡
cancelable-> Boolean->只读-----> 表明是否可以取消事件的默认行为
currentTarget-> Element->只读-----> 表明是否可以取消事件的默认行为　
defaultPrevented-> Boolean->只读-----> 为true表示已经调用了preventDefault()（DOM3级事件新增）
detail->Integer->只读-----> 与事件相关的详细信息
eventPhase->Integer->只读----->调用事件处理程序的阶段：1表示捕获阶段；2表示“处于目标”；3表示冒泡阶段
preventDefault()->Function->只读----->取消事件的默认行为。如果cancelable为true，则可以使用这个方法
stopImmediatePropagation()->Function->只读----->取消事件的进一步捕获或冒泡，同时阻止任何事件处理程序被调用（DOM3级事件新增）
stopPropagation()->Function->只读----->取消事件的进一步捕获或者冒泡。如果bubbles为true，则可以使用这个方法
target->Element->只读----->事件的目标
trusted->Boolean->只读----->为true表示事件是浏览器生成的，为false表示有开发人员通过js创建（DOM3级事件新增）
type->String->只读----->被触发的事件类型

view->AbstractVIew->只读----->与事件关联的抽象视图。等同于发生事件的window对象

只有在事件处理程序执行期间，event对象才存在；一旦处理程序执行完毕，event对象也会被销毁。
ie中的事件对象的访问与dom中的event的访问不同。里面的属性与方法也与dom中的有所不同。具体如下

cancelBubble->Boolean->读/写->默认为false，将其设置为true可取消事件冒泡（与dom中的stopPropagation()方法作用相同）
returnValue->Boolean->读/写->默认为true，将其设置为false就可取消事件的默认行为（与dom中的preventDefault()方法作用相同）
srcElement->Boolean->只读->事件的目标（与dom中的target相同）

事件类型
1. ui事件
2. 焦点事件
3. 鼠标事件
4. 滚轮事件
5. 文本事件
6. 键盘事件
7. 合成事件
8. 变动事件
9. 变动名称事件
  
  待定

posted on 2017-11-04 14:41 墨白__六毛阅读(1249) 评论(0) 编辑收藏举报