JS中如何使用自定义事件与触发操作-创新互联
小编给大家分享一下JS中如何使用自定义事件与触发操作,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
创新互联建站网络公司拥有10多年的成都网站开发建设经验,上1000+客户的共同信赖。提供做网站、网站制作、网站开发、网站定制、卖链接、建网站、网站搭建、自适应网站建设、网页设计师打造企业风格,提供周到的售前咨询和贴心的售后服务具体如下:
1. 事件的创建
JS中,最简单的创建事件方法,是使用Event构造器:
var myEvent = new Event('event_name');
但是为了能够传递数据,就需要使用 CustomEvent 构造器:
var myEvent = new CustomEvent('event_name', { detail:{ // 将需要传递的数据写在detail中,以便在EventListener中获取 // 数据将会在event.detail中得到 }, });
2. 事件的监听
JS的EventListener是根据事件的名称来进行监听的,比如我们在上文中已经创建了一个名称为‘event_name' 的事件,那么当某个元素需要监听它的时候,就需要创建相应的监听器:
//假设listener注册在window对象上 window.addEventListener('event_name', function(event){ // 如果是CustomEvent,传入的数据在event.detail中 console.log('得到数据为:', event.detail); // ...后续相关操作 });
至此,window对象上就有了对‘event_name' 这个事件的监听器,当window上触发这个事件的时候,相关的callback就会执行。
3. 事件的触发
对于一些内置(built-in)的事件,通常都是有一些操作去做触发,比如鼠标单击对应MouseEvent的click事件,利用鼠标(ctrl+滚轮上下)去放大缩小页面对应WheelEvent的resize事件。
然而,自定义的事件由于不是JS内置的事件,所以我们需要在JS代码中去显式地触发它。方法是使用 dispatchEvent 去触发(IE8低版本兼容,使用fireEvent):
// 首先需要提前定义好事件,并且注册相关的EventListener var myEvent = new CustomEvent('event_name', { detail: { title: 'This is title!'}, }); window.addEventListener('event_name', function(event){ console.log('得到标题为:', event.detail.title); }); // 随后在对应的元素上触发该事件 if(window.dispatchEvent) { window.dispatchEvent(myEvent); } else { window.fireEvent(myEvent); } // 根据listener中的callback函数定义,应当会在console中输出 "得到标题为: This is title!"
需要特别注意的是,当一个事件触发的时候,如果相应的element及其上级元素没有对应的EventListener,就不会有任何回调操作。
对于子元素的监听,可以对父元素添加事件托管,让事件在事件冒泡阶段被监听器捕获并执行。这时候,使用event.target就可以获取到具体触发事件的元素。
以上是“JS中如何使用自定义事件与触发操作”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联成都网站设计公司行业资讯频道!
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
本文标题:JS中如何使用自定义事件与触发操作-创新互联
当前URL:http://ybzwz.com/article/iocsh.html