Javascript事件绑定的几种方式

 

来源:http://www.cnblogs.com/rainman/archive/2009/02/11/1387955.html

上篇文章讲到了事件绑定的3中常用方法:传统绑定、W3C绑定方法、IE绑定方法。但是,在实际开发中对于我们来讲重要的是需要一个通用的、跨浏览器的绑定方法。如果我们在互联网上搜索一下会发现许多方法,一下是比较知名的几种方法:

在开始学期下面几种方法之前,应当讨论一下,一个好的addEvent()方法应当达到哪些要求:

a、支持同一元素的同一事件句柄可以绑定多个监听函数;

b、如果在同一元素的同一事件句柄上多次注册同一函数,那么第一次注册后的所有注册都被忽略;

c、函数体内的this指向的应当是正在处理事件的节点(如当前正在运行事件句柄的节点);

d、监听函数的执行顺序应当是按照绑定的顺序执行;

e、在函数体内不用使用 event = event || window.event; 来标准化Event对象;

一、John Resig 所写的 addEvent() 函数:http://ejohn.org/projects/flexible-javascript-events/

[javascript] view plain copy

  1. function addEvent( obj, type, fn ) {
  2.         if ( obj.attachEvent ) {
  3.             obj[‘e’+type+fn] = fn;
  4.             obj[type+fn] = function(){obj[‘e’+type+fn]( window.event );}
  5.             obj.attachEvent( ‘on’+type, obj[type+fn] );
  6.         } else
  7.             obj.addEventListener( type, fn, false );
  8.     }
  9.     function removeEvent( obj, type, fn ) {
  10.         if ( obj.detachEvent ) {
  11.             obj.detachEvent( ‘on’+type, obj[type+fn] );
  12.             obj[type+fn] = null;
  13.         } else
  14.             obj.removeEventListener( type, fn, false );
  15.     }

 

这个函数如此简单易懂,的确非常令人惊讶。那么我们还是要看看上面的五点要求:

对于第一点满足了;

对于第三点和第五点,肯定也满足了;

对于第二点,并没有满足,因为addEventListener()会忽略重复注册,而attachEvent()则不会忽略;

但是第四点,并没有满足,因为Dom标准没有确定调用一个对象的时间处理函数的顺序,所以不应该想当然的认为它们以注册的顺序调用。

但是这个函数仍然是一个非常优秀的函数。

二、Dean Edward 所写的 addEvent() 函数 :http://dean.edwards.name/weblog/2005/10/add-event2/

[javascript] view plain copy

  1. function addEvent(element, type, handler) {
  2.     if (!handler.
    guid)handler.

    guid = addEvent.guid++;

  3.     if (!element.events) element.events = {};
  4.         var handlers = element.events[type];
  5.     if (!handlers) {
  6.         handlers = element.events[type] = {};
  7.         if (element[“on” + type]) {
  8.             handlers[0] = element[“on” + type];
  9.         }
  10.     }
  11.     handlers[handler.$$guid] = handler;
  12.     element[“on” + type] = handleEvent;
  13. }
  14. addEvent.guid = 1;
  15. function removeEvent(element, type, handler) {
  16.     if (element.events && element.events[type]) {
  17.         delete element.events[type][handler.$$guid];
  18.     }
  19. }
  20. function handleEvent(event) {
  21.     var returnValue = true;
  22.     event = event || fixEvent(window.event);
  23.     var handlers = this.events[event.type];
  24.     for (var i in handlers) {
  25.         this.$$handleEvent = handlers[i];
  26.         if (this.$$handleEvent(event) === false) {
  27.             returnValue = false;
  28.         }
  29.     }
  30.     return returnValue;
  31. };
  32. function fixEvent(event) {
  33.     event.preventDefault = fixEvent.preventDefault;
  34.     event.stopPropagation = fixEvent.stopPropagation;
  35.     return event;
  36. };
  37. fixEvent.preventDefault = function() {
  38.     this.returnValue = false;
  39. };
  40. fixEvent.stopPropagation = function() {
  41.     this.cancelBubble = true;
  42. };

该函数使用了传统的绑定方法,所以它可以在所有的浏览器中工作,也不会造成内存泄露。

但是对于最初提出的5点,该函数只是满足了前四点。只有最后一点没有满足,因为在JavaScript中对for/in语句的执行顺序没有规定是按照赋值的顺序执行,尽管大部分时刻是按照预期的顺序执行,因此在不同的JavaScript版本或实现中这一语句的顺序有可能不同。

三、Dean Edward 的 addEvent() 函数的改进

