DOM事件相关问题

本文内容整理于慕课网视频教程

DOM事件相关问题

 1.基本概念：DOM事件的级别

 2.DOM事件模型：冒泡和捕获

 3.DOM事件流

 4.描述DOM事件捕获的具体流程

 5.Event对象的常见应用

 6.自定义事件

具体说明：

1.DOM事件级别

1. DOM0 element.onclick=function(){}
2. DOM2 element.addEventListener('click'.function(){},false)
3. DOM3 element.addEventListener('keyup',function(){},false)

2.DOM事件模型：冒泡和捕获

• 冒泡 从下往上
• 捕获 从上往下

3.DOM事件流

4.描述DOM事件捕获的具体流程

事件流是从页面接收事件的顺序，DOM2级事件规定事件流包括三个阶段：

① 事件捕获阶段：在事件达到目标之前捕获它，事件捕获阶段事件流模型：window→document→html→body→div；

② 目标阶段：事件通过捕获到达目标元素；

③ 事件冒泡阶段：由目标元素接收到事件，然后向上传到window对象。事件流模型：div→body→html→document→window。
在JS中怎么获取html标签？通过document.documentElement

5.Event对象的常见应用

1. event.preventDefault() 阻止默认行为（比如，点击<a>标签后的页面跳转行为）
2. event.stopPropagation() 阻止冒泡
3. event.stopImmediatePropagation() 同时绑定有两个事件时，该方法可以在触发事件时阻止另一个发生。
4. event.currentTarget() 用来获取当前绑定事件的那个元素
5. event.target() 表示当前被点击的元素。在使用事件代理时，想知道触发事件的子元素是哪个，可以用该方法来获取。

6.自定义事件

JS提供的自定义事件的几种方式：

1. Event()构造函数，创建一个新的事件对象Event. IE不支持该方法
2. CustomEvent()创建一个自定义事件 如果自定义事件的时候，需要传递一些额外的字段，这个时候就可以用CustomEvent()。
3. document.createEvent()创建一个新的事件，随之必须调用自身的 init() 方法进行初始化。

1.Event()

语法 ： event = new Event(typeArg, eventInit)

typeArg是一个表示事件类型的字符串。

eventInit是事件的配置项：

“bubbles”，可选，Boolean类型，默认值为 false，表示该事件是否冒泡。

“cancelable”，可选，Boolean类型，默认值为 false， 表示该事件能否被取消。

“composed”，可选，Boolean类型，默认值为 false，指示事件是否会在阴影根之外。

自定义事件的监听和原生事件一样；触发的时候通过 targetDom.dispatchEvent(event)触发。

//用来触发自定义事件
 <button type="button" name="button" class="test">点我</button>

var eve=new Event('custome',{
    "bubbles" : true,
    "cancelable" : false,
    "composed" : false
});

//监听
document.addEventListener('custome',function(e) {
  console.log('custome');
});

//触发
button.addEventListener('click', function() {
  document.dispatchEvent(eve) //触发自定义事件
})

2.CustomEvent()

该方法和Event()方法类似，不过在创建的时候，CustomEventInit中多了一个detail字段，可以用来传递额外的对象，而且少了composed字段。
触发和监听都和Event()类似，而且同样不支持IE。

//IE不支持  可携带数据
var custom = new CustomEvent('custom',{
    "detail" : {  //可携带额外的数据
        age : 18
    },
    "bubbles" : true,
    "cancelable" : false,
});

//监听
document.addEventListener('custom',function(e){
    console.log(e);
})

//触发
button.addEventListener('click',function(){
    document.dispatchEvent(custom)
})

3.document.createEvent()

这种方式已经被官方声明不推荐使用了。但是浏览器都是支持的，IE也都支持