使用javascript的“委托”实现attachEvent
使用javascript的“委托”实现attachEvent
例如实现类似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相关推荐
- Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- Javascript事件委托
概念: 事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件. 事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul ...
- JavaScript 事件委托
事件委托 事件流 事件触发 用户操作,触发事件. 事件捕获 事件触发之后,浏览器会从window对象开始一层层向下捕获事件事件触发对象. 事件处理阶段 当事件捕获到事件触发对象时,事件捕获结束,开始事 ...
- JavaScript事件委托(事件代理)
将事件处理加载到父级元素上,可避免将事件处理加载到多个子集元素上. 原理:利用的就是事件冒泡和目标元素不去监听所有的子元素事件,只监听他们的父级元素,当某个子元素被触发时,事件会向上冒泡的父级元素.在 ...
- JavaScript事件委托之鼠标移入移出事件
鼠标移入移出事件 <div class="parent">父元素<div class="child">子元素</div>&l ...
- 手撕前端面试题(Javascript~事件委托、数组去重、合法的URL、快速排序、js中哪些操作会造成内存泄漏......
前端的那些基本标签
- 一步步学习javascript基础篇(8):细说事件
终于学到事件了,不知道为何听到"事件"就有一种莫名的兴奋.可能是之前的那些知识点过于枯燥无味吧,说起事件感觉顿时高大上了.今天我们就来好好分析下这个高大上的东西. 可以说,如果没有 ...
- Javascript笔记大全02
DOM 简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口 DOM树 窗口加载事件 // 为wind ...
- 174道 JavaScript 面试题,助你查漏补缺
最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本部分主要是作者在 Github 等各大论坛收录的 JavaScript 相关知识和一些相关面试题时所做的笔记,分享这份总结给 ...
- JavaScript面试知识点
前言 针对面试的 JavaScript 知识点整理 1.介绍一下js的数据类型有哪些,值是如何存储的 JavaScript一共有8种数据类型. 基本数据类型(7种):Undefined.Null.Bo ...
最新文章
- Symantec NetBackup 7.1 自动刷新磁带脚本
- 中国程序员容易发音错误的单词
- spring boot配置文件:application.yml (yml与properties文件优缺对比)
- STM32F103实现点灯(固件库方式)
- 莫比乌斯反演 做题记录
- 自由口通信模式下计算机读写PLC存储区的程序
- PyTorch系列 | 如何加快你的模型训练速度呢?
- WinSock I/O 模型 -- OVERLAPPED I/O 模型
- 摩象科技获数千万元的A+轮融资,投资方为北极光创投
- gvim【一】【安装和基本使用】
- Carryon 数数字
- html怎么定义403页面,自定义 403 错误页面(示例代码)
- wxid转扫一扫添加好友
- Windows下使用Jconsole远程监控Linux系统中java服务器资源占用情况
- python pyz_Python pyzfp包_程序模块 - PyPI - Python中文网
- 如何修改wordpress的访问端口
- 记一次华为交换机SSH的配置(本文使用ENSP还原现场)
- 「建议收藏」第一人称视角带你走进 Vue 源码世界
- pybullet机器人仿真环境搭建 1.安装pybullet,测试官方示例,基础环境搭建
- “Linux之父”林纳斯•托瓦兹
热门文章
- 数学分析 复合函数求导法则
- 360 绑架浏览器首页的解决方法
- 简单的ideatomcat热加载
- 1052. Linked List Sorting (25)再
- 译:Datetime类型的扩展
- 用 toto 快速建轻量级博客
- WEB2.0 XHTML代码规范
- MybatisPlusExcepection: can not find lambda cache for this property [XX] for entity [xxx]
- 【Spring-tx】AutoProxyRegistrar类
- Spring IOC源码笔记(一)