阻止默认事件，事件委托和周期

Posted cxf1214

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了阻止默认事件，事件委托和周期相关的知识，希望对你有一定的参考价值。

事件周期

  1. 事件捕获

    dom对象从最外层开始，逐层向下记录每一个dom对象上有没有绑定该事件，如果有记录下来

    执行顺序：从外层向内层 直到目标元素截止

  2. 事件目标 事件触发

    目标元素的事件触发

  3. 事件冒泡

    从目标元素开始，逐层向上冒泡触发（捕获阶段记录的绑定的事件）

    执行顺序：由内向外

1，当祖先元素和后代元素都绑定的相同的事件时，后代元素的事件触发，祖先的元素的事件也会触发

2，祖先元素的事件，后代元素也可以触发（后代元素没有绑定该事件）

事件监听：

el.addEventListener(‘事件名‘,fn[,true/false]);

第三个：是否在捕获阶段就提前触发 默认是false

如何阻止事件冒泡

dom标准：
    事件对象下调用一个方法就可以阻止
    e.stopPropagation()
ie下
    e.cancelBubble = true;
    
    兼容性写法：
        if(e.stopPropagation)
            e.stopPropagation()
        else
            e.cancelBubble = true;
        
    三目
        e.stopPropagation?e.stopPropagation():e.cancelBubble = true;
    try..catch()
        try
            e.stopPropagation();
        catch()
            e.cancelBubble = true;

阻止默认事件

e.preventDefault()

事件委托

原理：利用事件冒泡，将子元素执行执行的事件，添加到父元素上，委托父元素执行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            ul
                border:1px solid #000000;
            
            li
                height:30px;
                background: lightcoral;
                margin-top:10px;
                width:200px;
            
        </style>
    </head>
    <body>
        <ul id="list">
            <li>1</li>
        </ul>
        <script>
            var arr=[1,2,3,4,5];
            var arr2=["a","b","c",‘d‘,‘e‘];
            var list = document.getElementById("list");
            var str = "";
            for(var i=0;i<arr.length;i++)
                str += "<li index="+i+">"+arr[i]+"</li>"
            
            console.log(str);
            list.innerHTML = str;
            //获取 li
            list.onclick = function(ev)
                var e =ev||event;
                var target = e.target||e.srcElement;
                
                if( target.nodeName == ‘LI‘ )
                    var index =parseInt(target.getAttribute(‘index‘));
                    alert(arr2[index]);
                
            
        </script>
    </body>
</html>
?

 

如何获取目标元素

target属性 保存了目标元素 DOM标准

srcElement属性 IE

兼容： var target = e.target || e.srcElement;

 

以上是关于阻止默认事件，事件委托和周期的主要内容，如果未能解决你的问题，请参考以下文章

5.14 默认事件和事件委托

5.14 默认事件和事件委托

事件侦听和删除事件——event对象——按钮精灵——默认事件——取消冒泡事件——事件委托——默认触发——onload 图片预加载四个迭代版本

浏览器默认事件，事件监听，事件委托

阻止冒泡和事件委托

vue阻止事件冒泡，事件穿透