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 不支持捕获阶段