1.绑定事件的方式

1.1 onclick方式


直接绑定的方式,只会触发一次_

  1. <button>点我</button>
  2. <script>
  3.     var btn = document.getElementsByTagName("button")[0];
  5.     //这种事件绑定的方法容易被层叠。
  6.     btn.onclick = function () {
  7.         console.log("事件1"); //被事件2覆盖
  8.     }
  10.     btn.onclick = function () {
  11.         console.log("事件2"); //控制台只显示事件2
  12.     }
  14. </script>
  1.       ![test7.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567256463895-56e4f84c-3e5d-4bd0-b549-ff4889b420a8.gif#align=left&display=inline&height=295&name=test7.gif&originHeight=295&originWidth=222&size=37636&status=done&width=222)

1.2 addEventListener方式

addEventListener(event,function,boolean)
true — >事件捕获
false —>事件冒泡

<button>按钮</button>
<script>
    var btn = document.getElementsByTagName("button")[0];
    //addEventListener: 事件监听器。 原事件被执行的时候，后面绑定的事件照样被执行
    //第二种事件绑定的方法不会出现层叠。（更适合团队开发）
    btn.addEventListener("click", fn1);
    btn.addEventListener("click", fn2);
    function fn1() {
        console.log("事件1");
    }
    function fn2() {
        console.log("事件2");
    }

</script>

       ![test8.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567256898065-7001b642-fa22-4512-8894-3206b82dc8ad.gif#align=left&display=inline&height=323&name=test8.gif&originHeight=323&originWidth=224&size=20054&status=done&width=224)

2.事件冒泡和事件捕获

4.事件对象Event和冒泡 - 图1

事件冒泡

事件冒泡:父元素和子元素绑定了相同的事件,子元素的事件执行,父元素的事件也会触发
点击子元素，会先弹出child，再弹出parent.

<style>
        #parent {
            width: 200px;
            height: 200px;
            background: red;
        }

        #child {
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
        </div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var child = document.getElementById("child")
        parent.onclick = function(){
            alert("parent")
        }
        child.onclick = function(){
            alert("child")
        }  
    </script>
</body>

    ![test9.gif](https://cdn.nlark.com/yuque/0/2019/gif/446381/1567257530912-d8f10670-ddb4-428d-b7ca-7c24be402ae3.gif#align=left&display=inline&height=345&name=test9.gif&originHeight=345&originWidth=891&size=45165&status=done&width=891)

阻止事件冒泡: event.stopPropagation()

parent.onclick = function(event){
            alert("parent")
            event.stopPropagation()
        }
        child.onclick = function(event){
            alert("child")
            event.stopPropagation()
        }

事件捕获

从不太具体的节点 最早接收事件,而最具体的节点 最后接收事件点击子元素，会先弹出parent，再弹出child

 <style>
        #parent {
            width: 200px;
            height: 200px;
            background: red;
        }

        #child {
            width: 100px;
            height: 100px;
            background: yellow;
            margin: 50px;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="child">
        </div>
    </div>
    <script>
        var parent = document.getElementById("parent");
        var child =  document.getElementById("child");
        child.addEventListener('click',function(){
            alert("child")
        },true)
        parent.addEventListener('click',function(){
            alert("parent")
        },true)
    </script>

test9.gif