JavaScript的事件流

来源：互联网发布：中南工程咨询设计知乎编辑：程序博客网时间：2024/05/22 03:34

多个彼此嵌套元素，他们拥有相同的事件，最内部元素事件被触发后，外边多个元素的同类型事件也会被触发，多个元素他们同类型事件同时执行的效果称为“事件流”

<html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        div {width: 400px; height: 300px; background: lightblue;}        p {width: 400px; height: 150px; background: lightgreen;}        span {background: pink;}    </style></head><body>    <h2>事件流</h2>    <div>        <p>            <span>I am span</span>        </p>    </div></body></html><script type="text/javascript">    var dv = document.getElementsByTagName('div')[0];    var pp = document.getElementsByTagName('p')[0];    var sp = document.getElementsByTagName('span')[0];    //addEventListener（类型， 处理， true捕捉/false冒泡）    sp.addEventListener('click', function () {        console.log('span tag');    }, true);    pp.addEventListener('click', function () {        console.log('p tag');    }, true)    dv.addEventListener('click', function () {        console.log('div tag')    }, true)</script>

效果图：

阅读全文

0 0