一个特殊的事件绑定程序（通用于各种浏览器）

做前端，事件绑定是一个关键！全球比较有名的事件绑定程序也比较多，而且在网络广为流传。也不得不承认那些程序是写的不错。今天我自己也写了一个，就目前形式来看，它具有以下特点：

1、同元素的同事件可以绑定多个函数。

2、解决了this的问题，也是说在绑定函数体内的this指向的是元素。

3、被绑定的那些函数总是按顺序执行的。

4、简单容易理解，完全无视addEventListener和attachEvent之类的东西。

5、在firefox、IE、opera、safari、chrome下工作良好

下面是代码：

function addEvent(obj, type, fn) {
var func = obj['on'+type] || function() {};
obj['on'+type] = function(event) {
event = event || window.event;
func.call(obj,event);
fn.call(obj,event);
}
}

不过用这种方式绑定的话，是不支持虑删除绑的。下面我的代码分析：

obj ：被操作的元素

type ：事件名称

fn ：绑定的函数

第一行：var func = obj['on'+type] || function() {};其功能是保存之前已绑定的事件。或是第1次绑定，则返回一个空函数。目的是方便下面的调用。

第二行：obj['on'+type] = function(event) {}：重新定义obj['on'+type]事件（在原事件的基础上再多执行一个fn函数，你肯定知道n += 3！！！！）

第三行：event = event || window.event ：不要解释吧（修复event，因为IE把事件对象放入了window.event之中）

第四行：func.call(obj, event)：先执行以前被绑定的函数（第1次绑定时，这里为一个空函数），使用call的方式来确保func内的this为元素。

第五行：fn.call(obj, event) ：再执行本次绑定的函数，同样使用call的方式来确保fn内的this为元素。

第四、五行就实现在原有的基础上再多执行一个函数，这样顺序肯定是保持绑定时的顺序的。

转载请注明：转载自web前端开发

转载于:https://www.cnblogs.com/langzs/archive/2011/04/05/2006208.html

一个特殊的事件绑定程序（通用于各种浏览器）相关推荐

Source Insight是一个面向项目开发的程序编辑器和代码浏览器丨产品简介
Source Insight是为大型.高要求的现实世界编程项目而设计的.事实上,今天,重要的技术公司正在使用Source Insight来开发一些最大.最成功的商业硬件和软件产品. 代码分析 Sour ...
微信小程序学习4：小程序语法 - 事件绑定
微信小程序学习4:小程序语法 - 事件绑定事件绑定最简单的例子是,你设置一个按钮为可触发的,触发条件可以是点击,按压,长按等等.当然,如果你仅仅是设置了触发事件,而没有创建回调函数,是不会产生什么效 ...
JavaScript事件绑定的方法说明收藏
JavaScript事件绑定的方法说明收藏事件使得客户端的 JavaScript 有机会被激活,并得以运行.在一个 Web 页面装载之后,运行脚本的唯一方式,就是响应系统或者用户的动作.虽然从第一 ...
vue.js中的事件绑定-01笔记
之前发生了一个错误,事件绑定一直不成功,就是下面的错误代码 <div id="app">当前计数:{{count}}<button v-if="0&qu ...
事件（DOM事件绑定）
事件的定义事件:元素天生具备的行为方式(和写不写JS代码没有关系)[onclick不是事件,click才是事件,浏览器会把一些常用事件挂载到元素对象的私有属性上,让我们可以实现DOM0事件绑定], ...
一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库 RxJava，相当好...
RxJava 是他们的基础组件,RxAndroid, Retrofit, RxCache等等都要用到它. https://github.com/ReactiveX/RxJava https://git ...
日积（Running）月累（ZSSURE）：WCF学习之“通过事件绑定控制WinForm宿主程序主界面控件”
背景: WCF服务需要寄宿到相应的可运行进程中执行,常见的有四种寄宿,分别是控制台程序.WinForm程序.IIS和Windows服务.之前学习老A博客和<WCF全面解析>时最常用到的是控 ...
axure8 事件改变样式_15. 教你零基础搭建小程序：小程序事件绑定（2）
图文版本章继续讲解小程序的事件绑定的相关知识,上一章我们实现了第一个需求, 当在输入框中输入文字,比如123, 会如实地映射至下面的标签文件中,显示123: 如果上方的输入框文字改变,对应下方的标签 ...
input 事件_14. 教你零基础搭建小程序：小程序事件绑定（1）
图文版本章以及下一章学习小程序的事件绑定,我们通过一个案例来讲解其中相关的知识点,便于大家理解哦~~ 首先,先来看这个案例的需求. 我们使用画图工具,先在上面绘制一个小程序页面, 如下图: 再在页面 ...

一个特殊的事件绑定程序（通用于各种浏览器）

一个特殊的事件绑定程序（通用于各种浏览器）相关推荐

最新文章

热门文章