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.