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)