事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流。
创新互联长期为上千余家客户提供的网站建设服务,团队从业经验10年,关注不同地域、不同群体,并针对不同对象提供差异化的产品和服务;打造开放共赢平台,与合作伙伴共同营造健康的互联网生态环境。为贵定企业提供专业的成都网站设计、做网站,贵定网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。
DOM事件流分为三个阶段:
事件流如下图所示:
注意事项:
应用:如果有同一组元素,我们想要某一个元素实现某种样式,需要用到循环的排他思想。
排他思想原理:(1)先所有元素全部清除样式,即干掉其他人;(2)再给当前元素设置样式,即留下自己。
场景一:
// 需求:点击哪个按钮,让当前按钮变为粉色,其余不变色
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 获取所有按钮元素
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
// 绑定点击事件
btns[i].addaddEventListener('click', function () {
for (let j = 0; j < btns.length; j++) {
// 干掉其他人
btns[j].style.backgroundColor = ''
}
// 留下自己
this.style.backgroundColor = 'pink'
})
}
</script>
场景二:
// 需求:Tab栏切换时,只有选中项的背景颜色为粉色。默认第一项被选中其背景颜色为粉色,其余项无背景颜色。
// 被选中的tab栏样式
<style type="text/css">
.active {
background-color: pink;
}
<style>
<ul>
<li class="active">Tab1</li>
<li>Tab2</li>
<li>Tab3</li>
<li>Tab4</li>
</ul>
<script>
// 获取所有的li标签元素
let lis = document.querySelectorAll('li')
for (let i = 0; i < lis.length; i++) {
// 绑定点击事件
lis[i].addaddEventListener('click', function () {
// 移除当前类
document.querySelector('ul .active').classList.remove('active')
// 为点击的添加类
this.classList.add('active')
})
}
</script>
新闻名称:事件委托和排他思想
分享路径:https://www.cdcxhl.com/article16/dsojidg.html
成都网站建设公司_创新互联,为您提供软件开发、商城网站、Google、手机网站建设、自适应网站、响应式网站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联