JavaScript—事件委托和Event事件监听器

最新推荐文章于 2024-04-11 19:26:38 发布

九阈

最新推荐文章于 2024-04-11 19:26:38 发布

阅读量528

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46048542/article/details/122897816

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

事件委托实现步骤：
1、找到当前节点的父节点或者祖先节点
2、将事件添加到你找到的这个父节点或者祖先节点上
3、找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload = function(){
            var oUl = document.getElementById("ul1");
            oUl.onclick = function(ev){
                var e = ev || window.event;
                var target = e.target || window.event.srcElement;
                if(target.nodeName.toLowerCase() == "li"){
                    target.style.backgroundColor = 'red';
                }
            }
            var obtn = document.getElementById("btn1");
            var i = 6;
            obtn.onclick = function(){
                var newNode = document.createElement("li");
                newNode.innerHTML = i++ *1111;
                oUl.appendChild(newNode);
            }
        }
    </script>
</head>
<body>
    <button id = 'btn1'>新增节点</button>
    <ul id="ul1">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
        <li>5555</li>
    </ul>
</body>
</html>

请添加图片描述
Event事件监听器

    1、传统事件绑定
    <1>重复添加，覆盖
    <2>不能精确的删除事件上的某一个函数
    2、事件监听器
    addEventListener()
    格式：node.addEventListener("click")
    参数：
    第一个参数  事件类型
    第二个参数  绑定函数
    第三个参数  布尔值  true 事件捕获
                       false 事件冒泡  默认
    removeEventListener()
    格式：node.removeEventListener
    参数：
    第一个参数  事件类型
    第二个参数  删除函数名字

传统事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        var oBtn = document.getElementById("btn1");
        oBtn.onclick = function(){
            alert("点击1");
        }

        oBtn.onclick = function(){
            alert("点击2");
        }
    }
</script>
<body>
    <button id="btn1">按钮</button>
</body>
</html>

点击按钮只有点击2
请添加图片描述
事件监听器
上面案列

<script>
    window.onload = function(){
        var oBtn = document.getElementById("btn1");
        oBtn.addEventListener("click",function(){
            alert("点击1");
        },false);
        oBtn.addEventListener("click",function(){
            alert("点击2");
        },false);
    }
</script>

请添加图片描述

传统事件绑定举个列子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        var aBtns = document.getElementsByTagName("button");
        aBtns[1].onclick = function(){
            alert("原有的点击函数");
        }

        //下标为0
        aBtns[0].onclick = function(){
            aBtns[1].onclick = show;
        }

        //取消下标1按钮上的函数
        aBtns[2].onclick = function(){
            aBtns[1].onclick = null;
        }
    }

    function show(){
        alert("hello world");
    }
</script>
<body>
    <button>添加函数</button>
    <button>按钮</button>
    <button>删除函数</button>
</html>

事件监听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    window.onload = function(){
        var aBtns = document.getElementsByTagName("button");

        aBtns[1].addEventListener("click",function(){
            alert("原有的函数");
        },false);

        aBtns[0].onclick = function(){
            aBtns[1].addEventListener("click",show,false);
        }

        aBtns[2].onclick = function(){
            aBtns[1].removeEventListener("click",show);
        }
    }

    function show(){
        alert("hello world");
    }
</script>
<body>
    <button>添加函数</button>
    <button>按钮</button>
    <button>删除函数</button>
</html>

请添加图片描述

<script>
    function addEvent(node, evenType, funcName){
        if(node.addEventListener){
            node.addEventListener(evenType,funcName,false);
        }else{
            node.attachEvent("on" + evenType,funcName);
        }
    }
    function removeEventListener(node, eventType, funcName){
        if(node.removeEventListener){
            node.removeEventListener(eventType,funcName);
        }else{
            node.detachEvent("on" + eventType, funcName);
        }
    }
</script>

九阈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—事件委托和Event事件监听器

事件委托实现步骤：1、找到当前节点的父节点或者祖先节点2、将事件添加到你找到的这个父节点或者祖先节点上3、找到触发对象，判断触发对象是否是想要的触发对象，进行后续的操作<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
复制链接

扫一扫

专栏目录