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. 18.有一个网页地址, 比如PHP开发资源网主页: http://www.phpres.com/index.html,如何得到它的内容?

    方法1(对于PHP5及更高版本): $readcontents = fopen("http://www.phpres.com/index.html", "rb" ...

  2. app推送中的通知和消息区别

    最近在做mqtt及其他消息推送的功能,推送服务挺多的,小米推,极光推,华为推,个推等,当然还有苹果的apns.感觉都差不多,尝试了apns,小米推和个推,各个厂家都提供的有sdk,demo. 关于通知 ...

  3. linux 配置 ftp

    1.检测是否安装ftp 2.apt-get install 安装 (如果安装失败 执行apt-get install update<如果update失败 配置dns让自己的服务器 可以ping ...

  4. Spring.Net 初探之牛刀小试

    又是一个周末,感受着外面30°的高温,果断宅在家里,闲来无事,就研究了一下spring .net 框架, 在这里不得不说 vs2013确实是一个强大的开发工具(起码对于.net开发来说是这样的),哈哈 ...

  5. DataGrid获取当前行某列值

    前言: 本文将给大家介绍一下, 在ASP.NET MVC环境下,如何利用Jquery MiniUI(一个专业WebUI控件库)来获取Datagrid中的值,官网没有涉及到的内容:如何获取当前行某一列的 ...

  6. String.Join的巧用

    String.Join大大的方便了我们拼接字符串的处理. 1.普通用法:指定元素间的拼接符号 var ids = new List<int>(); for (int i = 0; i &l ...

  7. console.dir() 与 console.log() 区别

    Difference console.log prints the element in an HTML-like tree console.dir prints the element in a J ...

  8. Logstash学习-Hello World

    1.安装 rpm --import http://packages.elasticsearch.org/GPG-KEY-elasticsearchcat > /etc/yum.repos.d/l ...

  9. oncontextmenu事件

    oncontextmenu的作用是阻止浏览器默认的鼠标右键行为. 阻止弹出右键自带菜单 document.oncontextmenu=function(){ console.log('你点击了右键') ...

  10. Windows 版本的iTunes 修改iPhone的备份路径

    帮朋友解决修改iPhone的备份路径问题,故写篇博客整理记录一下. 所需工具 Junction工具 下载该工具然后将文件放到C:\Windows 目录下,如下图: 找到iTunes的备份路径 Wind ...