javascript中传统事件与现代事件
大家都知道，IE中的现代事件绑定（attachEvent）与W3C标准的（addEventListener）相比存在很多问题，
例如：内存泄漏，重复添加事件并触发的时候是倒叙执行等。
下面是用传统事件的方法来处理封装事件的绑定：
addEvent.ID = 1; // 事件计数器
function addEvent(obj, type, fn){
if(obj.addEventListener){
obj.addEventListener(type, fn, false);
} else { // IE
// 判断对象是否存在，保证只有一个对象，否则每执行一次，会创建一个事件对象
// 以键值对的形式储存类型与函数的一个数组,=======将事件对象数组挂载到obj对象是为
了方便事件的删除
if( !obj.events){
// 相当于结构为：obj.events : {click:[fn1,fn2], mouserover:[fn1], ...}
obj.events = {};
}
var flag = false;
// 存储事件对象
if( !obj.events[type]){
// 类型数据储存挨个函数
obj.events[type] = [];
// 该类型的第一次事件类型及函数储存到该类型数组中的第一位
obj.events[type][0] = fn;
} else {
var eventfn = obj.events[type];
// 循环遍历该类型对象查询该事件是否重复，如果重复flag为true，并return返回
for(var i in eventfn){
if(eventfn[i] == fn ){
flag = true;
return;
}
}
// 判断该事件是否重复，重复的话就不进行事件的函数的存储，否则储存该事件并执行
if( !flag ){
// 当该类型已经存在了，将为该事件进行累计时间类型函数存储，最后循环执行
eventfn[addEvent.ID++] = fn;
}
}
// 事件函数 类型数组 函数遍历调用
obj["on"+type] = function(){
var event = window.event; // 事件对象的储存
// 在事件对象后添加函数，当执行的时候调用，并阻止默认行为的发生，与W3C标准同步
event.preventDefault = function(){
this.returnValue = false;
};
// 在事件对象后面添加函数，一个尾巴函数，停止冒泡。
event.stopPropagation = function(){
this.cancelBubble = true;
};
// 循环遍历执行类型储存的多个函数
var evfn = obj.events[type];
for(var i in evfn){
// 顺序执行该类型的事件函数，解决了传统事件的覆盖问题和现代事件绑定的逆序触发
事件的问题
evfn[i].call(this, event); // 将执行函数放置在该对象的环境下执行,并传递一个事件对
象给函数回调使用
}
}
}
}
function removeEvent(obj, type, fn){
if(obj.removeEventListener){
obj.removeEventListener(type, fn, false);
} else {
// 循环遍历该对象下该类型的事件函数是否函数该函数，如果有就将该事件函数删除
var evefn = obj.events[type];
for(var i in evefn){
if(evefn[i] == fn){
// delete evefn[i]; 该方法也可以删除该数组的该项，但是会保留该位置当访问的时候值
为undefined
evefn.splice( i, 1); // 从第i的位置删除1位，
}
}
}
}
以上所述就是本文的全部内容了，希望大家能够喜欢。
相关推荐
-
javascript事件冒泡实例分析
本文实例讲述了javascript事件冒泡.分享给大家供大家参考.具体分析如下: 事件冒泡: 如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发, 触发的顺序是"由内而外".验证:在页面上添加一个table,table里有tr,tr里有td,td里放一个p, 在p,td,tr,table中添加事件响应 <html xmlns="http://www.w3.org/1999/xhtml"> <h
-
javascript事件委托的方式绑定详解
js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #
-
javascript相关事件的几个概念
客户端javascript程序采用了异步事件驱动编程模型. 相关事件的几个概念: 事件类型(event type):用来说明发生什么类型事件的字符串: 事件目标(event target):发生事件的对象: 事件处理程序(event handler):处理或响应事件的函数: 事件对象(event object):与特定事件相关且包含有关该事件详细信息的对象: 事件传播(event propagation):浏览器决定哪个对象出发其事件处理程序的过程: 注册事件处理程序: 1.设置javascri
-
javascript模拟命名空间
在 C++ 和 C# 中,命名空间用于尽可能地减少名称冲突.例如,在 .NET Framework 中,命名空间有助于将 Microsoft.Build.Task.Message 类与 System.Messaging.Message 区分开来.JavaScript 没有任何特定语言功能来支持命名空间,但很容易使用对象来模拟命名空间.如果要创建一个 JavaScript 库,则可以将它们包装在命名空间内,而不需要定义全局函数和类,如下所示: var MSDNMagNS = {}; MSDNMag
-
javascript简单实现命名空间效果
Javascript原生并不支持命名空间,需要变通来实现. 在我们创建一个JavaScript库时,命名空间就显得举足轻重了,我们可以将组成这个JavaScript库的零散的JavaScript文件(*.js)封装在命名空间中,而无须定义全局的函数或类.比如在本章节多次出现的Person,我们就可以作为库的一部分封装到合适的命名空间中: Code 5-13: 复制代码 代码如下: var com = {};com.anyjava = {};com.anyjava.Person = functio
-
JavaScript创建命名空间的5种写法
在JavaScript中全局变量经常会引起命名冲突,甚至有时侯重写变量也不是按照你想像中的顺序来的,可以看看下面的例子: 复制代码 代码如下: var sayHello = function() { return 'Hello var'; }; function sayHello(name) { return 'Hello function'; }; sayHello(); 最终的输出为 复制代码 代码如下: > "Hello var" 为什么会这样,根据 StackOv
-
JavaScript事件委托实例分析
本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { elem.addEventListener(eventType, func, false); }; else if ( elem.attachEvent ) addEv
-
javascript实现相同事件名称，不同命名空间的调用方法
本文实例讲述了javascript实现相同事件名称,不同命名空间的调用方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
浅析JavaScript中的事件机制
事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档对象模型(DOM)第3级,每一个HTML元素的一部分有一套可以触发JavaScript代码事件. 例子:
-
javascript中为某个元素指定事件的三种方式
在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1.在html中,使用onclick属性 2.在javascript中,使用onclick属性 3.在javascipt中,使用addEvenListener()方法 三种方法的比较 (1)在第二.三种方法中,可以向函数传入一个event对象,并读取其相应属性,而方法一不可以. (2)首选第二.三种,第一种不利于将内容与事件分离,也不能使用event对象的相关内容. 一些语法细节 (1)在第一种方法中,onclick大小写
-
JavaScript中使用stopPropagation函数停止事件传播例子
JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播.如以下例子: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button&
-
javascript中注册和移除事件的4种方式
对于html中的一些元素注册事件的方式有多种 第一种: 复制代码 代码如下: <script> function test() { alert("OK"); } </script> <a href="#" onclick="test()">测试</a> 第二种: 复制代码 代码如下: <a href="#" id="a">测试</a>
-
javascript中传统事件与现代事件
大家都知道,IE中的现代事件绑定(attachEvent)与W3C标准的(addEventListener)相比存在很多问题, 例如:内存泄漏,重复添加事件并触发的时候是倒叙执行等. 下面是用传统事件的方法来处理封装事件的绑定: addEvent.ID = 1; // 事件计数器 function addEvent(obj, type, fn){ if(obj.addEventListener){ obj.addEventListener(type, fn, false); } else { /
-
JavaScript中停止执行setInterval和setTimeout事件的方法
js 代码中执行循环事件时,经常会用到 setInterval 和 setTimeout 这两个方法,关于这两个方法的细节这里不详细讨论了,简要分享下在需要停止循环事件的时候该如何操作. (1)setInterval 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式,停止该方法可使用 clearInterval 方法.具体示例如下: 复制代码 代码如下: <html> <meta http-equiv="Content-Type" content="t
-
JavaScript中的事件处理
事件处理概述 事件处理是对象化编程的一个很重要的环节,没有了事件处理,程序就会变得很死,缺乏灵活性.事件处理的过程可以这样表示:发生事件 - 启动事件处理程序 - 事件处理程序作出反应.其中,要使事件处理程序能够启动,必须先告诉对象,如果发生了什么事情,要启动什么处理程序,否则这个流程就不能进行下去.事件的处理程序可以是任意 JavaScript 语句,但是我们一般用特定的自定义函数(function)来处理事情. 指定事件处理程序有三种方法: 方法一 直接在 HTML 标记中指定.这种方法是
-
javascript中的事件代理初探
事件在javascript中一直是最强大的对象之一.javascript提供了addEventListener和attachEvent两个方法来为DOM节点绑定事件,jquery作了进一步封装,提供了兼容各个浏览器的bind方法.现在来看,这种传统的事件绑定方式存在着以下不足: 1.可能需要绑定很多的EventHander. 假如页面中某个表有100行,现在必须为每一行绑定一个click事件.那么就必须绑定100个EventHandler,这对页面性能来说有着极大的负担,因为需要创建更多的内存来
-
浅析javascript中的事件代理
本文的主要内容是根据前不久面试某家公司Web前端开发岗位,面试时做的一道数组去重问题的解题思路进行整理的,分享给大家. 题目本身很简单:一个ul中有一千个li,如何给这一千个li绑定一个鼠标点击事件,当鼠标点击时alert出这个li的内容和li的位置坐标xy, <ul id="ulItem"> <li id="li1">1</li> <li id="li2">2</li> <li
-
JavaScript中为事件指定处理程序的五种方式分析
本文实例讲述了JavaScript中为事件指定处理程序的五种方式.分享给大家供大家参考,具体如下: JavaScript和HTML之间的交互是通过事件实现的. IE9.Firefox.Opera.Sarifi.Chrome都已经实现了DOM2级事件模块的核心部分,IE8是最后一个仍然使用其专有事件系统的主要浏览器. 事件流: 事件流描述的是从页面中接受事件的顺序,但IE和Netscape却提出了完全相反的事件流的概念,IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流. 1) 事件
-
JavaScript中Window对象的属性及事件
Window 对象 Window 对象表示浏览器中打开的窗口. 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象. 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象. windows对象属性 属性 描述 closed 返回窗口是否已被关闭. defaultStatus 设置或返回窗口状态栏中的默认文本. document 对 Document 对象的只读引用.请