事件冒泡、事件捕获、事件委托

本文链接： https://blog.csdn.net/Reagan_/article/details/81564074

事件处理模型–事件冒泡、捕获

不论是冒泡还是捕获都是在说事件发生的顺序。

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（子元素先执行，父元素再执行）

事件捕获：

结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（父元素的功能先执行，子元素再执行）

IE没有捕获事件
触发顺序：先捕获，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡。

有时候我们不需要事件冒泡或者是它影响了我们的话，我们可以取消它。

取消冒泡和阻止默认事件

取消冒泡：

W3C标准event.stopPropagation();但不支持ie9以下版本
IE独有event.cancelBubble = true;
封装取消冒泡函数stopBubble(event)

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
    function stopBubble(event) {
        if(event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
    </script>
</body>

阻止默认事件：

默认事件–表单提交，a标签跳转，右键菜单等
1.return false;以对象属性的方式注册的事件才生效
2.event.preventDefault();W3C标注，IE9以下不兼容
3.event.returnValue = false;兼容IE
封装阻止默认事件的函数cancelHandler(event);

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
    function cancelHandle(event) {
        if(event.preventDefault) {
            event.preventDefault();
        }else{
            event.retrunValue = false;
        }
    }
    </script>
</body>

事件对象

event||window.event用于IE
事件源对象（指当前触发的函数，例如当前点击的函数）：

event.target 火狐只有这个
event.srcElement IE只有这个
这两个chrome都有
兼容性写法：

<body>
    <div style = "width:100px;height:100px;background-color:red;"></div>
    <script type="text/javascript">
        wrapper.onclick = function(e) {
            var event = e || window.event;   //事件对象
            var target = event.target || event.srcElement;  //事件源对象
    </script>
</body>

事件委托

事件委托就好比一种方法，来帮助我们简化效率，大多数用于“在我们需要绑定所有子元素时，一个一个绑定效率太低且不利于后来的灵活变化，所以我们利用事件冒泡的属性，来建立一种事件委托的方法。”

利用事件冒泡，和事件源对象进行处理

优点：
1.性能好：不需要循环所有的元素一个个绑定事件
2.灵活：当有新的子元素时不需要重新绑定事件
例题：
设计一个程序，点击li能打印相应的序号。

<body>
    <ul>
    <li>1<li>
    <li>2<li>
    <li>3<li>
    <li>4<li>
    <li>5<li>
    <li>6<li>
    <li>7<li>
    <li>8<li>
    </ul>
    <script type="text/javascript">
        var ul = document.getElementsByTagName('ul')[0];
        ul.onclick = function(e) {
            var event = e || window.event;   //事件对象
            var target = event.target || event.srcElement;  //事件源对象
            cosnole.log(target.innerText);    //（target：事件源对象）每次执行时，都打印的是它的事件源对象（表示当前所点击的对象）
        ｝
    </script>
</body>

我们并未给li添加任何事件，但是当我们点击li（事件源对象）时，会触发事件冒泡，使得ul的事件得以执行，这样不必为li一个一个添加事件，用事件冒泡的方法，显得很灵巧又高效，这就是事件委托。

事件冒泡、事件捕获、事件委托

事件处理模型–事件冒泡、捕获

取消冒泡和阻止默认事件

事件对象

事件委托

猜你喜欢