js03.事件

概述:

　　 js事件是有级别的, 原生的事件, on开头的事件, 我们称之为dom0级事件, 还有dom2级事件.

1. dom0级事件和dom2级事件

阶段

dom事件是有阶段之说的:

　　一个事件分为捕获阶段, 冒泡阶段, dom0级事件只有冒泡阶段, 没有捕获阶段

　　捕获阶段 : window --> document --> body --> div

　　冒泡阶段: window <-- document <-- body <-- div

dom0级事件只有冒泡阶段,没有捕获阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.outer{
            position: relative;
             100px;
            height: 100px;
            background-color: red;
            margin: auto;

        }
        div.inner{
            position: absolute;
            margin-left: 30px;
            margin-top: 30px;
             40px;
            height: 40px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner">

        </div>
    </div>
    <script>
        // dom0级事件,是以onxxx开头的事件,只有冒泡阶段, 没有捕获阶段
        var inner = document.querySelector('.inner');
        var outer = document.querySelector('.outer');

        window.onclick = function(){
            alert('我是冒泡阶段的windo')
        };

        document.onclick = function(){
            alert('我是冒泡阶段的document')
        };

        document.body.onclick = function(){
            alert('我是冒泡阶段的body')
        };

        outer.onclick = function(){
            alert('我是外层的div 我触发了')
        };

        inner.onclick = function () {
            alert('我是内层div, 我触发了')
        }
    </script>
</body>
</html>

点击内层黄色的div, 发现所有点击事件都触发了,出发顺序从内层到外层依次出发, 这就称之为冒泡

dom2级事件

　　不仅仅有冒泡阶段,还有捕获阶段

　　语法: div.addEventListener(eventType, callback, 布尔值)

　　　　1: 第一个参数是事件的类型, click, dbclick, mouserover .....

　　　　2:第二个参数是回调函数,当事件触发的时候,回调函数会执行

　　　　3:如果布尔值是true,则表示该函数是捕获阶段,否则为冒泡阶段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            position: relative;
             100px;
            height: 100px;
            margin: auto;
            margin-top: 100px;
            background-color: red;
        }
        .inner{
            position: absolute;
            margin-top: 40px;
            margin-left: 40px;
             30px;
            height: 30px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="outer" class="outer">
        <div id="inner" class="inner">

        </div>
    </div>

    <script>
        var inner = document.getElementById('inner');
        var outer = document.getElementById('outer');

        // window对象的捕获阶段
        window.addEventListener('click', function () {
            alert('我是window的捕获阶段')
        }, true);

        document.addEventListener('click', function () {
            alert('我是document的捕获阶段')
        }, true);

        document.body.addEventListener('click', function () {
            alert('我是body的捕获阶段')
        }, true);

        outer.addEventListener('click', function () {
            alert('我是outer的捕获阶段')
        }, true);

        inner.addEventListener('click', function (argument) {
            alert('我执行了')
        }, true)
    </script>
</body>
</html>

点击最内层的div会发现从window开始由大到小依次执行点击事件的捕获阶段

单机事件的第三个参数设置为false时,改事件执行冒泡阶段

2. 事件的移除

　　dom2 级事件的移除方法是 removeEventListenr(eventtype, callback, 布尔值)

　　如果不传递第三个参数,默认是冒泡阶段

3.特殊事件

　　概述: 在js当中有两个非常出名的事件 onmouseenter 和 onmouseout 不冒泡

　　　　　onmouseenter和onmouseleave不会有冒泡事件

　　　　　onmouseover和onmouseout有冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #num1{
            position: relative;
             100px;
            height: 100px;
            background: red;
            margin: 50px auto;
        }
        #num2{
            position: absolute;
             50px;
            height: 50px;
            background-color: yellow;
            margin: 25px 25px;
        }
        #num3{
            position: absolute;
             25px;
            height: 25px;
            background-color: blue;
            margin: 12.5px 12.5px;
        }
    </style>
</head>
<body>
    <div id="num1">
        <div id="num2">
            <div id="num3">

            </div>
        </div>
    </div>
    <script>
        // var num1 = document.getElementById('num1');
        // num1.onmouseover = function(){
        //     console.log('我是mum1的mouseouver');
        // };
        // var num2 = document.getElementById('num2');
        // num2.onmouseover = function(){
        //     console.log('我是mum2的mouseouver');
        // };
        // var num3 = document.getElementById('num3');
        // num3.onmouseover = function(){
        //     console.log('我是mum3的mouseouver');
        // };
        var num1 = document.getElementById('num1');
        num1.onmouseenter = function(){
            console.log('我是mum1的mouseouver');
        };
        var num2 = document.getElementById('num2');
        num2.onmouseenter = function(){
            console.log('我是mum2的mouseouver');
        };
        var num3 = document.getElementById('num3');
        num3.onmouseenter = function(){
            console.log('我是mum3的mouseouver');
        };
    </script>
</body>
</html>