专栏首页前端侠2.0JS里,事件的几个细节问题--(冒泡、自定义事件)

JS里,事件的几个细节问题--(冒泡、自定义事件)

今天想实现一个事件自动订阅到指定class的元素之上的功能。这句话很拗口,稍后解释!

在翻阅了MDN上api说明,多明白了许多细节。

1、event除了具有目标元素,事件类型,时间,位置等有效值 外,还有 bubbles  cancelable

等 与冒泡相关的属性。在查找事件的来源元素时,chrome有 srcElement  属性,  火狐却没有 srcElement  属性,必须用target。 srcElement返回的是一个Element对象,但是target返回一个Node。 不过编程时,好像是互用的。

2、event具有preventDefault   stopImmediatePropagation  stopPropagation 这三个方法。

区别就是:preventDefault:当事件有cancelable=true时,  事件就取消了

stopPropagation :事件停止向DOM的上级传播。

stopImmediatePropagation:   在当前事件执行的函数中,立即停止传播。(即使当前元素还绑定着其它的函数,函数本应该稍后执行的情况, 后面的函数都会不执行,好霸气的方法) 

3、用CustomEvent来实现自定义事件。

假设让el来接收一个blockClicked事件,写法如下:

//首先
el.addEventListener("blockClicked", handler, false);

//在之后的时间,你进行其它操作时,主动生成一个事件,并推送给el。
var bubble = doc.dispatchEvent(
       new CustomEvent("blockClicked", {detail: {data:'一些事件有用的信息'}})
);

注意:经过我的测试,dispatchEvent 时,并不是将事件推入消息队列,而是同步执行

执行顺序:

  1.    执行 var result=  dispatchEvent(new CustomEvent())
  2.    进入事件处理函数中去,再返回执行结果到result。
  3.    再执行dispatchEvent的一下语句。

这样就有机会根据上次事件结果,来决定是否终止事件链!

4、dispatchEvent的返回值是boolean

 如果事件cancelable=true,且至少有一个事件处理函数调用了Event.preventDefault()的话,返回false。事件终止传播

其它时候都返回true,事件继续传播下去。

ev = new CustomEvent(eventName, {
      detail: target,  cancelable: true
      });
result = el.dispatchEvent(ev)   //在处理函数里,来决定result的值

5、IE11不支持new CustomEvent()方法。  window对象上存在CustomEvent,但就是不让用。必须用:

var event = document.createEvent('CustomEvent');
  event.initCustomEvent('my-event', true, true, {some: '一些有用的信息'});

代替。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 什么才是优秀的网站用户界面设计

    進无尽
  • 慎用Assembly.LoadFile()和Assembly.LoadFrom()

    经测这俩方法会锁住文件,导致程序运行期间无法对load过的程序集文件进行更名/删除/覆盖等等操作,考虑用Assembly.Load()文件字节组替代:

    AhDung
  • 2018-03-14 致敬霍金

      在黑洞领域,没有人知道这个怪兽是个什么东西,自从霍金给出“霍金辐射”与“奇点定理”过后,人们终于逐渐揭开了这宇宙中最为神秘的天体。在这里再次缅怀一下虽然坐着...

    stormKid
  • 服务网格 Pattern: Service Mesh

    自从几十年前首次引入以来,我们了解到分布式系统能够实现我们之前甚至无法思考的用例,但它们也会引入各种新问题。

    一个会写诗的程序员
  • 20种新颖的按钮风格和效果【附源码】

    Codrops 给我们分享了一组新鲜的按钮样式和效果的集合。它们中的大部分效果都使用了 CSS3 过渡和伪元素,他们都有一个共同点,那就是都具有简单性,没有太多...

    用户3055976
  • 思科CEO钱伯斯:我非常尊敬华为

    --------------------------------------------------------------------------------...

    数据和云01
  • 益思维-早期苹果员工胸牌背面写的11条“成功法则”

    早期苹果员工胸牌背面写的11条“成功法则”这个胸牌的背面写着11条成功法则,其中每一条文字都充满了正能量。从中我们可以看到一些触动人心的感觉。

    進无尽
  • 怎样科学地和人相处?

    按照约定俗成的说法,一般跟人打交道有两个规则,一个是“黄金法则”,一个是“白银法则”。黄金法则并不适合现代社会对陌生人使用。因为你觉得好的东西别人不一定觉得好。...

    黄成甲
  • 【Leetcode】59. 螺旋矩阵 II

    给定一个正整数 n,生成一个包含 1 到 n2 所有元素,且元素按顺时针顺序螺旋排列的正方形矩阵。

    Leetcode名企之路
  • 第十三届搞笑诺贝尔奖(IgNobel)新鲜出炉

    第十三届搞笑诺贝尔奖(IgNobel)新鲜出炉 中广网 10月04日 09:48

    数据和云01

扫码关注云+社区

领取腾讯云代金券