- 浏览: 48692 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (70)
- 数据库 (4)
- web前端 (15)
- JS优化 (2)
- 浏览器 (4)
- 搜索 (1)
- Jquery (1)
- HTML 5 Web Socket (1)
- Http报头 (1)
- Http cache (1)
- 正则 (1)
- 编辑器 (1)
- HTML5 知识库 (3)
- 非技术 (4)
- http (1)
- 浏览器兼容性 (1)
- 资源 (2)
- NodeJS (4)
- js跨域 (3)
- 广告 (1)
- apache (1)
- HighCharts (1)
- 手册 (0)
- QNumber (1)
- AS3 (1)
- 更多链接 (1)
- GOOD ARTICLES (1)
- git (4)
- 规范 (1)
- css布局 (1)
- 算法 (1)
- 前端架构选择 (1)
- 视频格式 (1)
- FE_前端冷知识集锦 (1)
最新评论
一般我们在JS中添加事件,是这样子的
view source
1 obj.onclick=method
这种绑定事件的方式,兼容主流浏览器,但如果一个元素上添加多次同一事件呢?
view source
1 obj.onclick=method1;
2 obj.onclick=method2;
3 obj.onclick=method3;
如果这样写,那么只有最后绑定的事件,这里是method3会被执行,这个时候我们就不能用onclick这样的写法了,主角改登场了,在IE中我们可以使用attachEvent方法
view source
1 //object.attachEvent(event,function);
2 btn1Obj.attachEvent("onclick",method1);
3 btn1Obj.attachEvent("onclick",method2);
4 btn1Obj.attachEvent("onclick",method3);
使用格式是前面是事件类型,注意的是需要加on,比如onclick,onsubmit,onchange,执行顺序是
method3->method2->method1
可惜这个微软的私人方法,火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的addEventListener方法
view source
1 //element.addEventListener(type,listener,useCapture);
2 btn1Obj.addEventListener("click",method1,false);
3 btn1Obj.addEventListener("click",method2,false);
4 btn1Obj.addEventListener("click",method3,false);
执行顺序为method1->method2->method3
做前端开发工程师,最悲剧的某过于浏览器兼容问题了,上面有两种添加事件的方法,为了同一添加事件的方法,我们不得不再重新写一个通用的添加事件函数,幸亏再有前人帮我们做了这件事
view source
01 function addEvent(elm, evType, fn, useCapture) {
02 if (elm.addEventListener) {
03 elm.addEventListener(evType, fn, useCapture);//DOM2.0
04 return true;
05 }
06 else if (elm.attachEvent) {
07 var r = elm.attachEvent(‘on‘ + evType, fn);//IE5+
08 return r;
09 }
10 else {
11 elm['on' + evType] = fn;//DOM 0
12 }
13 }
下面是Dean Edwards 的版本
view source
01 function addEvent(element, type, handler) {
02 //为每一个事件处理函数分派一个唯一的ID
03 if (!handler.$$guid) handler.$$guid = addEvent.guid++;
04 //为元素的事件类型创建一个哈希表
05 if (!element.events) element.events = {};
06 //为每一个"元素/事件"对创建一个事件处理程序的哈希表
07 var handlers = element.events[type];
08 if (!handlers) {
09 handlers = element.events[type] = {};
10 //存储存在的事件处理函数(如果有)
11 if (element["on" + type]) {
12 handlers[0] = element["on" + type];
13 }
14 }
15 //将事件处理函数存入哈希表
16 handlers[handler.$$guid] = handler;
17 //指派一个全局的事件处理函数来做所有的工作
18 element["on" + type] = handleEvent;
19 };
20 //用来创建唯一的ID的计数器
21 addEvent.guid = 1;
22 function removeEvent(element, type, handler) {
23 //从哈希表中删除事件处理函数 www.2cto.com
24 if (element.events && element.events[type]) {
25 delete element.events[type][handler.$$guid];
26 }
27 };
28 function handleEvent(event) {
29 var returnValue = true;
30 //抓获事件对象(IE使用全局事件对象)
31 event = event || fixEvent(window.event);
32 //取得事件处理函数的哈希表的引用
33 var handlers = this.events[event.type];
34 //执行每一个处理函数
35 for (var i in handlers) {
36 this.$$handleEvent = handlers[i];
37 if (this.$$handleEvent(event) === false) {
38 returnValue = false;
39 }
40 }
41 return returnValue;
42 };
43 //为IE的事件对象添加一些“缺失的”函数
44 function fixEvent(event) {
45 //添加标准的W3C方法
46 event.preventDefault = fixEvent.preventDefault;
47 event.stopPropagation = fixEvent.stopPropagation;
48 return event;
49 };
50 fixEvent.preventDefault = function() {
51 this.returnValue = false;
52 };
53 fixEvent.stopPropagation = function() {
54 this.cancelBubble = true;
55 };
功能非常强悍,解决IE的this指向问题,event总是作为第一个参数传入,跨浏览器就更不在话下。
最后贡献一个HTML5工作组的版本:
view source
01 var addEvent=(function(){
02 if(document.addEventListener){
03 return function(el,type,fn){
04 if(el.length){
05 for(var i=0;i<el.length;i++){
06 addEvent(el[i],type,fn);
07 }
08 }else{
09 el.addEventListener(type,fn,false);
10 }
11 };
12 }else{
13 return function(el,type,fn){
14 if(el.length){
15 for(var i=0;i<el.length;i++){
16 addEvent(el[i],type,fn);
17 }
18 }else{
19 el.attachEvent(‘on‘+type,function(){
20 return fn.call(el,window.event);
21 });
22 }
23 };
24 }
25 })();
可能细心的读者发现了IE的attachEvent和W3C标准的addEventListener绑定多个事件的执行顺序是不一样的
发表评论
-
JavaScript instanceof 运算符深入剖析
2015-06-09 18:07 316JavaScript instanceof 运算符深入 ... -
利用HTML5 History API实现无刷新跳转
2015-01-13 19:10 892HTML4中的History API history这个东 ... -
http://m.tv.sohu.com/hots
2014-04-08 14:23 556手机访问: http://m.tv.sohu.com/h ... -
jquery实现返回顶部按钮和scroll滚动功能[带动画效果]
2013-11-20 12:02 696jquery实现返回顶部按钮和scroll滚动功能[带动画 ... -
清除浮动的几种方法(暂时总结出7种)
2013-05-20 15:31 1130写给对CSS感兴趣的朋友:这二天被很多朋友再次问到 清浮动 ... -
Fiddler是啥?
2013-04-03 15:29 1084Fiddler是啥? 百度百科里是这样介绍它 ... -
不使用JavaScript让IE浏览器支持HTML5元素
2013-03-05 11:29 636http://www.zhangxinxu.com/wordp ... -
target and currentTarget
2012-10-31 11:22 762<html> <head> ... -
style、currentStyle、getComputedStyle区别介绍
2012-09-27 14:47 712style、currentStyle、getComput ... -
jQuery对象转成DOM对象
2012-09-26 18:00 705jQuery对象转成DOM对象:两种转换方式将一个jQuery ... -
计算机专业的学生必须掌握的五门课程
2012-08-23 15:35 744计算机专业概念有点 ... -
Node.js 究竟是什么?
2012-08-21 09:31 769简介 如果您听说 ... -
JS截取字符串substr 和 substring方法的区别
2012-07-30 22:43 649substr 方法 返回一个从指定位置开始的指定长度的 ... -
js parseInt 用法
2012-07-04 18:13 1050javascript的parseInt函数,大家都知道是干啥的 ...
相关推荐
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
可能你也碰到过这种情况,就是在js的代码中用了[removed]后...至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window.attachEvent(‘onload’,函数名)//IE中 } els
JS动态添加事件的方法有很多,我们可以使用setAttribute、attachEvent 和 addEventListener等等,感兴趣的朋友可以参考下
注意:一定要保证移除事件时和添加事件时是同一个事件函数 事件绑定兼容性问题:在低版本IE中(IE 6/7/8)不支持addEventListener和removeEventListener, 在低版本IE中可以使用: attachEvent(事件名,事件函数) 绑定...
js添加事件的通用方法推荐 ... 测试添加事件:firefox使用addEventListener,ie使用attachEvent 点击此p标签,绑定了2个弹出事件 [removed] function test1() { alert(test1); } function test2(){
但是浏览器有addEventListener和attachEvent方法可供调用,从而模拟出类似于C#中的事件委托的事件触发机制! 代码如下: /* * 功能:事件处理 * Author:LQB * 时间:2009-1-4 * #include JCore.js */ var JEvents = ...
先介绍js添加事件通用方法,具体内容... 测试添加事件:firefox使用addEventListener,ie使用attachEvent 点击此p标签,绑定了2个弹出事件 [removed] function test1() { alert(test1); } function t
如果有多个javascript文件,那么极有可能出现多个[removed]事件,但是最后起作用的只有一个,这时候就需要使用事件绑定来解决这个问题了。 IE方式 attachEvent(事件名称, 函数),绑定事件处理函数 detachEvent(事件...
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这里就大概介绍一下avascript的Event用法.
关于js中的事件监听大家用的比较多了,无非是判断浏览器是否支持addEventListener和attachEvent,网上搜索关于事件监听的方法也挺多,但是总有些不是很完善。下面的方法中对于添加事件监听的方法是一样的,只不过在...
绑定事件有兼容性问题,在IE早期版本中使用的是obj.attachEvent(),而其他浏览器使用的则是addEventListener()。 这两个方法都有三个参数,分别为:事件类型,事件函数,最后一个是布尔值,true或者是false。 true...
this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象. 如果是事件绑定函数,则指向被绑定的元素本身. [removed] //by Go_Rush(阿舜) from ...
19、绑定事件和解除事件的区别(必会) 113 20、谈谈事件委托的理解?(必会) 114 21、 JavaScript 中的定时器有哪些?他们的区别及用法是什么?(必会) 114 22、比较 attachEvent 和 addEventListener?(必会) ...
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
1,IE使用attachEvent/detachEvent方法来添加和删除事件监听器;w3c使用addEventListener/removeEventListener方法。 2,IE对其事件使用onevent的命名方式,而w3c的是event的命名方式。 3,IE事件监听器内使用的是一...
本文实例讲述了JavaScript事件委托用法。分享给大家供大家参考。具体如下: var addEvent = function (elem, eventType, func) { if ( elem.addEventListener ) addEvent = function (elem, eventType, func) { ...
46、JS ATTACHEVENT与ADDEVENTLISTENER区别 321 47、JS WINDOW.EVENT.CANCELBUBBLE 事件冒泡 323 48、JS解决COOKIE跨域访问的问题之方法一 323 49、JS禁止复制网页代码 324 50、JS 禁止剪切、复制、粘贴的文本框代码...
使用Snooper,您可以检索以前使用addEventListener (以及将来的attachEvent )添加到元素的侦听器。 用法 您可以使用将其添加到您的项目中,也可以从该存储库中下载它。 在要监视的任何其他脚本之前先加载它。 例子...
先看个实例 <input id='b1' type='button' value='\u6309\u94ae'/>...oBtn.attachEvent(onclick,mto,false); } catch(e)//IE { oBtn.addEventListener(click,mto,false); } }; [removed] 注意的是: addEventLis