2011
Dec
19

我讨厌 YUI 3 .....第二天 Event

Tags:
繁中版

网页好读版

事件处理 ，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. }
范例程式

网页好读版

This post was last modified by puritys

Copyright &copy; 2014 PURITYS.COM. All rights reserved.