zoukankan      html  css  js  c++  java
  • dispatchEvent 自定义触发事件,常用于自定义鼠标事件或点击事件

    自定义事件的触发
    又是不可避免的,由于浏览器兼容性问题,我们要分开说了,针对标准浏览器和IE6/7等考古浏览器。

    1. 对于标准浏览器,其提供了可供元素触发的方法:element.dispatchEvent(). 不过,在使用该方法之前,我们还需要做其他两件事,及创建和初始化。因此,总结说来就是:

     1 document.createEvent()
     2 event.initEvent()
     3 element.dispatchEvent()
    
     1 举个例子:
     2 
     3 var dom = document.querySelector('#id')
     4 document.addEventListener('alert', function (event) {
     5   console.log(event)
     6 }, false);
     7  
     8 // 创建
     9 var evt = document.createEvent("HTMLEvents");
    10 // 初始化
    11 evt.initEvent("alert", false, false);
    12  
    13 // 触发, 即弹出文字
    14 dom.dispatchEvent(evt);
     1 例子2:
     2 
     3 let point = document.querySelector('#id');
     4 
     5 const e = document.createEvent('MouseEvents'); // 创建
     6 
     7 e.initEvent('click', true, true); // 初始化,阻止冒泡,阻止原生事件
     8 
     9 e.customId = point.id; // 设置Id
    10 
    11 point.dispatchEvent(e);  //触发

    createEvent()方法返回新创建的Event对象,支持一个参数,表示事件类型,具体见下表:

    参数事件接口初始化方法
    HTMLEvents HTMLEvent initEvent()
    MouseEvents MouseEvent initMouseEvent()
    UIEvents UIEvent initUIEvent()

    关于createEvent()方法我自己了解也不是很深入,不想滥竽充数,误人子弟,所以您有疑问我可能作答不了,希望对熟知该方法的人可以做进一步的解释说明(例如事件接口与document关系,UIEvent是什么东西等)。

    initEvent()方法用于初始化通过DocumentEvent接口创建的Event的值。

    支持三个参数:initEvent(eventName, canBubble, preventDefault). 分别表示事件名称,是否可以冒泡,是否阻止事件的默认操作。

    dispatchEvent()就是触发执行了,dom.dispatchEvent(eventObject), 参数eventObject表示事件对象,是createEvent()方法返回的创建的Event对象。

    2. 对于IE浏览器,由于向下很多版本的浏览器都不支持document.createEvent()方法,因此我们需要另辟蹊径(据说IE有document.createEventObject()event.fireEvent()方法,但是不支持自定义事件~~)。

    IE浏览器有不少自给自足的东西,例如下面要说的这个"propertychange"事件,顾名思意,就是属性改变即触发的事件。例如文本框value值改变,或是元素id改变,或是绑定的事件改变等等。

    我们可以利用这个IE私有的东西实现自定义事件的触发,大家可以先花几分钟想想……

    // zxx: 假设几分钟已经过去了……

    大家现在有思路了没?其实说穿了很简单,当我们添加自定义事件的时候,顺便给元素添加一个自定义属性即可。例如,我们添加自定义名为"alert"的自定义事件,顺便我们可以对元素做点小手脚:

    1 dom.evtAlert = "2012-04-01";

    再顺便把自定义事件fn塞到"propertychange"事件中:

    1 dom.attachEvent("onpropertychange", function(e) {
    2     if (e.propertyName == "evtAlert") {
    3         fn.call(this);
    4     }
    5 });

    这个,当我们需要触发自定义事件的时候,只要修改DOM上自定义的evtAlert属性的值即可:

    1 dom.evtAlert = Math.random();    // 值变成随机数

    此时就会触发dom上绑定的onpropertychange事件,又因为修改的属性名正好是"evtAlert", 于是自定义的fn就会被执行。这就是IE浏览器下事件触发实现的完整机制,应该说讲得还是蛮细的。

    自定义事件的删除
    与触发事件不同,事件删除,各个浏览器都提供了对于的时间删除方法,如removeEventListenerdetachEvent。不过呢,对于IE浏览器,还要多删除一个事件,就是为了实现触发功能额外增加的onpropertychange事件:

    1 dom.detachEvent("onpropertychange", evt);

  • 相关阅读:
    IDEA 这样设置,好看到爆炸!!!
    别再这么写代码了,这几个方法不香吗?
    HCNA Routing&Switching之静态路由
    HCNA Routing&Switching之路由基础
    HCNA Routing&Switching之vrp文件系统
    HCNA Routing&Switching之vrp远程管理
    HCNA Routing&Switching之vrp基础
    分布式kv存储系统之Etcd集群
    容器编排系统K8s之包管理器Helm基础使用(二)
    容器编排系统K8s之包管理器Helm基础使用(一)
  • 原文地址:https://www.cnblogs.com/ajaxlu/p/12073328.html
Copyright © 2011-2022 走看看