js事件监听

document.addEventListener("click",clickHandler);

DOM.addEventListener(事件类型,事件回调函数);

给DOM元素添加一个事件侦听（监听）,只能收到对应事件类型的消息，当收到click这个消息，执行事件回调函数.

 

        function clickHandler(e){
            console.log(e)
        }

 

事件回调函数

e  有且仅有一个参数e

e 是一个事件对象,侦听事件收到消息时获得的事件对象.

 

事件都是先侦听再抛发的 

 

捕获  ------>   2：目标  ------>   3：冒泡

 

1：捕获   从在外层向里依次捕获，这时获取的元素排序就是从外往里依次排序.

 

2：目标   就是捕获到达了我们点击的目标（自己理解的）.

 

3：冒泡   是在捕获到达目标后，开始原方向返回时回再次经历每个元素，这时获取的元素排序就是从里往外依次排序，与捕获相反.

 

        var div0 = document.querySelector(".div0");
        var div1 = document.querySelector(".div1");
        var div2 = document.querySelector(".div2");

        div0.addEventListener("click", clickHandler0);
        div1.addEventListener("click", clickHandler1);
        div2.addEventListener("click", clickHandler2);

        function clickHandler0(e) {
            console.log("点击div0");
        }
        function clickHandler1(e) {
            console.log("点击div1");
        }
        function clickHandler2(e) {
            console.log("点击div2");
        }

 

这是事件应用的写发，这里有三个重叠的三个矩形。当你点击最里面的矩形时.

他是先打印出的最里面的div在依次往外打印出其他的矩形.这说明他是在冒泡阶段开始打印的.

 

 

 

逆战班