使用javascript的“委托”实现attachEvent

上次介绍过使用js来实现委托的特性,今天说一下使用委托实现一些有用的功能。
例如实现类似ie dom对象的其中一个方法:attachEvent
attachEvent这个方法是用来绑定对象事件,在大量使用互交时的中经常会用到这个方法,不过在ie和firefox是使用不同的方法来实现,我们可以使用委托来重写这个方法:

/**
 * function: 用委托的思想实现对象的事件绑定
 * author:   天边一只雁
 * blog:     http://harrychen66.cnblogs.com/
 */
// 实现委托的类
function delegate(func){
    this.arr = new Array(); // 回调函数数组
    this.add = function(func){
        this.arr[this.arr.length] = func;
    };
    this.run = function(){
        for(var i=0;i<this.arr.length;i++){
            var func = this.arr[i];
            if(typeof func == "function"){
                func(); // 遍历所有方法以及调用
            }
        }
    }
    this.add(func);
}
// 新建一个实现attach event的函数
function fAttachEvent(obj,sEvent,func){
    if(!obj.dEv) obj.dEv = new delegate();
    obj.dEv.add(func);
    eval("obj." + sEvent + " = function(){this.dEv.run()}");
}
// 建立一个button
var btn = document.createElement("BUTTON");
btn.value = "action";
// 绑定函数1
var renderButton = function(){
    document.body.appendChild(btn);
};
// 绑定函数2
var action1 = function(){
    alert("action1");
};
// 绑定函数3
var action2 = function(){
    alert("action2");
};
// 绑定函数1到window对象的onload事件
fAttachEvent(window, "onload", renderButton);
// 绑定函数2到btn对象的onclick事件
fAttachEvent(btn, "onclick", action1);
// 绑定函数3到btn对象的onclick事件
fAttachEvent(btn, "onclick", action2);

使用javascript的“委托”实现attachEvent相关推荐

  1. Javascript 的addEventListener()及attachEvent()区别分析

    Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...

  2. Javascript事件委托

    概念: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul ...

  3. JavaScript 事件委托

    事件委托 事件流 事件触发 用户操作,触发事件. 事件捕获 事件触发之后,浏览器会从window对象开始一层层向下捕获事件事件触发对象. 事件处理阶段 当事件捕获到事件触发对象时,事件捕获结束,开始事 ...

  4. JavaScript事件委托(事件代理)

    将事件处理加载到父级元素上,可避免将事件处理加载到多个子集元素上. 原理:利用的就是事件冒泡和目标元素不去监听所有的子元素事件,只监听他们的父级元素,当某个子元素被触发时,事件会向上冒泡的父级元素.在 ...

  5. JavaScript事件委托之鼠标移入移出事件

    鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...

  6. 手撕前端面试题(Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......

    前端的那些基本标签

  7. 一步步学习javascript基础篇(8):细说事件

    终于学到事件了,不知道为何听到"事件"就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有 ...

  8. Javascript笔记大全02

    DOM 简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 DOM树 窗口加载事件 // 为wind ...

  9. 174道 JavaScript 面试题,助你查漏补缺

    最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记,分享这份总结给 ...

  10. JavaScript面试知识点

    前言 针对面试的 JavaScript 知识点整理 1.介绍一下js的数据类型有哪些,值是如何存储的 JavaScript一共有8种数据类型. 基本数据类型(7种):Undefined.Null.Bo ...

最新文章

  1. Symantec NetBackup 7.1 自动刷新磁带脚本
  2. 中国程序员容易发音错误的单词
  3. spring boot配置文件:application.yml (yml与properties文件优缺对比)
  4. STM32F103实现点灯(固件库方式)
  5. 莫比乌斯反演 做题记录
  6. 自由口通信模式下计算机读写PLC存储区的程序
  7. PyTorch系列 | 如何加快你的模型训练速度呢?
  8. WinSock I/O 模型 -- OVERLAPPED I/O 模型
  9. 摩象科技获数千万元的A+轮融资,投资方为北极光创投
  10. gvim【一】【安装和基本使用】
  11. Carryon 数数字
  12. html怎么定义403页面,自定义 403 错误页面(示例代码)
  13. wxid转扫一扫添加好友
  14. Windows下使用Jconsole远程监控Linux系统中java服务器资源占用情况
  15. python pyz_Python pyzfp包_程序模块 - PyPI - Python中文网
  16. 如何修改wordpress的访问端口
  17. 记一次华为交换机SSH的配置(本文使用ENSP还原现场)
  18. 「建议收藏」第一人称视角带你走进 Vue 源码世界
  19. pybullet机器人仿真环境搭建 1.安装pybullet,测试官方示例,基础环境搭建
  20. “Linux之父”林纳斯•托瓦兹

热门文章

  1. 数学分析 复合函数求导法则
  2. 360 绑架浏览器首页的解决方法
  3. 简单的ideatomcat热加载
  4. 1052. Linked List Sorting (25)再
  5. 译:Datetime类型的扩展
  6. 用 toto 快速建轻量级博客
  7. WEB2.0 XHTML代码规范
  8. MybatisPlusExcepection: can not find lambda cache for this property [XX] for entity [xxx]
  9. 【Spring-tx】AutoProxyRegistrar类
  10. Spring IOC源码笔记(一)