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/

javascript事件之:谈谈自定义事件(转)的更多相关文章

  1. javascript事件之:谈谈自定义事件

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

  2. javascript和jquey的自定义事件小结

    “通过事件机制,可以将类设计为独立的模块,通过事件对外通信,提高了程序的开发效率.” 可以把多个关联但逻辑复杂的操作利用自定义事件的机制灵活地控制好 对象之间通过直接方法调用来交互 1)对象A直接调用 ...

  3. js事件模型与自定义事件

    JavaScript 一个最简单的事件模型,需要有事件绑定与触发,还有事件删除. var eventModel = { list: {}, bind: function () { var args = ...

  4. Flex事件机制学习-自定义事件实现类间通信 .

    今天,学习Flex自定义事件,可以使两个类通信,定义一个Main类. public class Main extends Sprite     {            public function ...

  5. mui 事件管理及自定义事件详解

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  6. Vue自定义事件:触发自定义事件

    一 项目结构 二 子组件(Mongo.vue) <template> <button @click="eat">按钮</button> < ...

  7. Javascript事件模型系列(四)我所理解的javascript自定义事件

    被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情,公司的个人的,搞的自己心烦意乱浮躁了一 ...

  8. 理解的javascript自定义事件

    理解的javascript自定义事件 被我拖延了将近一个月的javascript事件模型系列终于迎来了第四篇,也是我计划中的最后一篇,说来太惭愧了,本来计划一到两个星期写完的,谁知中间遇到了很多事情, ...

  9. 详解javascript实现自定义事件

    这篇文章主要为大家介绍了javascript实现自定义事件的方法,自定义事件,顾名思义,就是自己定义事件类型,自己定义事件处理函数,javascript如何实现自定义事件,需要了解的朋友可以参考下 我 ...

随机推荐

  1. 开源镜像源(转自[tanghuimin0713的博客])

    参考: http://blog.csdn.net/longerzone/article/details/8437871 http://www.douban.com/note/375227086/ 1. ...

  2. 如何查看oracle数据库的所有的关键字

    管理员账户登录后,执行以下命令:  select * from v$reserved_words 附上参考: NOMONITORINGRECORDS_PER_BLOCKCASCADEDYNAMIC_S ...

  3. 商品条形码(JBarcode)Java版(二)

    下午开了一个下午的会议,其实开会我听不进去,因为今天妖都特别冷,下班在公司等待小媳妇一个钟头,然后带着她去吃饭,吃完饭回到家.她做运动,我就开始慢慢整理我自己的小博客. ——题记 先说一下,写这篇文章 ...

  4. failed to lazily initialize a collection of role:XXX, no sessi

    系统 框架  springMVC+hibernate 这种情况 由于 hibernate 的 懒汉机制,和 Spring 事务机制(不确定)造成的 由于 spring 配置的时候,在service 层 ...

  5. (一)sql入门 导读

    从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...

  6. http错误码大全?

    响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...

  7. Qt qml 单例模式

    Qt qml 单例模式,没什么好说的,看代码吧.单例模式很适合做全局的配置文件. [示例下载] http://download.csdn.net/detail/surfsky/8539313 [以下是 ...

  8. 使用JDBC实现Oracle用户认证

    两天时间写的小品,以前的J2EE环境基本使用框架.现在使用JDBC配合Oracle存储过程模拟了一下用户注册和用户认证. 一.添加必须的jar包 需要JDBC连接Oracle的包和shiro-core ...

  9. python:字符串转换成字节的三种方式

    str='zifuchuang' 第一种 b'zifuchuang'第二种bytes('zifuchuang',encoding='utf-8')第三种('zifuchuang').encode('u ...

  10. C# 将数字时间转化为特定格式字符串

    在工作中,经常遇到,将距离某点的时间段转化为"HH:MM:SS"格式时间的情况. 经过总结,用C#实现了一个特别好的办法: DateTime  _dTNow = DateTime. ...