您的位置：首页 > Web前端 > JavaScript

javascript 事件冒泡的补充

2011-05-27 22:19 155 查看

scroll在IE8-9中无法捕获,由于又不能冒泡,因此无法使用事件代理.它在FF下可以通过捕获来处理.

focus与blur事件在IE下可以通过focusin与focusout事件来模拟,但对于那些不能非表单元素或链接或图片等一般元素,我们需要给它设置tabIndex,才能让它拥有捕获焦点或失去焦点的能力.在某些非常新的标准浏览器中,可以使用DOMFocusIn,DOMFocusOut来模拟,但这种不能使用onXXX调用的事件随时可能废弃,因此我也不会用它们来模拟.focus,blur的事件代理.

<!doctype html>
<html>
<head>

<title>事件系统笔记司徒正美</title>

<style>
div.test {
width:400px;
height:320px;
margin:0 15px;
background-color:#D6EDFC;
overflow: auto;
float:left;
}
div.test1{
height: 200px;
background: red;
}

</style>

<script>

window.onload = function(){

var el = document.getElementById("test");
el.addEventListener("DOMFocusIn",function(e){
console.log(e.type)
},false)

el.addEventListener("DOMFocusOut",function(e){
console.log(e.type)
},false);

el.addEventListener("focus",function(e){
console.log(e.type)
},false)

el.addEventListener("blur",function(e){
console.log(e.type)
},false);

}

</script>
</head>
<body>
<h1>mouseenter与mouseleave</h1>
<div class="test" id="test" tabIndex="-1" >
<div class="test1" tabIndex="-1" ></div>
</div>

</body>
</html>

运行代码

scroll 只能用于两个DIV之间或window中,这时要求存在滚动条.在IE中,不能冒泡也无法用捕获,在标准浏览器中冒泡情况也非常混乱,只重要的是要判定是否存在滚动条,因此也不打算支持其事件代理.

//让IE与w3c支持focus与blur与select的代理
"focus_focusin,blur_focusout,select_selectstart".replace(/\w+/g,function(types){
types = types.split("_");
events.special[  types[0] ]  = {
liveType: DOC.dispatchEvent ? types[0] : types[1],
livePhase:!!DOC.dispatchEvent,
liveSetup: function(node, type, _, phase){
enableFocusin(node);
dom.bind(node,type,function(e){
e = events.fix(e);
dom.log("让IE与w3c支持focus与blur与select的代理")
e.type = types[0];
events.handle.call(this,e);
},phase);
}
}
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航