jQuery (01) 瀏覽器的事件模型

瀏覽器的事件模型

• 由網景公司引入的 DOM0 級事件模型
  • 把事件處理程序綁定到 DOM 元素的屬性上： 

    • ele.onclick();
      ele.onDOMContentLoad();
      ele.onload();
      ele.onmousemove();

 

• • 解綁：

    • ele.onclick = null;

 

• • 取消事件冒泡

    • return false;

 

• • 缺點：若是同一元素綁定多個同類型的事件處理程序，只有最後一個生效。

 

• W3C 定義的 DOM2 級事件模型
• w3c 定義了兩個方法來操做事件
  • 綁定事件
    • addEventListener(evenStr, func, false);

 

• • • 解綁事件
      • removeEventListener(eventStr, func);

 

• • • 取消事件冒泡 
      • event.stopPropagation();

 

• jQuery 封裝了事件模型
  • 綁定事件
  • $("#ulList").on("click", "li", func);

 

• • 解綁事件
    • $("#ulList").off("click", func);

 

• • 主動觸發事件
    • $("#ulList li.current").trigger("click");
    • 會產生事件冒泡
    • 會執行瀏覽器默認行爲
    • 對於 <input id="Txt" type="text">哈哈</input> 還會自動選中文本:    $("#Txt").trigger("select");
    • $("input").triggerHandler("focus");   
      • 不會產生事件冒泡
      • 不會執行瀏覽器默認行爲
      • 如果元素集合，灰灰觸發第一個元素

 

• • 關於 jQuery 取消事件冒泡
    • 使用 event.stopPropagation();    即採用 DOM2 級事件模型
    • jQuery 不支持捕獲階段