Js 事件基础
一：js中常见得事件
// 创建一个侦听事件 , 事件类型为 点击 click ,回调函数为clickHandler ,默认 冒泡
document.addEventListener('click',clickHandler)
// 事件回调函数的参数 MouseEvent - 鼠标事件
function clickHandler(e) {
console.log("我被点击了")
}
在上面得代码中侦听事件得对象为 document 就是网页，当我们点击网页得任何一个位置就会触发点击事件，那么就会执行事件的回调函数 clickHandler，打印结果
1.2：删除事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="btn">按钮</button>
</body>
<script>
// 获取dom元素
var btn = document.querySelector('#btn')
// 侦听事件
btn.addEventListener('click',clickHandler1)
// 事件回调函数
var num = 0
function clickHandler1(e){
num++
console.log('当num > 3 得时候删除事件')
if (num>3){
// 删除事件
e.currentTarget.removeEventListener('click',clickHandler1)
}
}
</script>
</html>
当我们不断点击按钮，就会不断的触发事件，每点击一次 num 的值就会增加，当num大于3时，就删除本次创建的事件和事件回调函数，为什么要删除事件呢？因为当元素的事件不再使用时，必须删除，否则会造成内存堆积，侦听事件都会被存储在堆中，当元素被删除了，也必须删除该元素的所有事件。
2：事件侦听 与 抛发
事件侦听语法 ： 事件侦听对象.addEventListener(事件类型,事件回调函数,是否捕获时执行)
创建事件对象语法：var evt = new Event(事件类型) -指创建一个事件对象
// 侦听事件
document.addEventListener('奥里给',customHandler)
// 创建一个事件对象
var evt = new Event('奥里给')
// 抛发事件
document.dispatchEvent(evt)
// 事件回调函数
function customHandler(e) {
console.log(e.type) //e.type 查看事件的类型
}
事件三阶段案例：先写好html代码显示三个背景颜色不一样的块。如下
// 获取 标签
var div0 = document.querySelector('.div0') // 绿色背景块
var div1 = document.querySelector('.div1') // 浅粉色块
var div2 = document.querySelector('.div2') // 红色块
// 给每个块都添加点击事件
div0.addEventListener('click',clickHandler0)
div1.addEventListener('click',clickHandler1)
div2.addEventListener('click',clickHandler2)
function clickHandler0(e){
console.log('点击div0')
}
function clickHandler1(e){
console.log('点击div1')
}
function clickHandler2(e){
console.log('点击div2')
}
当我们在点击红色块时，我们会发现，div1和div2都被打印了，这就是事件的冒泡，我们点击的真正目标为红色块div2，但是却触发了其他两个块，那么事件如何进行三阶段的呢？ 首先当我们点击红色块div2时，事件进入一阶段，捕获阶段，他会先进入div0，查找目标，当没有发现，会进入下一层查找目标，当进入粉丝块时，也没有发现我们想要的目标，当进入红色块div2 时，就会找到我们点击的目标，div2，这个时候事件的一阶段就变成了二阶段，目标阶段，就会开始向外发送信息触发事件，执行事件回调函数，并由二阶段变成三阶段，冒泡阶段，这时是由内向外的一个过程，不断的往外并触发经过的块的事件，直到最外层，这就是事件三阶段的全过程。那么我们可不可以让他不冒泡呢，有
div0.addEventListener('click',clickHandler0)
div1.addEventListener('click',clickHandler1)
div2.addEventListener('click',clickHandler2)
function clickHandler0(e){
console.log('点击div0')
}
function clickHandler1(e){
console.log('点击div1')
}
function clickHandler2(e){
e.stopPropagation() // 阻止事件冒泡
console.log('点击div2')
}
Js 事件基础的更多相关文章
- 第十一节 JS事件基础
空白点击事件(没什么用处,做个介绍) <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- JS事件基础
事件对象Event 对象代表事件的状态,比如事件在其中发生的元素.键盘按键的状态.鼠标的位置.鼠标按钮的状态.什么时候会产生Event 对象呢? 例如: 当用户单击某个元素的时候,我们给这个元素注册的 ...
- JS——事件基础应用
直接写在html标签里: <h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1> 另外一种在脚本里调用: <!D ...
- C#-WebForm-JS知识：基础部分、BOM部分、DOM部分、JS事件
一.基础部分: 1.JavaScript 是什么? 是一门脚本语言,是属于弱类型(语言语法很随意),C#是强类型(语言语法非常严格)(李献策lxc) 优点:JS 执行速度快 2.JS 与java有什么 ...
- JS 的事件基础、事件侦听与抛发、
前言 JavaScript是一种事件驱动型语言.事件驱动是指JavaScript引擎并不是在看到代码之后就会立即执行,而是会在合适的时间才去执行.这个合适的时间是指当某个事件发生之后(例如一个输入框的 ...
- node.js零基础详细教程(4)：node.js事件机制、node异步IO操作
第四章 建议学习时间3小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...
- jS事件之网站常用效果汇总
下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> < ...
- JS事件委托的原理和应用
js事件委托也叫事件代理,实际上事件委托就是通过事件冒泡实现的,所谓的事件就是onclick,onmouseover,ondown等等,那么委托呢?委托就是指本来这个事是要你自己做的,但是你却让别人帮 ...
- Node.js 事件循环（Event Loop）介绍
Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...
随机推荐
- Python套接字之UDP
目录 基于UDP的socket 发送消息 接收消息 基于UDP的socket 面向无连接的不可靠数据传输,可以没有服务器端,只不过没有服务器端,发送的数据会被直接丢弃,并不能到达服务器端 发送消息 在 ...
- SpringBoot系列（八）分分钟学会Springboot多种解决跨域方式
SpringBoot系列(八) 分分钟学会SpringBoot多种跨域解决方式 往期推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 s ...
- windows批处理protoc生成C++代码
1 首先需要生成protoc的可执行文件,具体可以参考 https://www.cnblogs.com/cnxkey/articles/10152646.html 2 将单个protoc文件生成.h ...
- PHP xml 外部实体注入漏洞学习
XML与xxe注入基础知识 1.XMl定义 XML由3个部分构成,它们分别是:文档类型定义(Document Type Definition,DTD),即XML的布局语言:可扩展的样式语言(Exten ...
- vue结合百度地图Api实现周边配置查询及根据筛选结果显示对应坐标详情
在我们平常写房地产相关项目的时候经常会用到百度地图,因为这一块客户会考虑到房源周围的配套或者地铁线路所以在这类项目中就不可以避免的会用到百度地图,当然这只是其中一种,其他地图工具也可以,因为我这个项目 ...
- Docker 安装 Jenkins , 并解决初始安装插件失败
安装 Jenkins 后,初始化下载插件总是失败,导致安装不成功,重试好几次都是卡在安装插件那. 这里记录下 Docker 下怎么安装 Jenkins ,并解决初始安装插件失败问题. 安装插件失败,其 ...
- Python数据分析入门与实践 学习
pandas是一个Python语言的软件包,在我们使用Python语言进行机器学习编程的时候,这是一个非常常用的基础编程库.本文是对它的一个入门教程.pandas提供了快速,灵活和富有表现力的数据结构 ...
- 全球数字高程数据（DEM）详解，还有地形晕渲、等高线等干货
1 基本概念 DEM是数字高程模型的英文简称(Digital Elevation Model),是研究分析地形.流域.地物识别的重要原始资料.由于DEM 数据能够反映一定分辨率的局部地形特征,因此通过 ...
- c++动态数组的使用
在c++中,有的时候会遇到变长的数组(不管是一维的还是二维的),这个时候就需要用到动态数组了,并且要用new和delete两个操作符,这俩操作符一般成对使用. 先说一维的动态数组吧,直接上代码 #in ...
- python工业互联网监控项目实战5—Collector到opcua服务
本小节演示项目是如何从连接器到获取Tank4C9服务上的设备对象的值,并通过Connector服务的url返回给UI端请求的.另外,实际项目中考虑websocket中间可能因为网络通信等原因出现中断情 ...