js复习事件的优先级和事件对象

一、dom0 dom2 dom3事件区分

上篇当中有提到html内联事件、属性事件和事件监听回调事件，那他们和dom0 dom2 dom3事件有什么关系呢，这里简述下：

DOM Level”是描述DOM对象，方法和行为的规范集合。更高级别的DOM规范建立在之前的级别上。变化发生在两个方面：

  • dom0事件模型: html事件、属性事件

  • dom1事件模型: 1级DOM标准中并没有定义事件相关的内容，所以没有所谓的1级DOM事件模型。

  • dom2事件模型: 监听器回调事件

  • dom3事件模型: 与绑定事件无关

二、什么是事件优先级

解释：事件执行的顺序

(1) 几个看实例之前需要知道的概念：
  • html事件会被属性事件覆盖
(2) dom 0 只存在事件冒泡
(3) dom2 支持事件冒泡和事件捕获
  • 事件目标阶段，按绑定顺序事件
  • 冒泡阶段事件执行顺序，属性事件会比监听执行早（哪个时间先绑定哪个先执行）

分析实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<body id="body" onclick="htmlEvent1()">
    <div id="container" onclick="htmlEvent2()">
        <button id="test" onclick="htmlEvent3">test</button>
    </div>

</body>
<script>

    var body = document.getElementById('body');
    var container = document.getElementById('container');
    var test = document.getElementById('test');

    body.onclick = propsEvent1;
    container.onclick = propsEvent2;
    test.onclick = propsEvent3;

    body.addEventListener('click',listenerEventC1,true);
    container.addEventListener('click',listenerEventC2,true);
    test.addEventListener('click',listenerEventC3,true);

    body.addEventListener('click',listenerEventB1,false);
    container.addEventListener('click',listenerEventB2,false);
    test.addEventListener('click',listenerEventB3,false);

    function htmlEvent1() {
        console.log('htmlEvent1');
    }

    function htmlEvent2() {
      console.log('htmlEvent2');
    }

    function htmlEvent3() {
      console.log('htmlEvent3');
    }

    function propsEvent1() {
      console.log('propsEvent1');
    }

    function propsEvent2() {
      console.log('propsEvent2');
    }

    function propsEvent3() {
      console.log('propsEvent3');
    }

    function listenerEventB1() {
      console.log('listenerEventB1');
    }

    function listenerEventB2() {
      console.log('listenerEventB2');
    }

    function listenerEventB3() {
      console.log('listenerEventB3  ');
    }

    function listenerEventC1() {
      console.log('listenerEventC1');
    }

    function listenerEventC2() {
      console.log('listenerEventC2');
    }

    function listenerEventC3() {
      console.log('listenerEventC3');
    }
    
// 捕获阶段执行开始   
// listenerEventC1
// listenerEventC2
// 捕获事件执行完毕
// 事件目标，按绑定顺序执行开始
// propsEvent3
// listenerEventC3
// listenerEventB3  
// 事件目标，按书写顺序执行结束
// 冒泡阶段开始，容器，根据书写顺序 （实际会是属性事件先执行，再监听起器）
// propsEvent2
//	listenerEventB2
// 冒泡阶段结束，容器，根据书写顺序
// 冒泡阶段开始，body，根据书写顺序 （实际会是属性事件先执行，再监听起器）
//	propsEvent1
//	listenerEventB1
// 冒泡阶段结束，body，根据书写顺序
</script>
  • 原则一： 牢记事件绑定是浏览器绑定
  • 原则二：事件向传播目标对象（捕获阶段），先出发事件监听
  • 事件在目标阶段，按事件解析或事件被定义的事件执行 （简单理解可理解为js书写顺序）
  • 事件上按事件解析或事件被定义的事件执行，如果包含html事件上执行，即使属性被覆盖了还是会先执行html事件（即被覆盖的属性事件）

(4)事件传递和cs会影响事件传播有关（比如把外层div层级改动）

不会，事件绑定与css显示不相关

特例：
假设绝对定位，住了遮挡元素 不会触发，（以弹窗插件为例）: 事件绑定只html结构有关

特例中的特例：

但是有一个例子可能会有事件穿透

移动端中的事件穿透：

touchstart touchend touchmove

  • touch没有 300ms延迟

  • onclick 300ms延迟

处理方式：

(1) 延迟消失弹窗

(2) 叠加层 300毫秒消失

二、事件对象相关：

####（1）定义与兼容写法

event：包含事件相关的所有信息

ie浏览器：绑定在window上

兼容性写法

1
var e = e || window.event

为了更好的兼容IE浏览器和非ie浏览器。
在ie浏览器中,window.event是全局变量,在非ie中，就需要自己传入一个参数来获取event啦，所以就有了var e = e||window.event

####（2）事件对象常用属性

参考： https://developer.mozilla.org/zh-CN/docs/Web/API/Event

  • bubbles（只读）: 当前事件是否是冒泡事件 true：是，false：不是

  • cancelable: 代表当前事件是否可以取消默认行为：true： 可取消 （true可以passive优化） false：不可取消

  • currentTarget（只读）： 当前事件正在处理哪个元素

  • defaultPrevented（只读） ： 一个布尔值，表示了是否已经执行过了event.preventDefault()

  • detail： 事件相关的详细信息（数字表示，和事件api对比）

  • eventPhase(只读): 1捕获 2目标 3冒泡

  • target（只读）: 当前的目标元素是什么

  • Event.isTrusted（只读）： 指明事件是否是由浏览器（当用户点击实例后）或者由脚本（使用事件的创建方法，例如event.initEvent）启动。 （大部分都是浏览器事件，当然可以开发人员可以自定义生成）

  • Event.type(只读) : 类事件的类型（不区分大小写）。

  • Event.view ：关联视图，一般是当前window

（3）事件对象常用方法

  • event.preventDefault

取消事件（如果该事件可取消）: canable 为 true ，同时可以用passive优化，取消事件（如果该事件可取消）。

return fasle

  • event.stopPropagation

阻止事件进一步传播 （bubbles为true 可以调用, false不可），只阻止会往下层传播

  • event.stopImmediatePropagation

阻止事件进一步传播 （bubbles为true 可以调用, false不可），阻止传播之后函数不执行

阻止事件传播不会阻止事件默认行为，阻止事件默认行为，不会阻止事件传播

Share