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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4455