摘要:公司日常开发的项目很少有能使用到自定义事件的,已有的事件就够用了,但作为一个前端人员,学习这个还是有必要了解和学习一下,可能在以后会使用到。。在冒泡过程中,如果有一个元素定义了该事件的监听函数,该监听函数就会触发。
公司日常开发的项目很少有能使用到自定义事件的,已有的事件就够用了,但作为一个前端人员,学习这个还是有必要了解和学习一下,可能在以后会使用到。。
下面看下代码
方式一:
// 新建事件实例 var event = new Event("build"); // 添加监听函数 elem.addEventListener("build", function (e) { ... }, false); // 触发事件 elem.dispatchEvent(event);
该事件会层层向上冒泡。在冒泡过程中,如果有一个元素定义了该事件的监听函数,该监听函数就会触发。
方式二:
var myEvent = new CustomEvent("myevent", { detail: { foo: "bar" }, bubbles: true, cancelable: false }); el.addEventListener("myevent", function(event) { console.log("Hello " + event.detail.foo); }); el.dispatchEvent(myEvent);
CustomEvent构造函数的第一个参数是事件名称,第二个参数是一个对象,该对象的detail属性会绑定在事件对象之上。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/80818.html
摘要:写文章不容易,点个赞呗兄弟专注源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于版本如果你觉得排版难看,请点击下面链接或者拉到下面关注公众号也可以吧原理白话版事件是我最感兴趣的东西之 写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于...
摘要:首先来看看什么是自定义事件让函数能够具备事件的某些特性。其实自定义事件在一些主流的类库中都有实现,后续会分析具体的实现方法。今天,我们就先用简单的例子来实现自定义事件的功能。 在团队协作的很多情况下,某个js的函数会根据不断增加的需求进而不断增加功能,如果功能需求累积过多,我们就很难把控自己在这个函数中新定义的变量会不会覆盖掉之前的定义。如: function action(){ ...
摘要:写文章不容易,点个赞呗兄弟专注源码分享,文章分为白话版和源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于版本如果你觉得排版难看,请点击下面链接或者拉到下面关注公众号也可以吧原理源码版之绑定组件自定义事件组件 写文章不容易,点个赞呗兄弟专注 Vue 源码分享,文章分为白话版和 源码版,白话版助于理解工作原理,源码版助于了解内部详情,让我们一起学习吧研究基于...
摘要:触发事件可以携带数据,这些数据被用于传递给绑定了事件的其它组件的回调函数上,进而被传递给其它组件。父组件可以在回调函数里做任何事情,颇有灵活性。一般情况下,父组件会在回调函数中更新自己的状态数据。 上一篇博文梳理了vue的数据驱动和响应式相关的特性,这一篇博文就来梳理vue的一个很重要的特性,组件化。自定义组件之于vue,其意义不亚于函数之于C,java之类的编程语言。函数是计算机科学...
摘要:事件的绑定和解绑的多事件绑定之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理。由于浏览器事件冒泡特性,可以在触发时把这个事件往上冒泡到上,因为上绑定事件响应,所以能触发这个动作。 事件的绑定和解绑 on()的多事件绑定 之前学的鼠标事件,表单事件与键盘事件都有个特点,就是直接给元素绑定一个处理函数,所有这类事件都是属于快捷处理...
摘要:并没有这个事件,那就用到了自定义事件这个东西了。先看看自定义事件在中的代码自定义事件名称是否冒泡是否可以停止捕获上面整个的代码,做了一个兼容性的处理。触发自定义事件上面是满足频率后就出发自定义的事件这就是触发事件的方法。 shakejs是一个摇一摇的工具 gitHub : https://github.com/alexgibson/shake.js 使用方法 //引入 初始化...
阅读 1617·2021-11-22 14:45
阅读 1062·2021-11-17 09:33
阅读 3321·2021-09-02 09:48
阅读 969·2019-08-30 15:54
阅读 2766·2019-08-30 15:53
阅读 2552·2019-08-30 12:54
阅读 2241·2019-08-29 12:37
阅读 2420·2019-08-26 13:58