像这种类型意气风发旦在钦赐的元素上接触了该事件

在前端开拓中,大家平时要求对少数事件展开监听。那样意气风发旦在钦赐的成分上接触了该事件,就能够试行叁个回调来开展有关的操作。

而js中事件监听方法总共有二种,分别如下所示:

  • element.addEventListener(type, listener[, useCapture]); //
    IE6~8不支持
  • element.attachEvent(’on’ + type, listener); // IE6~10,IE11不支持
  • element[’on’ + type] = function(State of Qatar{} // 全部浏览器

demo:

function cb() { console.log(1); }
element.addEventListener('click', cb, false);
element.attachEvent('onclick', cb);
element.onclick = cb;

参数含义:

type:事件类型

listener:事件触发后的回调函数

useCapture:是或不是选择捕获,要是值为true, useCapture
代表顾客期望提倡捕获。 在提倡捕获之后,
只要Dom子树下发生了该事件类型,都会先被该事件监听器捕获,然后再被派发到Dom子树中的事件监听器中。並且升高冒泡的平地风波不会接触这几个发起捕获的事件监听器。进一层的分解能够查阅
DOM Level 3 Events 文书档案。 useCapture 暗中认可值为false 。

addEventListener是W3C工作组在DOM Level
2早先引进的贰个登记事件监听器的办法;而以前,守旧的平地风波监听方法是经过element[’on’ + type]的章程来注册的。它们两时期的第豆蔻梢头差别是,element[’on’ + type]的不二等秘书技不可能使用事件捕获,并且element[’on’ + type]不援救对同叁个要素的同叁个事件注册多个事件监听器。如上面包车型客车例证所示,成分被点击后只会输出1,而不会输出0和1.

element.onclick = function(){ console.log(0); }
element.onclick = function(){ console.log(1); }

然而addEventListener方法在IE6~8的浏览器中不被扶助。那么在低版本的IE中怎么来为同三个平地风波注册八个事件监听器呢?原本IE从IE5.0连串初叶就引进了attachEvent()艺术来支撑这一表征。但缺憾的是该办法也不帮助事件捕获。而且从IE
11从头,这几个方式已经被弃用。

批评事件的破获和冒泡

图片 1

W3C标准中定义了3个事件阶段,依次是捕获阶段、目的阶段、冒泡阶段。事件目标根据上海教室的风行一时路径依次实现这几个等第。要是某些阶段不帮衬或事件目的的传遍被甘休,那么该阶段就能被跳过。比如,假设Event.bubbles属性被设置为false,那么冒泡阶段就能够被跳过。若是Event.stopPropagation()在事变派发前被调用,那么具备的级差都会被跳过。

  • 捕获 阶段:在事变目的达到事件目的早前,事件目的必需从window经过目的的祖辈节点传播到事件目的。
    那几个阶段被大家称为捕获阶段。在这里个品级注册的风波监听器在事变达到其目的前必须先处总管件。
  • 目标 阶段:事件目的到达其事件目标。
    这几个品级被大家称为目的阶段。少年老成旦事件指标达到事件指标,该阶段的风云监听器将在对它进行拍卖。假使二个平地风波目的类型被标记为无法冒泡。那么相应的事件目标在到达此阶段时就可以终止传播。
  • 冒泡 阶段:
    事件对象以三个与捕获阶段相反的方向从事件目的传播经过其祖先节点传播到window。这几个阶段被称作冒泡阶段。在这里阶段注册的风云监听器会对相应的冒泡事件展开管理。

在二个风云形成了颇有阶段的流传门路后,它的Event.currentTarget会被设置为null并且Event.eventPhase会被设为0。Event的有着别的品质都不会改造(满含针对事件指标的Event.target属性)

<script src="http://htmljs.b0.upaiyun.com//js/tuiku.js"></script>

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website