事件冒泡、事件捕获与事件流（事件委托、代理）

最新推荐文章于 2024-07-19 11:40:48 发布

KK要继续努力

最新推荐文章于 2024-07-19 11:40:48 发布

阅读量202

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_45393020/article/details/116931239

版权

前端专栏收录该内容

50 篇文章 0 订阅

订阅专栏

事件冒泡、事件捕获与事件流

事件冒泡与事件流息息相关，事件冒泡指的是当一个元素接收到事件的时候，会把他接收到的所有一层一层传给它父级，一直到顶层window，就像泡泡从下往上冒一样
事件捕获指的是当一个元素接收到事件的时候，会从具有相同事件的父级依次从上到下进行传递，与事件冒泡的顺序是相反的
事件流又叫事件委托、事件代理，是利用事件冒泡，指定一个事件程序从而能够管理某一类型的所有事件。使用事件流不仅原来的元素可以获得相同的事件，新增加的节点也会具有相同的事件，事件流可以减少js中的DOM操作，提高性能。
事件机制分为事件冒泡与事件捕获

事件流举例

//event对象的兼容性写法
var ev = ev||window.event;
//获得目标节点的兼容性写法
var target = ev.target||ev.srcElement;

<style>
        ul,li{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
    </style>
<body>
    <ul id="ul1">
        <li>1111</li>
        <li>2222</li>
        <li>3333</li>
        <li>4444</li>
    </ul>
</body>
<script>
    var oUl = document.getElementById('ul1');
    oUl.onclick = function(ev){
        var ev = ev|| window.event;
        var target = ev.target|| ev.srcElement;
        if(ev.target.nodeName.toLowerCase()=='li'){
            alert(ev.target.innerHTML);
        }
    }
</script>

事件冒泡的主体

当某个元素具有事件，这个事件函数有一个event事件对象，通过这个事件对象的属性获取事件冒泡的主体。

oUl.onclick = funciton(ev){
	var ev = ev || window.event;
	var target = ev.target || ev.srcElement;
	//获取事件的目标节点的标签名
	ev.target.nodeName
	//获取事件目标节点标签的id
	ev.target.id
	ev.currentTarget
}