3种绑定事件的方法和优缺点
 
html事件点击：编写简单，但css和js耦合深，不分离
 
事件绑定：让css和js解耦分离，但只能绑定一个事件，多个事件会被最后绑定的事件覆盖
 
事件监听：让css和js解耦分离，并且可以绑定多个事件
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- html事件点击 -->
    <button type="button" onclick="fun()">click me</button>

    <!-- 事件绑定 -->
    <button type="button" id="test">click me1</button>

    <!-- 事件监听 -->
    <button type="button" id="test1">click me2</button>


    <script>
        // html事件点击
        function fun() {
            alert("html事件点击");
        }

        //事件绑定
        var test = document.getElementById("test");
            test.onclick = function () {
                alert("事件绑定")
            }

        //事件监听
        var test1 = document.getElementById("test1");
        test1.addEventListener("click", function(){
            alert("单个事件监听")
        });
        //事件监听给同个元素绑定多个事件
         test1.addEventListener("click", function () {
                alert("多个事件监听")
        });
    </script>
</body>
</html>

 
事件绑定和监听的不同可以如下理解：
事件绑定相当于绑定到DOM的属性，重复绑定会覆盖。而事件监听相当于添加属性到DOM对象，
多次监听，就会多次添加属性到DOM对象，所以都会触发，不会覆盖。
 

有需要的朋友可以领取支付宝到店红包，能省一点是一点