[javascript] view plain copy

  1. Array.prototype.indexOf = function( obj ){
  2.     var result = -1 , length = this.length , i=length – 1;
  3.     for ( ; i>=0 ; i– ) {
  4.         if ( this[i] == obj ) {
  5.             result = i;
  6.             break;
  7.         }
  8.     }
  9.     return result;
  10. }
  11. Array.prototype.contains = function( obj ) {
  12.     return ( this.indexOf( obj ) >=0 )
  13. }
  14. Array.prototype.append = function( obj , nodup ) {
  15.     if ( !(nodup && this.contains( obj )) ) {
  16.         this[this.length] = obj;
  17.     }
  18. }
  19. Array.prototype.remove = function( obj ) {
  20.     var index = this.indexOf( obj );
  21.     if ( !index ) return ;
  22.     return this.splice( index , 1);
  23. };
  24. function addEvent(element , type , fun){
  25.     if (!element.events) element.events = {};
  26.     var handlers = element.events[type];
  27.     if (!handlers) {
  28.         handlers = element.events[type] = [];
  29.         if(element[‘on’ + type]) {
  30.             handlers[0] = element[‘on’ + type];
  31.         }
  32.     }
  33.     handlers.append( fun , true)
  34.     element[‘on’ + type] = handleEvent;
  35. }
  36. function removeEvent(element , type , fun) {
  37.     if (element.events && element.events[type]) {
  38.         element.events[type].remove(fun);
  39.     }
  40. }
  41. function handleEvent(event) {
  42.     var returnValue = true , i=0;
  43.     event = event || fixEvent(window.event);
  44.     var handlers = this.events[event.type] , length = handlers.length;
  45.     for ( ; i < length ; i++) {
  46.         if ( handlers[i].call( this , event) === false ){
  47.             returnValue = false;
  48.         }
  49.     }
  50.     return returnValue;
  51. }
  52. function fixEvent(event) {
  53.     event.preventDefault = fixEvent.preventDefault;
  54.     event.stopPropagation = fixEvent.stopPropagation;
  55.     return event;
  56. }
  57. fixEvent.preventDefault = function() {
  58.     this.returnValue = false;
  59. };
  60. fixEvent.stopPropagation = function() {
  61.     this.cancelBubble = true;
  62. };

该函数是本人对Dean Edward 的 addEvent() 函数的改进,完全满足了最初提出的5点要求。如果大家有更好的方法,期待分享!

来源:http://blog.csdn.net/haijiaoxiaowu/article/details/5150389

Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器):

[注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后边附录。]

1、在DOM中,直接用onXXX=”fun();”进行绑定

2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定

3、用 DOM对象.attachEvent(“onXXX”,fun) 进行绑定

4、用<script for=”domId” event=”onXXX”>fun();</script> 进行绑定

  1. <html>
  2. <head>
  3. <title>event test</title>
  4. </head>
  5. <body onload=“init()”>
  6. <!– 绑定方式一:在元素中,通过onXXX(事件)设置绑定方法 –>
  7. <button id=“btn1” onclick=“display()” >绑定方式一</button>
  8. <!– 绑定方式二:在Javascript代码中,通过获得元素,为元素的onXXX(事件)设置绑定方法  –>
  9. <button id=“btn2”>绑定方式二</button>
  10. <!– 绑定方式三:通过for、event为元素绑定事件(IE4+)。for后面是元素id,event是具体事件  –>
  11. <button id=“btn3”>绑定方式三</button>
  12. <!– 绑定方式四:通过attachEvent为元素绑定事件(IE5+)。第一个参数是事件名,第二个参数是绑定的方法 –>
  13. <button id=“btn4”>绑定方式四</button>
  14. </body>
  15. </html>
  16. <script type=“text/javascript”>
  17.     function init() {
  18.         document.getElementById(“btn2”).onclick = display;//为button2绑定事件
  19.         document.getElementById(“btn4”).attachEvent(“onclick”, display);//为button4绑定事件
  20.     }
  21.     function display(event) {
  22.         var targ;//触发事件的对象引用
  23.         if (!event) {
  24.             var event = window.event;//获得当前事件(IE)
  25.         }
  26.         if (event.target) {//IE没有target
  27.             targ = evente.target;
  28.         } else if (event.srcElement) {//适用于IE
  29.             targ = event.srcElement;
  30.         }
  31.         //对触发事件的对象进行操作
  32.         alert(targ.tagName+”-“+targ.id+”-“+event.x+”-“+event.offsetX);
  33.         targ.disabled=“disabled” ;
  34.     }
  35. <script>
  36. <script for=“btn3” event=“onclick”>
  37.     display();//为button3绑定事件
  38. <script>

 

附一:event事件:

onabort: 图像的加载被中断
onblur: 元素失去焦点
onchange: 域的内容被改变
onclick: 当用户点击某个对象时调用的事件句柄
ondblclick: 当用户双击某个对象时调用的事件句柄
onerror: 在加载文档或图像时发生错误
onfocus: 元素获得焦点
onkeydown: 某个键盘按键被按下
onkeypress: 某个键盘按键被按下并松开
onkeyup: 某个键盘按键被松开
onload: 一张页面或一幅图像完成加载
onmousedown: 鼠标按钮被按下
onmousemove: 鼠标被移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素之上
onmouseup: 鼠标按键被松开
onreset: 重置按钮被点击
onresize: 窗口或框架被重新调整大小
onselect: 文本被选中
onsubmit: 确认按钮被点击
onunload: 用户退出页面

 

附二:IE event属性:

cancelBubble: 如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true。
fromElement :对于 mouseover 和 mouseout 事件,fromElement 引用移出鼠标的元素。
keyCode :对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
offsetX,offsetY :发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。
returnValue: 如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,可以取消发生事件的源元素的默认动作。
srcElement :对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。
toElement: 对于 mouseover 和 mouseout 事件,该属性引用移入鼠标的元素。
x,y: 事件发生的位置的 x 坐标和 y 坐标,它们相对于用CSS动态定位的最内层包容元素。

发表评论

电子邮件地址不会被公开。 必填项已用*标注