jquery事件

• 事件函數(shù)列表：

  • blur() : 元素失去焦點
  • focus() : 元素獲得焦點
  • change() : 表單元素的值發(fā)生變化
  • click() : 鼠標(biāo)單擊
  • dblclick() : 鼠標(biāo)雙擊
  • mouseover() : 鼠標(biāo)進入（進入子元素也觸發(fā)）
  • mouseout() : 鼠標(biāo)離開（離開子元素也觸發(fā)）
  • mouseenter() : 鼠標(biāo)進入（進入子元素不觸發(fā)）
  • mouseleave() : 鼠標(biāo)離開（離開子元素不觸發(fā)）
  • hover() : 同時為mouseenter和mouseleave事件指定處理函數(shù)
  • mouseup() : 松開鼠標(biāo)
  • mousedown() : 按下鼠標(biāo)
  • mousemove() : 鼠標(biāo)在元素內(nèi)部移動
  • keydown() : 按下鍵盤
  • keypress() : 按下鍵盤
  • keyup() : 松開鍵盤
  • load() : 元素加載完畢
  • ready() : DOM加載完成
  • resize() : 瀏覽器窗口的大小發(fā)生改變
  • scroll() : 滾動條的位置發(fā)生變化
  • select() : 用戶選中文本框中的內(nèi)容
  • submit() : 用戶遞交表單
  • toggle() : 根據(jù)鼠標(biāo)點擊的次數(shù)，依次運行多個函數(shù)
  • unload() : 用戶離開頁面

• 綁定事件的其他方式

  $(function(){
      $('#div1').bind('mouseover click', function(event) {
          alert($(this).html());
      });
  });
  

• 取消綁定事件

    $(function(){
        $('#div1').bind('mouseover click', function(event) {
            alert($(this).html());
  
            // $(this).unbind();
            $(this).unbind('mouseover');
  
        });
    });
  

主動觸發(fā)與自定義事件

• 主動觸發(fā)

  • 可使用jquery對象上的trigger方法來觸發(fā)對象上綁定的事件。

• 自定義事件

  • 除了系統(tǒng)事件外茸苇，可以通過bind方法自定義事件叛甫，然后用tiggle方法觸發(fā)這些事件。

    //給element綁定hello事件
    element.bind("hello",function(){
        alert("hello world!");
    });
    
    //觸發(fā)hello事件
    element.trigger("hello");
    

事件冒泡

• 什么是事件冒泡

  • 在一個對象上觸發(fā)某類事件（比如單擊onclick事件）谐丢，如果此對象定義了此事件的處理程序爽航，那么此事件就會調(diào)用這個處理程序蚓让，如果沒有定義此事件處理程序或者事件返回true，那么這個事件會向這個對象的父級對象傳播讥珍，從里到外历极，直至它被處理（父級對象所有同類事件都將被激活），或者它到達了對象層次的最頂層衷佃，即document對象（有些瀏覽器是window）

• 事件冒泡的作用

  • 事件冒泡允許多個操作被集中處理（把事件處理器添加到一個父級元素上趟卸，避免把事件處理器添加到多個子級元素上），它還可以讓你在對象層的不同級別捕獲事件氏义。

• 阻止事件冒泡

  • 事件冒泡機制有時候是不需要的锄列，需要阻止掉，通過 event.stopPropagation() 來阻止

    $(function(){
        var $box1 = $('.father');
        var $box2 = $('.son');
        var $box3 = $('.grandson');
        $box1.click(function() {
            alert('father');
        });
        $box2.click(function() {
            alert('son');
        });
        $box3.click(function(event) {
            alert('grandson');
            event.stopPropagation();
    
        });
        $(document).click(function(event) {
            alert('grandfather');
        });
    })
    
    ......
    
    <div class="father">
        <div class="son">
            <div class="grandson"></div>
        </div>
    </div>
    

• 阻止默認行為

  • 阻止右鍵菜單

  $(document).contextmenu(function(event) {
      event.preventDefault();
  });
  

• 合并阻止操作

  • 實際開發(fā)中惯悠，一般把阻止冒泡和阻止默認行為合并起來寫邻邮，合并寫法可以用

  // event.stopPropagation();
  // event.preventDefault();
  
  // 合并寫法：
  return false;
  

• 頁面彈框?qū)嵗?/p>

事件委托

事件委托就是利用冒泡的原理，把事件加到父級上克婶，通過判斷事件來源的子集筒严，執(zhí)行相應(yīng)的操作，事件委托首先可以極大減少事件綁定次數(shù)情萤，提高性能鸭蛙；其次可以讓新加入的子元素也可以擁有相同的操作。

• 一般綁定事件的寫法

  $(function(){
      $ali = $('#list li');
      $ali.click(function(event) {
          $(this).css({background:'red'});
      });
  })
  ...
  <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  

• 事件委托的寫法

  $(function(){
      $list = $('#list');
      $list.delegate('li', 'click', function(event) {
          $(this).css({background:'red'});
      });
  })
  ...
  <ul id="list">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  

• 取消事件委托

  // ev.delegateTarge 委托對象
  $(ev.delegateTarge).undelegate();
  
  // 上面的例子可使用 $list.undelegate();