js高级03--事件对象、事件委托

muzidigbig

已于 2023-03-16 13:00:40 修改

阅读量370

点赞数

CC 4.0 BY-SA版权

分类专栏： js问题锦囊文章标签： js事件对象事件委托

于 2018-07-08 20:50:32 首次发布

本文链接：https://blog.youkuaiyun.com/muzidigbig/article/details/80962426

js问题锦囊专栏收录该内容

59 篇文章

订阅专栏

本文介绍了在不同浏览器中处理事件兼容性问题的方法，并通过一个简单的示例演示了如何使用事件委托来改变DOM元素的状态。文章还展示了如何通过事件对象获取被点击的目标元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ie9以下浏览器中的事件对象是放在全局中的window.event;

解决兼容性：event = event || window.event

事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）：

事件委托机制：利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）

event.srcElement || event.target;（点击的目标对象）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td{
            width: 100px;
            height: 100px;
            border:2px solid red;
        }
    </style>
</head>
<body>
<table >
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
    <tr>
        <td></td><td></td><td></td>
    </tr>
</table>
</body>
<script>
    var tab = document.getElementsByTagName("table")[0];
    tab.onclick = function (event) {
        var eventTarget = event.srcElement||event.target
        //点击子级对象改变颜色
        eventTarget.style.backgroundColor = "black";
        
        // 阻止事件冒泡
        // event.stopPropagation();
    }
</script>
</html>

若有不足请多多指教！希望给您带来帮助！