1. There are three common methods for event binding:
(1) Bind directly in DOM element
(2) Binding in js code;
(3) Binding event listener

Direct binding in DOM element:

<input type='button' onclick='fn()'>
    <script>
        function fn(){
            console.log('hello');
    }           
    </script>

Bind directly in js code:
It looks convenient. You don't need to look at html anymore

    document.getElementById('btn').onclick = function(){
    console.log('hello');
}

Bind event listener function addEventListener() or attachEvent()

Event monitoring: three event stages are defined, namely capture stage, target stage and bubbling stage

Event monitoring in chrome browser:
element.addEventListener(DOM event name, execute function when event is triggered, specify whether it is bubbling execution, false is bubbling)

document.getElemengById('btn1').addEventListener('click',aaa);
function aaa(){
    console.log('aaaa');
}

IE standard:
DOM event name, must add 'on'

element.attachEvent('onclick',aaa);
function aaa(){
    console.log('aaaa');
}

Advantages of event monitoring:
1. Multiple events can be bound

Common event binding:

<script>
    var btn = document.getElementById('btn3');
    btn.onmouseover = function(){
        console.log('This will not be executed. It is overwritten by the following');
    }
    btn.onmouseover = function(){
        console.log('This will overwrite the above binding event and only execute this')
    } 
</script>

Listening event binding: addEventListener DOM event name does not add on
attachEvent DOM event name plus on

var btn = document.getElementById('#btn');
    btn.addEventListener('click',a1);
    btn.addEventListener('click',a2);
    function a1(){
        console.log('Both events execute');
    }
    function a2(){
        console.log('Both events execute');
    }

Unbind:

So a2 doesn't execute
function a2(){
        console.log('No execution ');
    }
btn.removeEventListener('click',a2);

Encapsulate perfect monitor event

function listen(ele,type,fn){
    if(ele.addEventListener){
        //chrome
        ele.addEventListener(type,fn);
    }else{
        //ie
        ele.attachEvent('on'+type,fn);
    }
}

Event delegation:
Delegate the event to the parent element, use the bubbling principle, simplify the code, improve the execution effect, improve the processing speed, and reduce the memory occupation

var btn = document.getElementById('btn');
document.onclick = function(event){
    event = event || window.event;
    var target = event.target || event.srcElement;
    if(target == 3){
        alert(2);
        alert(1);
    }
}

Entrust:

var li1 = document.getElementById('li1');
var li2 = document.getElementById('li2');
document.addEventListener('click',function(event){
    var target = event.target;
    if(target == li2){
        alert('li2');
    }
})

Event binding can be performed on DOM elements created dynamically:
The newly created element cannot be event bound when the binding event is traversed normally
And the commission can

    document.addEventListener('click',function(event){
        var target = event.target;
        if(target.nodeName == 'LI'){
            alert(target.innerHTML);
        }
    })
    //Add li dynamically
    var node=document.createElement("li");
    var textnode=document.createTextNode("item4");
    node.appendChild(textnode);
    list.appendChild(node);
    //Clicking on item4 is reactive, so it works for dynamically created elements