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的基 ...
随机推荐
- ATcoder--D - Summer Vacation
这个题目的题意有点难搞 题目连接: https://atcoder.jp/contests/abc137/tasks/abc137_d 题目大意:输入n和m 指的是一共有n个输入在m天前一共能赚到的钱 ...
- SSH、SCP命令及使用说明
SSH篇 1.ssh介绍 SSH是一种网络协议,用于计算机之间的加密登录.如果一个用户从本地计算机,使用SSH协议登录另一台远程计算机,我们就可以认为,这种登录是安全的,即使被中途截获,密码也不会泄露 ...
- P1464 Function
Function 简 单 的 递 归 这道题一开始十分智障地用递归做,虽然知道没那么简单,但还是冒着送死的心态交了一遍,果然,如我所料 样例输入: 密密麻麻,几万行的样例输入 //:) ...
- PHP 常用数组的具体运用？常用吗？
在 PHP 中,有三种类型的数组: 数值数组 - 带有数字 ID 键的数组 关联数组 - 带有指定的键的数组,每个键关联一个值 多维数组 - 包含一个或多个数组的数组 看具体实例: 创建数组 < ...
- Java面试系列第3篇-HashMap相关面试题
HashMap是非线程安全的,如果想要用线程安全的map,可使用同步的HashTable或通过Collections.synchronizeMap(hashMap)让HashMap变的同步,或者使用并 ...
- discuz 自带的地区四级联动调用方法
首先,DZ提供了专门处理地区信息的函数,在source/function/function_profile.php(第14行)文件中:function profile_setting(){}那么,我们 ...
- 2019-2020-1 20199329《Linux内核原理与分析》第一周作业
Linux学习随笔 Linux 是一个操作系统,我们的 Linux 主要是系统调用和内核那两层. UNIX前身是Multics,但 UNIX 的商业版本非常昂贵,于是Linus Torvalds(Li ...
- 2018 ICPC Pacific Northwest Regional Contest I-Inversions 题解
题目链接: 2018 ICPC Pacific Northwest Regional Contest - I-Inversions 题意 给出一个长度为\(n\)的序列,其中的数字介于0-k之间,为0 ...
- java在指定区间内生成随机数
Random对象生成随机数 首先需要导入包含Random的包 import java.util.Random; nextInt(int)方法将生成0~参数之间的随机整数但不包括参数. 例如生成0~99 ...
- Python封装应用程序的最佳项目结构是什么?
Python封装应用程序的最佳项目结构是什么? 转载来源于stackoverflow:https://stackoverflow.com/questions/193161/what-is-the-be ...