事件委拖

最新推荐文章于 2023-06-27 17:18:45 发布

5649498

最新推荐文章于 2023-06-27 17:18:45 发布

阅读量157

点赞数

分类专栏： js 文章标签： javascript 多线程

本文链接：https://blog.csdn.net/qq_35772366/article/details/79432145

版权

js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

参考
子节点依靠冒泡把事件给父节点进行处理，父节点根据event.target(事件发生的最小级的htmldom)进行判段

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
    </div>
</body>
<script>
    window.onload = function(){
        var oBox = document.getElementById("box");
        oBox.onclick = function (ev) {
            var ev = ev || window.event;
            var target = ev.target || ev.srcElement;
            if(target.nodeName.toLocaleLowerCase() == 'input'){
                switch(target.id){
                    case 'add' :
                        alert('添加');
                        break;
                    case 'remove' :
                        alert('删除');
                        break;
                    case 'move' :
                        alert('移动');
                        break;
                    case 'select' :
                        alert('选择');
                        break;
                }
            }
        }
    }
</script>
</html>

5649498

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件委拖

参考子节点依靠冒泡把事件给父节点进行处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="box"> <input type="button" id="add" value="添加" />
复制链接

扫一扫