javascript事件之：谈谈自定义事件

　　对于JavaScript自定义事件，印象最深刻的是用jQuery在做图片懒加载的时候。给需要懒加载的图片定义一个appear事件。当页面图片开始出现时候，触发这个自定义的appear事件（注意，这里只触发一次）。

　　由此，现在我们通过JavaScript谈一谈自定义事件。

　　所谓事件，说的明白点，就是在一个合适的时候触发调用某个函数。平常说的事件是那些比较常用的，绑定在元素身上的某个方法，当用户触发某个行为时，（click, focus, mouseover, mouseout, load ......）这个函数触发。自定义事件也是如此，只是触发的方式可以由你自己决定,比如我们上面提到的appear事件，当这个元素可见时，触发某个自定义的方法。

　　我们用JavaScript模拟一下。

//定义两个方法，为元素添加事件，触发事件 1 function add(el, type, fn){
 2     el.listeners = el.listeners || {}
 3     el.listeners[type] = el.listeners[type] || []
 4     el.listeners[type].push(fn)
 5
 6     el.addEventListener(type, fn, false);
 7 }
 8
 9 function trigger(el, type){
10     if(el.listeners){
11         var triggerArr = el.listeners[type] || [];
12         if(triggerArr.length){
13             for(var i = 0; i<triggerArr.length; i++){
14                 triggerArr[i]();
15             }
16         }
17     }
18 }

绑定事件，并触发

 1 function doFn(){
 2     alert("appear触发弹出！")
 3 }
 4 function doFn2(){
 5     alert("appear触发弹出2！")
 6 }
 7
 8 add($doTrigger, "doTrigger", doFn)
 9 add($doTrigger, "doTrigger", doFn2)
10 trigger($doTrigger, "doTrigger")

页面加载，弹出，"appear触发弹出！"，"appear触发弹出2！"。

实现原理非常简单。为元素添加一个属性listeners，默认为{}, 添加时候，往对象里加一个默认值为[]的type属性。触发的时候直接得到el.listeners[type]。触发里面每一个方法即可。

删除更简单

1 function remove(el, type, fn){
2     if(el.listeners && el.listeners[type]){
3         delete el.listeners[type]
4     }
5     el.removeEventListener(type, fn, false)
6 }

对于默认事件呢，我们也测试一下

add($clickTrigger, "click", clickFn)
add($clickTrigger, "click", clickFn1)trigger($clickTrigger, "click")function clickFn(){alert("click触发弹出！")
}
function clickFn1(){alert("click触发弹出！")
}

页面一加载弹出。点击“click事件”也弹出。

remove($clickTrigger, "click", clickFn)
remove($clickTrigger, "click", clickFn1)

remove之后，页面加载不弹出，点击也不弹出。

注意，以上的代码都是基于w3c标注。以后有时间我们谈谈事件的兼容性。

转载于:https://www.cnblogs.com/pfzeng/p/4162951.html

javascript事件之：谈谈自定义事件相关推荐

【JavaScript】- createEvent() 创建自定义事件
document.createEvent 用于创建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents 事件类型.DOM Level 3增加很多事 ...
switchpreference 事件_Vue 3 自定义事件
自定义事件除了系统自带的原生 DOM 自带的事件之外,有时候我们需要用到这些自带的事件之外,我们就必须要自定义事件了. 事件名不同于组件和 prop,事件名不存在任何自动化的大小写转换.而是触发的 ...
通过c# 实现自定义属性改变触发自定义事件，理解自定义事件及其触发过程
以下说明可解释自定义的事件的自定义触发过程: 直接上代码,内含说明(界面是两个文本框textbox1,textbox2,和一个button1,界面的Load事件,button的click事件) For ...
Vue2（九）：浏览器本地存储、组件自定义事件、TodoList自定义事件
Vue2学习笔记:第九章一.浏览器本地存储(WebStorage) 1.相关API 2.一些注意点 3.TodoList中的本地存储二.组件自定义事件 1.引出组件自定义事件 2.怎么给组件绑定? ...
js事件Event对象(自定义事件对象 CustomEvent)
文章目录一.参考二.Event 接口介绍 2.1 事件分类三. 创建过时Event不推荐 3.1 document.createEvent 3.1.1 语法`var event = docume ...
[实践篇]13.16 vmm_service监听qvm事件原理及其自定义事件详解
[QNX Hypervisor 2.2用户手册]目录(完结) 前面通过[实践篇]13.11扒一扒qvm与vmm之间的那点事儿,我们了解到vmm_service通过监听vmm设备节点,来接收qvm的状态 ...
Node.js: 如何继承 events 自定义事件及触发函数
events 是node.js的核心api ,几乎大部分node.js 的api都继承 events 类(javascript中没有类,也不存在继承,确切说是模拟类和继承,点击查看) 比如我们常见的 ...
prop与自定义事件
prop与自定义事件 1. prop 1-1 什么是prop prop 是你可以在组件上注册的一些自定义属性.当一个值传递给一个 prop 属性的时候,它就变成了那个组件实例的一个属性组件中 pro ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
DOM/伪DOM自定义事件
一.说明.引言我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...

javascript事件之：谈谈自定义事件

javascript事件之：谈谈自定义事件相关推荐

最新文章

热门文章