javascript事件之:谈谈自定义事件(转)
http://www.cnblogs.com/pfzeng/p/4162951.html
对于JavaScript自定义事件,印象最深刻的是用jQuery在做图片懒加载的时候。给需要懒加载的图片定义一个appear事件。当页面图片开始出现时候,触发这个自定义的appear事件(注意,这里只触发一次)。
由此,现在我们通过JavaScript谈一谈自定义事件。
所谓事件,说的明白点,就是在一个合适的时候触发调用某个函数。平常说的事件是那些比较常用的,绑定在元素身上的某个方法,当用户触发某个行为时,(click, focus, mouseover, mouseout, load ......)这个函数触发。自定义事件也是如此,只是触发的方式可以由你自己决定,比如我们上面提到的appear事件,当这个元素可见时,触发某个自定义的方法。
我们用JavaScript模拟一下。
//定义两个方法,为元素添加事件,触发事件 1 function add(el, type, fn){ el.listeners = el.listeners || {} el.listeners[type] = el.listeners[type] || [] el.listeners[type].push(fn) el.addEventListener(type, fn, false); } function trigger(el, type){ if(el.listeners){ var triggerArr = el.listeners[type] || []; if(triggerArr.length){ for(var i = 0; i<triggerArr.length; i++){ triggerArr[i](); } } } }
绑定事件,并触发
function doFn(){ alert("appear触发弹出!") } function doFn2(){ alert("appear触发弹出2!") } add($doTrigger, "doTrigger", doFn) add($doTrigger, "doTrigger", doFn2) trigger($doTrigger, "doTrigger")
页面加载,弹出,"appear触发弹出!","appear触发弹出2!"。
实现原理非常简单。为元素添加一个属性listeners,默认为{}, 添加时候,往对象里加一个默认值为[]的type属性。触发的时候直接得到el.listeners[type]。触发里面每一个方法即可。
删除更简单
function remove(el, type, fn){ if(el.listeners && el.listeners[type]){ delete el.listeners[type] } el.removeEventListener(type, fn, false) }
对于默认事件呢,我们也测试一下
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标注。以后有时间我们谈谈事件的兼容性。
http://www.zhangxinxu.com/wordpress/2012/04/js-dom%E8%87%AA%E5%AE%9A%E4%B9%89%E4%BA%8B%E4%BB%B6/
最新文章
- 【转】TensorFlow练习20: 使用深度学习破解字符验证码
- svn 应该忽略的文件(visual studio)
- 《数据结构》2.3单链表(single linked list)
- Atitit 团队建设的知识管理
- 0511 backlog
- JAVA &; JSON详解
- php中使用linux命令四大步骤
- NodeJS学习笔记(转载)
- 3d touch 应用 2 -备用
- 转:如何创建.htaccess文件
- finally 对 return 值没有影响
- LUYA-CDM
- 12集合(3)-----Map
- python基础学习笔记(十一)
- Javascript中点击(click)事件的3种写法
- JAVA代码模板总结
- 【树莓派+.NET MF打造视频监控智能车】控制篇(.NET MF)
- 熟悉使用ConfigParser库读写配置文件
- 目前.NET Core创建Windows Service比较好的一个开源框架:DasMulli.Win32.ServiceUtils
- Expedition---poj2431(优先队列-堆的实现)
热门文章
- HDU-1274 展开字符串
- oracle 11g如何完全卸载
- Datatypes translation between Oracle and SQL Server
- 家长-Parents表增加字段Token,Gender,Email,Portrait
- sklearn 增量学习 数据量大
- Android爬坑之路
- [原] Page_Load执行了两次,为什么?如何解决!
- 使用C#反射中的MakeGenericType函数,来为泛型方法和泛型类指定(泛型的)类型
- UIFont的常用字体
- 【转载】免费台北.edu教育邮箱及Office 365 Education申请