学习customEvent
2024-10-19 04:31:37
title: 认真学习customEvent
tags: DOM
date: 2017-7-22 23:20:57
最近要实现一个模拟的select元素组件,所以好好看了这个自定义事件api,记录一下。
整体来说,这个api由3部分组成,监听事件的元素,触发事件的元素和event对象.
- 监听事件的元素主要负责监听事件,事件发生了调用回调函数。跟DOM事件一样
- 触发事件的元素负责在一定的条件下触发自定义事件
event
对象,就好像击鼓传花,由事件的触发者传递给事件的监听者,供回调函数使用
这里要注意的是,自定义事件依然符合捕获-目标-冒泡这三个阶段,也就是说,子元素触发的事件,子元素和他的祖先元素可以接收到,而子元素的兄弟元素就算注册了监听事件,等到花儿都谢了,也不会触发回调函数的。。。(我一开始就是这么干的)
下面就通过一个自定义的select事件来说明自定义元素的作用:html结构如下:
<div class='selector'>
<div class='selected'>啥都没选</div>
<div class = 'options'>
<div >1</div>
<div >2</div>
<div >3</div>
<div >4</div>
<div >5</div>
</div>
</div>
在这个例子中,我们希望实现的效果是,点击选项时,会触发select
事件,同时可以在根元素上监听到select
这个自定义事件,js代码如下:
document.querySelector('.options').addEventListener('click', function (evt) {
if (evt.target.classList.contains('options')) {
return;
}
var text = evt.target.innerHTML;
//构造自定义事件
var select = new CustomEvent('select', {
detail: event.target.innerHTML,
bubbles: true//允许冒泡被祖先元素监听到
});
evt.target.dispatchEvent(select)//把select事件抛出去
})
document.querySelector('.selector').addEventListener('select', function (evt){
this.querySelector('.selected').innerHTML = evt.detail;
})
See the Pen NvPjde by imgss (@imgss) on CodePen.
当选项被点击时触发`select`事件,根元素监听到`select`事件之后显示出被选中的选项。有同学会说,这个直接用点击事件不就可以了吗,但是这样写逻辑更清楚
最新文章
- MVC4做网站六后台管理:6.2网站信息设置
- iOS 阶段学习第22天笔记(JSON数据格式介绍)
- 【2016年特别福利】史上最全CSS学习资料大全
- event 内存泄漏
- C 不改变顺序,原址剔除数组中的0元素
- Linux 配置网络
- 15个最新加速 Web 开发的框架和工具
- 【泛化物品】【HDU1712】【ACboy needs your help】
- Linux 抓包命令
- Properties 使用,注意编码
- 手机应用PC端演示工具介绍
- php 函数形参前面加上&;
- Confluence 6 用户宏示例 - Formatted Panel
- java 实现简单的链式栈
- 游戏编程模式KeyNote
- windows 10 开发学习资料,Windows-universal-samples学习笔记系列一:App settings
- codeforce 192 div2解题报告
- chrome添加 postman扩展程序图文简介
- arcgis10.5新功能图形缓冲
- 详解 Webpack+Babel+React 开发环境的搭建