Javascript自定义事件

Posted 沙滩海风

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Javascript自定义事件相关的知识,希望对你有一定的参考价值。

 

触发用户自定义事件,已成为各前端框架的基本技术。(较新版本的浏览器才支持)

 

页面 

<div id="outer">
    <div id="inner">Leonardo Da Vinci</div>
</div>
<button onclick="tiggerMyEvent();">触发事件</button>

 

脚本

 

document.querySelector("#outer").addEventListener(‘Leonardo Da Vinci‘,function(e){
    console.log(‘捕获事件‘,e.detail,e);
},false);

function tiggerMyEvent(){
    var evt = (void 0);
    try{ // Chrome浏览器、Firefox浏览器
        evt = new CustomEvent(‘Leonardo Da Vinci‘,{
            detail:{ // optional and defaulting to null, of type any, that is an event-dependent value associated with the event
                film:‘忍者神龟‘
            },
            bubbles:true, // (Optional) A Boolean indicating whether the event bubbles. The default is false.
            cancelable:true // (Optional) A Boolean indicating whether the event can be canceled. The default is false.
        });
    }catch(e){ // IE Edge浏览器
        evt = document.createEvent(‘Event‘); // Event type字符串只能是事件模块中定义的值。
        evt.initEvent(‘Leonardo Da Vinci‘,true,true); // the type of event,bubbles,cancelable
        evt.detail = {
            film:‘忍者神龟‘
        };
    }
    document.querySelector(‘#inner‘).dispatchEvent(evt);
}

 

以上是关于Javascript自定义事件的主要内容,如果未能解决你的问题,请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

如何让自定义视图观察包含片段的生命周期事件而不是活动?

vs code 自定义代码片段

更改页面javascript代码(TamperMonkey)以将键盘笔触发送到父DOM

Reactreact概述组件事件