前端面试必备技巧——DOM事件类-原创手记-慕课网

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 href="http://w3cschool.cc/">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>