DOM事件代码小结

以下代码出自《DOM Enlightenment》一书
1.三种事件形式

 <body onclick="alert('触发内联属性事件')">
<div>click me</div>
</body>
<script>
var div = document.querySelector('div'); div.onclick = function() {
alert("触发属性事件");
}; div.addEventListener('click', function() {
alert('触发addEventListener');
}, false);
</script>

2.事件流程
先捕获后冒泡
捕获:从树主干到分支
冒泡:从树分支到主干

 <html>
<body>
<div>click me to start event flow</div>
</body>
</html>
<script>
// 捕获阶段 window
window.addEventListener('click', function() {
alert(1);
}, true); // 捕获阶段 document
document.addEventListener('click', function() {
alert(2);
}, true); // 捕获阶段 html
document.documentElement.addEventListener('click', function() {
alert(3);
}, true); // 捕获阶段 body
document.body.addEventListener('click', function() {
alert(4);
}, true); // 捕获阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(5);
}, true); // 冒泡阶段 div
document.querySelector('div').addEventListener('click', function() {
alert(6);
}, false); // 冒泡阶段 body
document.body.addEventListener('click', function() {
alert(7);
}, false); // 冒泡阶段 html
document.documentElement.addEventListener('click', function() {
alert(8);
}, false); // 冒泡阶段 document
document.addEventListener('click', function() {
alert(9);
}, false); // 冒泡阶段 window
window.addEventListener('click', function() {
alert(10);
}, false); </script>

3.移除事件

 <body>
<div>click to say hi</div>
</body>
<script>
var sayHi = function() {
alert('hi');
};
document.querySelector('div').addEventListener('click', sayHi, false); document.querySelector('div').removeEventListener('click', sayHi); document.body.addEventListener('click', function() {
alert('hello');
}, false); // 不是同一个回调,是不起作用的
document.body.removeEventListener('click', function() {
alert('hello');
});
</script>

4.事件状态对象

 <body>
<div>click me</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(event) {
console.dir(event);
}, false); window.addEventListener('load', function(event) {
console.dir(event);
}, false);
</script>

5.监听函数this指向
this指向绑定事件的节点,即event.currentTarget属性

 <body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(this);
alert(this == event.currentTarget)
});
</script>

6.获取事件触发元素(事件源头)

 <body>
<div>click me</div>
</body>
<script>
document.body.addEventListener('click', function(event) {
alert(event.target);
});
</script>

7.阻止默认事件

 <body>
<a href="http://www.baid.com">链接</a>
<input type="checkbox"/>
<textarea></textarea>
</body>
<script> // 点击链接时,阻止跳转
document.querySelector('a').addEventListener('click', function(e) {
e.preventDefault();
}); // 点击复选框时,阻止选中
document.querySelector('input').addEventListener('click', function(e) {
e.preventDefault();
}); // 在文本框中尝试输入字符时,阻止输入(使用输入法时,不一定会触发keypress事件)
document.querySelector('textarea').addEventListener('keypress', function(event) {
event.preventDefault();
});
</script>

8.阻止事件冒泡

 <body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert('div');
e.stopPropagation();
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>

9.阻止冒泡和其他相同事件监听器

 <body>
<div>click</div>
</body>
<script>
document.querySelector('div').addEventListener('click', function(e) {
alert(1);
});
document.querySelector('div').addEventListener('click', function(e) {
alert(2);
e.stopImmediatePropagation();
});
document.querySelector('div').addEventListener('click', function(e) {
alert(3);
});
document.body.addEventListener('click', function() {
alert('body');
});
</script>

10.自定义事件

 <body>
<div>click</div>
</body>
<script>
var customEvent = document.createEvent('CustomEvent');
// 参数是:name,bubble,cancelable,detail
customEvent.initCustomEvent('hello', true, false,{
msg: 'hello'
});
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
this.dispatchEvent(customEvent);
})
div.addEventListener('hello', function(e) {
alert(e.detail.msg);
})
</script>

11.模拟鼠标点击事件

 <body>
<div>自动触发</div>
</body>
<script>
var div = document.querySelector('div');
div.addEventListener('click', function() {
alert('click');
}) var autoClick = document.createEvent('MouseEvent');
// 参数是: name,bubble,cancelable,view,detail,screenx,screeny,clientx,clienty,ctrlkey,altkey,shiftkey,metakey,button,relatedTarget
autoClick.initMouseEvent('click', true, true, document.defaultView,0,0,0,0,0,false,false,false,0,null,null);
div.dispatchEvent(autoClick);
</script>

12.事件委托

 <p>点击某个单元格</p>
<table border="1">
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
</tr>
<tr>
<td>row 2 col 1</td>
<td>row 2 col 2</td>
</tr>
<tr>
<td>row 3 col 1</td>
<td>row 3 col 2</td>
</tr>
<tr>
<td>row 4 col 1</td>
<td>row 4 col 2</td>
</tr>
</table>
<script>
document.querySelector('table').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() == 'td') {
alert(event.target.textContent);
}
});
上一篇:Sublime远程连接Linux


下一篇:使用ntpdate校正linux系统的时间