JavaScript自定义事件

1:基本概念

系统内发生的动作或发生的事情,系统会在事件出现时触发某种信号,提供一个自动加载某种动作的机制。

    var myButton = document.getElementById('button');
    myButton.onclick = function(){
        alert('点击了button');
    }
    myButton = null;

2:事件三要素

  • 事件源(触发事件的元素也就是你是要对什么东西进行操作)
  • 事件(事件的触发方式也就是你要做什么实现所要的交互效果)
  • 处理函数(事件触发后要执行的代码也就是在事件进行后你要目标变成什么样子)

3:事件冒泡(DOM)

  • 触发阶段
  • 捕获阶段
  • 冒泡阶段

4:创建自定义事件

    var event = new Event('myEvent');
    /*
    var event = document.creatEvent('Event');
    event.initEvent('myEvent',true,true);
    */
    myButton.addEventListener('myEvent',function(e){
        debugger;
    },false);
    myButton.dispatchEvent(event);

5:添加自定义数据

    var event = new CustomEvent('myEvent',{ 'detail':{
        time: new Date().toLocalDateString();
    } });
    myButton.addEventListener('myEvent',function (e){
        debugger;
    },false);
    myButton.dispatchEvent(event);
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,538评论 1 11
  • 上一次,了解了JS自定义事件。今天在DOM上进行事件方法扩展。 1.基于DOM扩展自定义方法(了解即可) 我们一起...
    卓三阳阅读 817评论 0 1
  • JavaScript 自定义事件就是有别于如 click, submit 等标准事件的自行定制的事件,在叙述自定义...
    yo_yo_阅读 1,251评论 0 0
  • 所谓自定义事件,就是有别于带有浏览器特定行为的事件(鼠标事件,键盘事件,html事件等),事件名称可以自定义,可以...
    卓三阳阅读 1,068评论 0 0
  • 最近在研究webRTC的封装库,在阅读其源码的过程中,对js原生的自定义事件封装与调用机制有了新的认识,记录下来分...
    蔺相如如阅读 1,471评论 0 2