JS事件绑定和JQ的事件绑定的几种方式

Posted 金甲

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件绑定和JQ的事件绑定的几种方式相关的知识，希望对你有一定的参考价值。

JS事件绑定的方式：

1、内嵌法：

<input type="button" onclick="test()" value="click me"/>  

或者是多事件绑定：<input type="button" onclick="javascript:test();test1();" value="click me"/>

2、动态绑定

直接为对象赋值

document.getElementById("xxx").onclick = test;  

2.使用两个JS函数attachEvent和addEventlistener

在IE下可用attachEvent，在FF下则要用addEventListener

 attachEvent()有两个参数 

  1. 第一个是事件名称
  2. 第二个是需执行的函数；

 addEventListener()有三个参数 

  1. 第一个是事件名称，但与IE事件不同的是，事件不带"on",比如"onsubmit"在这里应为"submit"
  2. 第二个是需执行的函数
  3. 第三个参数为布尔值，表示该事件的响应顺序(useCapture)，userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。
html代码  (仅供参考的一段代码）
  1. <html>  
  2. <head>  
  3. <script type="text/javascript">  
  4.   function addEventHandler(oTarget, sEventType, fnHandler) {    
  5.     if (oTarget.addEventListener) {    
  6.         oTarget.addEventListener(sEventType, fnHandler, false);    
  7.     } else if (oTarget.attachEvent) {    
  8.         oTarget.attachEvent("on" + sEventType, fnHandler);    
  9.     } else {    
  10.         oTarget["on" + sEventType] = fnHandler;    
  11.     }    
  12.   }   
  13.   function test(){  
  14.     alert("bang");  
  15.   }  
  16.   function test1(){  
  17.     alert("bang2");  
  18.   }  
  19.   function init(){  
  20.     var input = document.createElement(‘input‘);  
  21. input.type = ‘button‘;  
  22. input.value = ‘click me‘;  
  23.     addEventHandler(input,‘click‘,test);  
  24.     addEventHandler(input,‘click‘,test1);  
  25.     document.getElementById(‘button_container‘).appendChild(input);  
  26.   }  
  27. </script>  
  28. </head>  
  29. <body onload="init()">  
  30. <div id="button_container"></div>  
  31. </body>  
  32. </html>  

一个好的addEvent()方法应当达到哪些要求：

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

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

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

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

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

对Dean Edward 的 addEvent() 函数的改进：
  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. };  

 

JQ中绑定事件的方式：

以click事件为例，jQuery中绑定事件有三种方法：

（1）target.click(function(){});

（2）target.bind("click",function(){});

（3）target.live("click",function(){});

bind方法只能给当前存在的元素绑定事件，live方法对于事后采用JS等方式新生成的元素绑定事件；

1、事件的处理方式上一致，只能触发一次，且不会绑定在不存在dom树中的对象的事件绑定方法有：
bind() one()  [one()方法只执行一次，以后不会在执行]

2、事件处理方式一致，有继承性，且能绑定在不存在dom树中的对象的事件绑定方法有：
live() delegate()

Delegate()和其他三种的写法上不一样，其他的可以直接是$(selector).bind()、$(selector).one()、$(selector).live()。但delegate()是这样的：$(parsent selector).delegate(‘selector’,’event’,’function’)

二、jQuery中提供了四种事件监听方式，分别是bind、live、delegate、on，对应的解除监听的函数分别是unbind、die、undelegate、off；

on方法的真实面目：on(type,[selector],[data],fn)     实际使用：$(‘#myol li‘).on(‘click‘,getHtml);    不过官方有一个推荐就是尽量使用on，因为其他方法都是内部调用on来完成的，直接使用on可以提高效率，而且你完全可以用on来代替其他三种写法。

以上是关于JS事件绑定和JQ的事件绑定的几种方式的主要内容，如果未能解决你的问题，请参考以下文章

事件绑定的几种方式

JS 事件绑定的几种方式 小笔记

事件绑定的快捷方式 利on进行事件绑定的几种情况

React事件绑定的几种方式对比

jQuery中绑定事件的几种方法

react系列-事件绑定的几种方法对比