事件处理机制:IE 、opera 是事件冒泡,火狐是事件捕获
事件冒泡
-
事件从事件目标(target)开始,往上冒泡直到页面的最上一级标签
事件捕获
-
事件从最上一级标签开始往下查找,直到捕获到事件目标(target)
-
事件由父元素向子元素传播
DOM 事件流
-
事件流:从页面接受事件的顺序 --> 事件冒泡 事件捕获
-
同时支持两种事件模型:捕获型事件和冒泡型事件,但是,捕获型事件先发生。两种事件流会触及 DOM 中的所有对象,从 document 对象开始,也在 document 对象结束
-
IE 和 DOM 事件流的区别
-
执行顺序不一样
-
参数不一样
-
事件加不加 on
-
this 指向问题
阻止冒泡事件
-
element1.addEventListener('click',doSomething2,false)
-
第三个参数默认值是false,表示在事件冒泡的阶段调用事件处理函数,如果参数为true,则表示在事件捕获阶段调用处理函数
-
window.event.cancelBubble = true IE
-
e.stopPropagation()
-
window.event ? window.event.cancelBubble = true : e.stopPropagation();
阻止浏览器默认行为
-
window.event ? window.event.returnValue = false : e.preventDefault();
-
原生 JavaScript 中的 return false 只阻止默认行为,不阻止冒泡
-
jQuery 中的 return false 既阻止默认行为又阻止冒泡
注册事件监听:
-
IE 、opera --> attachEvent( "on"+type,fn )
-
其他浏览器 --> addEventListener( type,fn,boolean ) --> boolean(true:捕获阶段)(false:冒泡阶段)
事件委托
-
利用事件冒泡的原理,让自己所触发的事件,让它的父元素代替执行
jQuery:
* $("ul").on("click","li",function(){}); 这样写有事件委托,$("ul li").on();这样写法则没有
* 需求:鼠标放到 li 上对应的 li 背景变灰
$("ul").on("mouseover",function(e){
$(e.target).css("background-color","#ddd").siblings().css("background-color","white");
})
* siblings() 获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的。
* $("p").siblings(".selected") 查找每个 p 元素的所有类名为 "selected" 的所有同胞元素
原生JS:
function () {
var ul = document.getElementsByTagName('ul')[0];
ul.onclick = function (e) {
e = e || window.event
var target = e.target || e.srcElement; // 获取事件的来源对象
..............
}
}