一、javascript事件监听的三种方法
element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
element.attachEvent('on' + type, listener); // IE6~10支持, IE11不支持
element.'on' + type = function(){} // 所有浏览器
以click 点击事件为例:
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div id="big">
<div id="small"></div>
</div>
<script>
window.onload = function(){
var oSmall = document.getElementById('small');
var oBig = document.getElementById('big');
//第一种:所有浏览器支持
oBig.onclick = function(){
console.log('Big Div');
}
//第二种:ie8及ie8以下不支持
oBig.addEventListener('click', function(){
console.log('Big Div');
}, true);
//第三种:ie6~ie10支持
oBig.attachEvent('onclick', function(){
console.log('Big Div');
});
}
</script>
</body>
</html>
二、事件捕获与事件冒泡
关于事件的捕获与冒泡,引用一段文字来说明:
很久以前有个叫Netscape的姑娘,她制订了Javascript的一套事件驱动机制(即事件捕获)
后来又有一个叫“IE”的小子,这孩子比较傲气,他认为“凭什么我要依照你的规则走”,于是他又创造了一套自己的规则(事件冒泡)
再后来,有个叫W3C的媒婆,想撮合这两个孩子,将他们的特点融合在了一起,这下,事件产生的顺序变成:
事件从根节点开始,逐级派送到子节点,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“捕获阶段(Capture)”;
执行完捕获阶段后,事件由子节点往根节点派送,若节点绑定了事件动作,则执行动作,然后继续走,这个阶段称为“冒泡阶段(Bubble)”。
善良的Netscape以及其姐妹们都接受了媒婆的建议,采用了新的事件规则,而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。
几个要点:
(1)通过 element.onclick、element.attackEvent('onclick', function(){}) 来监听事件,均为冒泡机制。例子:
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div id="big">
<div id="small"></div>
</div>
<script>
window.onload = function(){
var oSmall = document.getElementById('small');
var oBig = document.getElementById('big');
oBig.onclick = function(){
console.log('Big Div');
}
oSmall.onclick = function(){
console.log('Small Div');
}
// 当点击 div#small时,先后输出:
// Small Div
// Big Div
}
</script>
</body>
</html>
(2)w3c 标准中的 addEventListener 方法
W3C规范中定义了3个事件阶段,依次是捕获阶段、目标阶段、冒泡阶段(即上文引用文字中的蓝色字体部分)。addEventListener 中的第三个参数 true/false,规定了该事件在捕获阶段执行,还是在冒泡阶段执行。
实例说明:
<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div id="big">
<div id="small"></div>
</div>
<script>
window.onload = function(){
var oSmall = document.getElementById('small');
var oBig = document.getElementById('big');
oSmall.addEventListener('click', function(){
console.log('Small Div 捕获');
}, true);
oBig.addEventListener('click', function(){
console.log('Big Div 冒泡');
});
oBig.addEventListener('click', function(){
console.log('Big Div 捕获');
}, true);
document.addEventListener('click', function(){
console.log('Document 冒泡');
});
document.addEventListener('click', function(){
console.log('Document 捕获');
}, true);
}
</script>
</body>
</html>
输出顺序如下图所示:
当我们点击 div#small 元素时,它是这样的过程:
第一阶段 —— 捕获阶段:所以,"Document 捕获" 最先被执行,然后是“Big Div 捕获”,最后是“Small Div 捕获”;
第二阶段 —— 目标阶段:到达 div#small 元素,然后,下一步,进入到冒泡阶段;
第三阶段 —— 冒泡阶段:Small Div 没有事件冒泡,所以,冒泡到 Big Div,发现有事件冒泡,输出“Big Div 冒泡”, 再继续往上冒泡,最后输出“Document 冒泡”。整个过程结束。
三、事件监听在不同浏览器下兼容写法
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
文字引用:
http://www.cnblogs.com/aji88/archive/2012/07/20/2600492.html