静态绑定

直接把事件写在标签元素中

<div id="div" onclick="fun()">click</div>
<script>
    function fun(){           
        console.log("fun函数");
    }
</script>

<div id="div" onclick="fun(this)">click</div>
<script>
    // 传DOM元素
    function fun(self){           // 形参不能是this;
        console.log("fun函数");
        console.log(self);   // self: dom对象  <div onclick="fun(this)">click</div>
    }
</script>

动态绑定

<span id="sp1">span</span>
<script>
    var ele = document.getElementById("sp1");
    ele.onclick = function () {  //绑定事件:dom.on事件
        console.log(this);    // this直接用: <span id="sp1">span</span>
        console.log(typeof this)  // object
    };
</script>

一个元素本身可以绑定多个不同的事件, 但是如果多次绑定同一个事件,则后面的事件代码会覆盖前面的事件代码

多个标签绑定事件

<ul>
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ul>
<script>
    var eles = document.querySelectorAll("ul li");
    for(var i=0;i<eles.length;i++){
        eles[i].onclick = function (){
            console.log(this.innerHTML)
            // console.log(eles[i].innerHTML)  // 结果？
        }
    }
</script>