「js」点击事件的3种实现与事件覆盖

1.行内绑定点击事件
<div class="hello" id="hello1" onclick="hello()">点我呀</div>
该方法只能绑定一个处理函数。

2.onclick绑定点击事件

    <div class="hello" id="hello1">点我呀</div>
    <div class="hello" id="hello2">点我呀</div>
    <div class="hello" id="hello3">点我呀</div>

    var elements = document.getElementsByClassName("hello");
    var len = elements.length;
    for(var i=0; i<len; i++) {
        elements[i].onclick = function() {
            alert("Hello World! onclick1");
        };
        elements[i].onclick = function() {
            alert("Hello Baby! onclick2");
            console.log(this);
        };
    }

运行结果，点击div时，只执行了第二次绑定的onclick函数体里的内容，并能正确的打印出对应的DOM结点。

由此可见：onclick绑定点击事件，后绑定的会覆盖先绑定的事件处理，最后绑定的事件生效。

3.addEventListener绑定点击事件

    <div class="hello" id="hello1">点我呀</div>
    <div class="hello" id="hello2">点我呀</div>
    <div class="hello" id="hello3">点我呀</div>

    var elements = document.getElementsByClassName("hello");
    var len = elements.length;
    for(var i=0; i<len; i++) {
        elements[i].addEventListener('click',function(){
            alert("Hello World! addEventListener1");
        });
        elements[i].addEventListener('click',function(){
            alert("Hello Baby! addEventListener2");
            console.log(this);
        });
    }

运行结果，点击div时，两次绑定的click事件都执行了，能正确的打印出对应的DOM结点。

由此可见：addEventListener绑定点击事件，可以实现对同一元素绑定多个事件。