前端面試必備技巧——DOM事件類
標簽：
JavaScript
1.基本概念:DOM事件的级别
DOM0
<a href="JavaScript:;" onclick="a();">test</a>
element.onclick=function(){}2. DOM2
```
//false表示事件句柄在冒泡阶段执行
element.addEventListener('click',function(){},false)
```3 DOM3
```
//DOM3新增了事件类型，鼠标、键盘事件等
element.addEventListener("keyup",function(){},false)
```2.DOM事件模型
事件模型指的就是捕获和冒泡。捕获从上往下，冒泡从下往上。
3.DOM事件流
事件流指的是浏览器在当前页面与用户做交互的过程，比如:点击鼠标左键，这个左键是怎么传到这个页面上，这就是事件流。
完整事件流分三个阶段: 1.捕获 目标阶段 冒泡
4.描述DOM事件捕获的具体流程
window > document > html > body >...(html结构) > 目标元素
5.Event对象的常见应用
event.preventDefault() 阻止元素发生默认的行为。
```
<a >Go to W3Cschool.cc</a>
$("a").click(function(event){
event.preventDefault(); //阻止a标签页面跳转默认行为
});
```2. event.stopPropagation() 阻止冒泡行为
```
parent.addEventListener("click",function(){
console.log("parent");
},false);
span.addEventListener("click",function(){
event.stopPropagation();
console.log("span");
},false)
```3 event.stoplmmediatePropagation()
阻止冒泡和这个元素绑定的同类型事件
```
<!DOCTYPE html>
<html>
<head>
<style>
p { height: 30px; width: 150px; background-color: #ccf; }
div {height: 30px; width: 150px; background-color: #cfc; }
</style>
</head>
<body>
<div>
<p>paragraph</p>
</div>
<script>
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第一个监听函数");
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第二个监听函数");
event.stopImmediatePropagation();
//执行stopImmediatePropagation方法,阻止click事件冒泡,并且阻止p元素上绑定的其他click事件的事件监听函数的执行.
}, false);
document.querySelector("p").addEventListener("click", function(event)
{
alert("我是p元素上被绑定的第三个监听函数");
//该监听函数排在上个函数后面,该函数不会被执行.
}, false);
document.querySelector("div").addEventListener("click", function(event)
{
alert("我是div元素,我是p元素的上层元素");
//p元素的click事件没有向上冒泡,该函数不会被执行.
}, false);
</script>
</body>
</html>
```- 4 event.currentTaget
currentTarget始终是监听事件者
- 5 event.target
而target是事件的真正触发者
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div id="parent">父亲
<div id="child">儿子
<div id="son">孙子</div>
</div>
</div>
<script type="text/javascript">
var parent=document.getElementById('parent');
var child=document.getElementById('child');
var son=document.getElementById('son');
parent.addEventListener('click',function(event){
var currentTarget=event.currentTarget;
var target=event.target;
console.log(currentTarget.id);
console.log(target.id);
},false)
</script>
</body>
</html>6.自定义事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="ev">
<style type="text/css">
#ev{
width: 300px;
height: 100px;
background: red;
color: #fff;
text-align: center;
line-height: 100px;
}
</style>
目标元素
</div>
<script type="text/javascript">
var ev=document.getElementById('ev');
//DOM2 ，window浏览器,true捕获阶段触发
window.addEventListener("click",function(){
console.log('window captrue');
},true);
//document文档
document.addEventListener('click',function(){
console.log('document captrue');
},true);
// document.documentElement===html
document.documentElement.addEventListener('click',function(){
console.log('html captrue');
},true);
// document.body===body
document.body.addEventListener('click',function(){
console.log('body captrue');
},true);
//目标元素
ev.addEventListener("click",function(){
console.log('ev captrue');
},true);
/* 自定义事件 */
//创建一个自定义事件实例
var eve =new Event('test');
//绑定事件
ev.addEventListener('test',function(){
console.log('test dispatch');
})
//触发事件
ev.dispatchEvent(eve);
</script>
</body>
</html>點擊查看更多內容
為 TA 點贊
評論
評論
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
正在加載中
感謝您的支持，我會繼續努力的～
掃碼打賞，你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃，即可進行掃碼打賞哦