<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
div {padding: 50px;}
#div1 {background: red;}
#div2 {background: blue;}
#div3 {background: green; position: absolute; top: 300px;}
</style>
<script>
window.onload = function() {
var oDiv1 = document.getElementById(‘div1‘);
var oDiv2 = document.getElementById(‘div2‘);
var oDiv3 = document.getElementById(‘div3‘);
function fn1() {
alert( this.id );
}
//依次执行321
oDiv1.onclick = fn1;
oDiv2.onclick = fn1;
oDiv3.onclick = fn1;
//false表示冒泡
//告诉div1，如果有一个 出去 的事件触发了你，你就去执行fn1这个函数，先执行3最后执行1。
oDiv1.addEventListener(‘click‘, fn1, false);
oDiv2.addEventListener(‘click‘, fn1, false);
oDiv3.addEventListener(‘click‘, fn1, false);
//告诉div1，如果有一个 进去 的事件触发了你，你就去执行fn1这个函数，先执行1最后执行3。
oDiv1.addEventListener(‘click‘, fn1, true);
oDiv2.addEventListener(‘click‘, fn1, true);
oDiv3.addEventListener(‘click‘, fn1, true);
oDiv1.addEventListener(‘click‘, function() {
alert(1);
}, false);
oDiv1.addEventListener(‘click‘, function() {
alert(3);
}, true);
oDiv3.addEventListener(‘click‘, function() {
alert(2);
}, false);
//执行321
}
</script>
</head>
<body>
点击div3时，进来的点击事件（事件捕获）从1到3，出去的点击事件（事件冒泡）从3到1.每个div经历2个点击事件。
<div id="div1">
<div id="div2">
<div id="div3"></div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
/*
第一种事件绑定形式的取消
*/
function fn1() {
alert(1);
}
function fn2() {
alert(2);
}
document.onclick = fn1;
document.onclick = null; //取消，如果是通过attachEvent实现的绑定则不能这么取消。
/*
ie : obj.detachEvent(事件名称，事件函数);
标准 : obj.removeEventListener(事件名称，事件函数，是否捕获);
*/
document.attachEvent(‘onclick‘, fn1);
document.attachEvent(‘onclick‘, fn2);
document.detachEvent(‘onclick‘, fn1);
document.addEventListener(‘click‘, fn1, false);//绑定出去的函数
document.addEventListener(‘click‘, fn1, true);//绑定进来的函数
document.addEventListener(‘click‘, fn2, false);
document.removeEventListener(‘click‘, fn1, false);//取消出去的函数
</script>
</head>
<body>
</body>
</html>
时间： 2024-11-07 03:48:30