前端开发技术dom事件小总结

前端开发技术dom|前端开发者
1.三种事件形式
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
<metacharset=”UTF-8″>
<metaname=”viewport” content=”width=device-width, initial-scale=1.0″>
<metahttp-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body onclick=”alert(‘触发内联属性事件’)”>
<div>click me</div>
</body>
<script>
vardiv=document.querySelector(‘div’);
div.onclick=function(){
alert(“触发属性事件”);
};
div.addEventListener(‘click’,function(){
alert(‘触发addEventListener’);
},false);
</script>
</html>

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.移除事件
html 代码

<body>
<div>click to say hi</div>
</body>
<script>
varsayHi=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.事件状态对象
html 代码

<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属性
html 代码

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

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

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

7.阻止默认事件
html 代码

<body>
<ahref=”http://www.baid.com”>链接</a>
<inputtype=”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.阻止事件冒泡
html 代码

<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.阻止冒泡和其他相同事件监听器
html 代码

<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.自定义事件
html 代码

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

11.模拟鼠标点击事件
html 代码

<body>
<div>自动触发</div>
</body>
<script>
vardiv=document.querySelector(‘div’);
div.addEventListener(‘click’,function(){
alert(‘click’);
})
varautoClick=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.事件委托
html 代码

<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);
}
});
</script>

前端开发技术dom|网站前端开发

https://www.rokub.com

» 本文来自:前端开发者 » 《前端开发技术dom事件小总结》
» 本文链接地址:https://www.rokub.com/3112.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!