常用的浏览器内核。
-
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事件详解
网友评论