zoukankan      html  css  js  c++  java
  • 自定义事件总结

    JavaScript自定义事件部分(转载)

    前言

      除了浏览器提供的原生事件外,有时我们还需要自定义事件以满足特定的需求,比如小模块之间的通信,传递信息等。JavaScript提供了几种自定义事件的方式:

        1. Event() 构造函数, 创建一个新的事件对象 Event

        2. CustomEvent()  创建一个自定义事件

        3. document.createEvent() 创建一个新的事件(Event),随之必须调用自身的 init 方法进行初始化。

    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 button = document.querySelector('button');
    
    var selfEvent = new Event('self',{
          "bubbles" : true,
          "cancelable" : false,
          "composed" : false
        });
    
    
        //监听
        document.addEventListener('self',function(e){
          alert('事件顺利触发啦!')
        })
    
        //触发
        button.addEventListener('click',function(){
          document.dispatchEvent(selfEvent) //触发自定义事件
        })

      需要注意的是,IE不支持该方法。

      如果自定义事件的时候,需要传递一些额外的字段,这个时候就可以用CustomEvent()

    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)
        })

      那么如果想要兼容IE的话,要怎么办呢?

    document.createEvent()

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

      document.createEvent('Event') 创建一个自定义事件之后,在触发事件之前一定需要进行初始化。而且要注意只能是document创建,不过使用的时候,所有元素都可以,和之前两种方式一样。

      初始化事件的时候指定事件名及能否冒泡,能否被阻止等。

    //只能是document创建  事件被触发前,必须通过initEvent()初始化   兼容性好IE支持 但是已废弃
      var create = document.createEvent('Event');
      create.initEvent('create', false, false);
    
      //监听
      document.addEventListener('create',function(e){
         console.log(e);
      })
    
      //触发
      button.addEventListener('click',function(){
        document.dispatchEvent(create)
        })

    jQuery的自定义事件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            var ClickMeBtn;
            $(document).ready(function(){
                ClickMeBtn = $("#btn");
                ClickMeBtn.click(function(){
                    var e = jQuery.Event("MyEvent");/*设置自定义事件的原因就是为了编写人员
                    在触发某一事件时能够更加直观地知道是什么事件被触发了。*/
                    ClickMeBtn.trigger(e);/*意思是以代码方式触发ClickMeBtn的e事件*/
                });
                ClickMeBtn.on("MyEvent",function(event){
                    console.log(event);
                });
            });
        </script>
    </head>
    <body>
    <button id="btn">按钮</button>
    </body>
    </html>
  • 相关阅读:
    剑指 Offer——13. 调整数组顺序使奇数位于偶数前面
    剑指 Offer——3. 从尾到头打印链表
    剑指 Offer——2. 替换空格
    剑指 Offer——1. 二维数组中的查找
    LeetCode 905. Sort Array By Parity 按奇偶校验排列数组
    LeetCode 448. Find All Numbers Disappeared in an Array找到所有数组中消失的元素
    SSH 代码笔记
    anaconda3安装caffe
    opencv多版本安装
    人脸文章与数据库
  • 原文地址:https://www.cnblogs.com/foreverlin/p/10115044.html
Copyright © 2011-2022 走看看