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的Webservice开发(四)-泛微OA的SOAP接口
一.功能需求 泛微e-cology可以在流程中调用Webservice接口实现与其他系统的联动等复杂功能.但是目前泛微文档中仅提供了调用的方法,但是没有关于接口的相关开发信息. 本次案例是用Pytho ...
- EOS基础全家桶（八）jungle测试网的使用
简介 前面我们已经学习了一些EOS的基础知识了,但是在EOS主网上的很多操作(比如:抵押.赎回.买卖内存)都是需要EOS链被正式激活后才可使用,而激活EOS链还需要很多的准备操作,我打算在单独的一篇文 ...
- C#开发BIMFACE系列33 服务端API之模型对比4：获取模型对比结果
系列目录 [已更新最新开发文章,点击查看详细] 模型对比可以对两个文件/模型进行差异性分析,确定两个文件/模型之间构件的几何和属性差异,包括增加的构件.删除的构件和修改的构件. 模型对应可以用 ...
- self不明白什么意思,我来帮助你了解self的含义
先看下面这段代码 # 用函数模仿类def dog(name, gender): def jiao(dog1): print('%s汪汪叫' % dog1["name"]) def ...
- NGINX 类漏洞 整理记录
简单介绍NGINX: Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行. 其特点是占有内存少,并发能力强,nginx的并 ...
- Spring5：控制反转
二.Spring IOC控制反转 1:IOC推导 >传统业务调用编程 定义一个userDao接口:UserDao package com.spring; public interface Use ...
- 立体匹配-----NCC视差匹配
目录 一.立体匹配算法 1.立体匹配算法分类 二.NCC 视差匹配方法 1.原理 2.NCC计算公式 3.算法流程 4.代码实现 5.不同场景运行 三.结论 四.遇到的问题及解决方法 一.立体 ...
- 用Python的Plotly画出炫酷的数据可视化(含各类图介绍，附代码)
前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者: 我被狗咬了 在谈及数据可视化的时候,我们通常都会使用到matplo ...
- 7、窗口函数 & Windows 的 Operator demo
代码地址:https://gitee.com/nltxwz_xxd/abc_bigdata 一.窗口函数 在定义了窗口分配器之后,我们需要为每一个窗口明确的指定计算逻辑,这个就是窗口函数要做的事情,当 ...
- An example shows several CIM-XML extension headers
The example below shows several CIM-XML extension headers for a GetClass operation on the root/cimv2 ...