08月27, 2018

前端JS基础-DOM事件

DOM事件级别

DOM0级事件(DOM0级事件的处理程序,又叫做事件监听器):

特点:

1)在DOM0级事件中,事件名均是以on开头的(click—>onclick)。

2)DOM0级事件处理程序是在元素的作用域中运行的,也就是说,在事件处理程序中,this引用就是这个元素对象。

3)以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

4)取消事件冒泡:event.stopPropagation()/event.cancleBubble = true(此方法为IE中)。

5)删除事件处理程序,将属性值设为null即可(btn.onclick=null)。

6)DOM0级事件不支持事件捕获。

优点:处理事件程序的传统方式,第四代web浏览器至今,所有浏览器都支持。

缺点:一个事件处理程序只能对应一个处理函数,同时绑定多个事件时,事件会被覆盖(这是因为btn.onclick实际上就像一个指针,在执行第一个事件处理程序时它指向了内存中的一个引用,执行第二个事件处理程序时它又会指向另一个内存的引用,最终会指向最后一个事件处理函数的内存引用。)。

DOM2级事件:

特点:

1)存在两个方法,用于处理制定和删除事件处理程序的操作(addEventListener和removeEventListener),接受三个参数:事件名称、事件处理程序的函数和布尔值,布尔值为false表示在事件冒泡阶段调用事件处理程序。

2)DOM2级事件处理程序也会依附在元素的作用域中运行。

3)优点:可同时绑定几个事件,且不会被覆盖;缺点:不兼容

1)IE不支持DOM2级事件,但是有两个类似的方法attachEvent()/detachEvent()。

2)attachEvent()/detachEvent()只接受两个参数,没有最后一个布尔值,该事件只能发生在冒泡阶段。

DOM3级事件在DOM2级事件的基础上添加了更多的事件类型,如 load、scroll、blur、focus 等

alt

事件对象

因为各个浏览器的事件对象不一样, 把主要的事件对象的属性和方法列出来;

bubble : 表明事件是否冒泡

cancelable : 表明是否可以取消冒泡

currentTarget : 当前事件程序正在处理的元素, 和this一样的;

defaultPrevented: false ,如果调用了preventDefualt这个就为真了;

detail: 与事件有关的信息(滚动事件等等)

eventPhase: 如果值为1表示处于捕获阶段, 值为2表示处于目标阶段,值为三表示在冒泡阶段

target || srcElement: 事件的目标

trusted: 为ture是浏览器生成的,为false是开发人员创建的(DOM3)

type : 事件的类型

view : 与元素关联的window, 我们可能跨iframe;

preventDefault() 取消默认事件;

stopPropagation() 取消冒泡或者捕获;

stopImmediatePropagation() (DOM3)阻止任何事件的运行;

//stopImmediatePropagation阻止 绑定在事件触发元素的 其他同类事件的callback的运行

IE下的事件对象是在window下的,而标准应该作为一个参数, 传为函数第一个参数;

IE的事件对象定义的属性跟标准的不同,如:

cancelBubble 默认为false, 如果为true就是取消事件冒泡;

returnValue 默认是true,如果为false就取消默认事件;

srcElement, 这个指的是target, Firefox下的也是srcElement;

自定义事件

//创建事件, Event是无法传递参数的
var event = new Event('build');

//创建事件, CustomEvent是可以传递参数的
var event = new CustomEvent('build', { detail: elem.dataset.time });

// 监听事件Listen for the event.
elem.addEventListener('build', function (e) { //... }, false);

// 分发/触发事件Dispatch the event.
elem.dispatchEvent(event);

本文链接:http://www.laijianlou.top/post/domEvent.html

-- EOF --

Comments