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

时间：2019-08-29 23:09:30 阅读：102 评论：0 收藏：0 [点我收藏+]

标签：tle document 兼容 prope number name word tag parse

事件周期

事件捕获

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

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

目标元素的事件触发
事件冒泡

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

执行顺序：由内向外

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;

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

标签：tle document 兼容 prope number name word tag parse

原文地址：https://www.cnblogs.com/cxf1214/p/11432389.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行