2011
Dec
19

事件处理 ,Event Binding

这篇文章将介绍如何绑定事件,触发事件,禁止浏览器的预设事件,以及删除事件的语法。假设 node 代表 html tag object, eventHandle 代表自已写的事件,event 代表 browser event object。

YUI3 Event Binding

  • node.on('click',) : 绑定事件
  • eventHandle.detach : 移除 eventHandle 这个事件
  • event.preventDefault : 禁示预设的 Event 触发, 举例来说, a (anchor) 这个 tag 本身点击后,会导到指定的网址,如果我们不想要这个转址>的功能,可以在我们自已的 eventHandle function 中加入 event.preventDefault();
  • event.stopPropagation() : 禁止多个 tag事件同时触发,当 anchor 以及他的上一层,同时绑定了 click 事件,这时,两个事件就会依序执行,但是通常我们不须上一层的事件也同时执行,这时就可以使用 stopPropagation 去停此上一层的事件。
范例
  1. //if box1 is a1's parent
  2. YUI().use('node', 'event', function (Y) {
  3. Y.one('#box1').on('click', function (e) {
  4. alert('Hello World!');
  5. });
  6.  
  7. Y.one('.a1').on('click', function (e) {
  8. e.preventDefault();//取消预设,连结的功能
  9. e.stopPropagation();
  10. //当你点到 a1时,因为a1也在box1里面,所以box1的click事件也会触发,stopPropagation可以取消,div click的功能 (cancel Bubbling)
  11. alert('Hello World2!');
  12. this.detach(); //移除此事件
  13. });
  14. });

YUI 有个 delegate 的功能,这个功能可以将 Event 绑定在 parent tag 上,例如 anchor,与 button 的事件触发可以一起绑定在他们的 Parent div 上,范例如下。

delegate
  1. <div class="parent">
  2. <a href="xxx">anchor</a>
  3. <button> button</button>
  4. </div>
  5. <script>
  6. YUI().use('node', 'event', function (Y) {
  7. var bind = Y.one('.parent').delegate('click', function (E) {}, 'a, button');
  8. // bind.detach();
  9. });
  10.  
  11. </script>

想要取消 delegate 的事件时,也可以使用 detach ,但是必需先将 event 回传值存下来,例如上一个范例是存在变数 "bind",然后再透过 bind.detach(); ,将这个事件移除。

JQuery binding

JQuery 一样也可以很简单的做到 event binding .

  • bind : JQuery 可以使用 bind 来绑定事件,如 $('.a').bind('click',function) ,也可以用更简短的方式,如 $('.a').click(function) 。
  • event.preventDefault() : 禁止 Browser 预设的事件
  • event.stopPropagation() : 禁止多个 tag事件同时触发
范例
  1. //if box2 is a2's parent
  2. $("#box2").click(function(e){
  3. alert('Hello World!');
  4. });
  5. $(".a2").click(function(e){
  6. e.preventDefault();
  7. e.stopPropagation();
  8. alert('Hello World2!');
  9. $(this).unbind('click');
  10. });

Javascrip event binding

  • addEventListener , attachEvent : 纯 JS 绑定事件,要先判定浏览器,所以会用到这两个 function
  • detachEvent : 移除事件
  • event.preventDefault() , event.returnValue=false : 要禁止预设的事件触发,也要同时设定这两个值
  • event.stopPropagation() , event.cancelBubble=true ,要停止多个 tag 事件同时触发,也要同时指定这两个值
范例
  1. var eventHandle="";
  2. if(document.addEventListener){
  3. eventHandle=js_click;
  4. document.getElementById('a_js').addEventListener('click',eventHandle,false);
  5.  
  6. }
  7. else if(document.attachEvent){
  8. eventHandle=js_click;
  9. document.getElementById('a_js').attachEvent('onclick',eventHandle);
  10. }
  11.  
  12. function js_click(e){
  13. if ( e.preventDefault ) {
  14. //Firefox
  15. e.preventDefault();
  16. } else {
  17. //IE
  18. e.returnValue = false;
  19. }
  20. if ( e.stopPropagation ) {
  21. e.stopPropagation();
  22. }
  23. e.cancelBubble=true;
  24. alert('t_js');
  25.  
  26. if(document.removeEventListener){
  27. this.removeEventListener('click',eventHandle,false);
  28. }
  29. else if(document.detachEvent){
  30. //function执行中,不能移除自已 ,所以使用 setTimeout
  31. setTimeout('removeEvent()',100);
  32. }
  33. }
  34. function removeEvent(){
  35. document.getElementById('a_js').detachEvent('onclick',eventHandle);
  36. }
范例程式

回應 (Leave a comment)