JS 事件

一、HTML标签

    <div style="width:100px;height:100px;border:1px solid red;overflow:auto;" id="box">
        <div style="width:50px;height:50px;border:1px solid red" id="content"></div>
    </div>

二、绑定方式

1、HTML DOM 事件

        var dom_box = document.getElementById("box");
        dom_box.onclick = function () {
            console.log("第一次绑定事件");
        }
        dom_box.onclick = function () {
            console.log("第二次绑定事件，这个会覆盖地之前的事件");
        }

直接使用js来指定 onclick事件，新绑定的事件会覆盖之前的事件。 

2、使用 addEventListener 绑定事件(IE8 对应 attachEvent())

        var dom_box = document.getElementById("box");
        dom_box.onclick = function () {
            console.log("第一次绑定事件");
        }
        dom_box.addEventListener("click", function (e) {
            console.log('使用 addEventListener 绑定事件');
        });
        dom_box.addEventListener("click", function () {
            console.log('使用 addEventListener 重新绑定事件');
        });

使用addEventListener 来绑定事件，不会覆盖之前的事件，也不会覆盖onclick绑定的事件。 

3、使用Jquery绑定事件

        var dom_box = document.getElementById("box");
        dom_box.onclick = function () {
            console.log("第一次绑定事件");
        }
        dom_box.addEventListener("click", function (e) {
            console.log('使用 addEventListener 绑定事件');
        });
        dom_box.addEventListener("click", function () {
            console.log('使用 addEventListener 重新绑定事件');
        });

        $box = $(dom_box);
        $box.on("click", function () {
            console.log('使用 Jquery 绑定事件');
        });
        $box.on("click", function () {
            console.log('使用 Jquery 重新绑定事件');
        });

使用JQuery来绑定事件，不会覆盖之前的事件，也不会覆盖onclick绑定的事件。 

JQuery中的事件本质上和JS的事件是没有关系的，由JQuery重新实现的。

 

三、其他

1、js绑定事件分为冒泡和捕获两种情况

2、冒泡执行顺序，先执行子元素的事件，再执行父元素的事件

3、捕获执行顺序，先执行父元素的事件，再执行子元素的事件

4、在既有捕获又有冒泡的情况下，先从外层一层一层往内执行捕获，一直到目标元素，目标元素按照绑定顺序执行。然后继续往外执行冒泡。

这里将流程划分为三部分：1、从外往内执行捕获。 2、达到目标元素后，按绑定顺序执行。3、从内往外冒泡

5、dom动画发生时，取到的dom数据是动画前的

6、停止事件的传播 e.stopPropagation(); 

停止默认事件 event.preventDefault();

停止事件的传播和冒泡 return false;

执行e.stopPropagation()可以让事件不传播到下一步骤（第4点中说的三个步骤），并且不传播的下一个dom节点。在第二步的同dom节点不受影响。

        
        $("#content").click(function (e) {
            //$(this).height(200); //第一次,直接改变高度
            $(this).animate({ "height": 200 }, 2000, function () {
                console.log("end");
            }).stop(true, true);//第二次，缓慢改变高度
            //e.preventDefault();
            console.log("content 冒泡1");
        });
        $("#content").click(function (e) {
            console.log('content 冒泡2', $(this).height());
        });
        $("#content").on("click", function () {
            console.log('content 冒泡3', $(this).height());
        });
        $("#content")[0].addEventListener("click", function (e) {
            console.log('content 捕获1', $(this).height());
        }, true);
        $("#content")[0].addEventListener("click", function () {
            console.log('content 捕获2', $(this).height());
        }, true);

        $("#box").click(function () {
            console.log('box 冒泡1', $("#content").height());
        });
        $("#box").on("click", function () {
            console.log('box 冒泡2', $("#content").height());
        });
        $("#box")[0].addEventListener("click", function (e) {
            console.log('box 捕获1', $("#content").height());
            e.stopPropagation();
        }, true);
        $("#box")[0].addEventListener("click", function (e) {
            console.log('box 捕获2', $("#content").height());
            //e.stopPropagation();
        }, true);


        $("#box").on("scroll", function () {
            console.log("resize");
        });

 7、jquery on 绑定

jquery on 可以将子dom的事件绑到父节点上。执行顺序是 1、绑定在子节点的事件，2、绑定在父节点的子节点的事件 3、父节点的事件

        $("#box").on("click", function () {
            console.log('box 冒泡1', $(this).height());
        });
        $("#box").on("click","#content", function () {
            console.log('content 冒泡2', $("#content").height());
        });
        $("#content").on("click", function () {
            console.log('content 冒泡3', $(this).height());
        });

 8、各种绑定冒泡事件的总结

8-1.选择器匹配到的元素比较多时，不要用bind() 或者 click(function(){})迭代绑定，会绑定很多事件

8-2.用delegate()或者on()，可以动态给子节点添加的绑定事件，绑定这个节点不能是动态的。

8-3.用delegate()和on()方法，dom树不要太深，因为一层一层冒泡上来影响性能。

9、自定义事件

        $("#box").click(function (e) {
            $("#box").trigger("clickCustom",["a","b"]);
        });

        $("#box").on("clickCustom",function () {
            console.log(arguments);
        });