前端知识填坑记（一）：浏览器内核，事件委托

常用的浏览器内核。

• Trident内核代表产品Internet Explorer，又称其为IE内核。 Trident，是微软开发的一种排版引擎。
• Gecko内核代表作品Mozilla Firefox，Gecko是一套开放源代码的、以C++编写的网页排版引擎。Gecko是最流行的排版引擎之一，仅次于Trident。
• WebKit内核代表作品Safari、Chromewebkit是一个开源项目，包含了来自KDE项目和苹果公司的一些组件，主要用于Mac OS系统，它的特点在于源码结构清晰、渲染速度极快。缺点是对网页代码的兼容性不高，导致一些编写不标准的网页无法正常显示。主要代表作品有Safari和Google的浏览器Chrome。
• Presto内核代表作品Opera Presto是由Opera Software开发的浏览器排版引擎，供Opera 7.0及以上使用。

.bind() .live() .delegate() .on()

• bind(type,[data],fn)为每个匹配元素的特定事件绑定事件处理函数；

·$("a").bind("click",function(){alert("ok");});

• live(type,[data],fn)给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的；

$("a").live("click",function(){alert("ok");});

• delegate(selector,[type],[data],fn)指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数

$("#container").delegate("a","click",function(){alert("ok");})

• on(events,[selector],[data],fn)在选择元素上绑定一个或多个事件的事件处理函数

差别

• .bind()是直接绑定在元素上。
• .live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。
• .delegate()则是更精确的小范围使用事件代理，性能优于.live()。
• .on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制。

jQuery中.bind() .live() .delegate() .on()的区别

事件委托

onclick，onmouseover，onmouseout等事件，利用冒泡的原理，把事件加到父级上，触发执行效果。

栗子

<ul id="ul">
  <li>aaaaaaaa</li>
  <li>bbbbbbbb</li>
  <li>cccccccc</li>
</ul>

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

  for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
      this.style.background = "red";
    }
    aLi[i].onmouseout = function(){
      this.style.background = "";
    }
  }
}

但是如果说我们可能有很多个li用for循环的话就比较影响性能。

下面我们可以用事件委托的方式来实现这样的效果。

window.onload = function(){
  var oUl = document.getElementById("ul");
  var aLi = oUl.getElementsByTagName("li");

/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
  oUl.onmouseover = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "red";
    }
  }
  oUl.onmouseout = function(ev){
    var ev = ev || window.event;
    var target = ev.target || ev.srcElement;
    //alert(target.innerHTML);
    if(target.nodeName.toLowerCase() == "li"){
    target.style.background = "";
    }
  }
}

DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式
[解惑]JavaScript事件机制
原生JavaScript事件详解

前端知识填坑记（二）：call和apply，bind ，new