DOM之事件高级(附实例、图解)
目录
- 注册事件(绑定事件)
1.1 注册事件概述
1.2 addEventListener 事件监听方式
1.3 attachEvent 事件监听方式 (不建议使用,非标准)
1.4 注册事件兼容性解决办法 - 删除事件(解绑事件)
- DOM事件流
- 事件对象
4.1 什么是事件对象
4.2 事件对象的使用用法
4.3 事件对象的兼容性问题
4.4 事件对象常用的属性和方法
4.5 阻止事件冒泡
4.6 事件委托(代理、委派)
4.7 常用的鼠标事件
4.8 鼠标事件对象
4.9 常用的键盘事件
正文
1. 注册事件(绑定事件)
1.1 注册事件概述
给元素添加事件,称为注册事件或者绑定事件
注册事件有两种方式:传统方式和方法监听方式
传统注册方式:
- 利用on开头的事件onclick
- < /button >
- btn.onclick = function() {}
- 特点:注册事件的唯一性
- 同一个与三俗同一个事件只能设置一个处理函数。最后注册的处理函数将会覆盖前面的处理函数
方法监听注册方式
- W3C标准推荐方式
- addEventListener()它是一个方法
- IE9之前的IE不支持此方法,可使用attachEvent()代替
- 特点:同一个元素同一个事件可以注册多个监听器
- 按注册顺序依次执行
1.2 addEventListener 事件监听方式
eventTarget.addEventListener(type, listener[, useCapture])
eventTarget.addEventListener()方法将指定监听器注册到eventTarget(目标对象)上,当该对象触发指定事件时,就会执行事件处理函数。
type:事件类型,比如click、mouseover。注意这里不要带on
listener:事件处理函数,事件发生时,会调用该监听函数
userCapture:可选参数,是一个布尔值,默认是false。
例子:
// 2.事件监听注册事件 addEventListener // (1)事件类型是字符串而且不加引号// (2)同一个元素、同一个事件可以添加多个监听器(事件处理程序)btns[1].addEventListener('click',function(){alert('你好');});btns[1].addEventListener('click',function(){alert('你好不好');});
1.3 attachEvent 事件监听方式 (不建议使用,非标准)
eventTarget.attachEvent(eventNameWithOn, callback )
eventTarget.attachEvent() 方法将指定的监听器注册eventTarget(目标对象)上,当该对象触发指定的事件时,指定的回调函数就会被执行。
- eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on
- callback:事件处理函数,当目标触发事件时回调函数被调用
1.4 注册事件兼容性解决办法
2. 删除事件(解绑事件)
- 传统注册方式
eventTarget.onclick = null;
例子:
var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert('点我干哈');// 1.传统方式删除事件divs[0].onclick = null;}
- 方法监听注册方式
(1) eventTarget.removeEventListener(type, listener[, useCapture]);
(2) eventTarget.datachEvent(eventNameWithOn, callback)
(1) 例
// 要删除的话,不要用匿名函数divs[1].addEventListener('click',fn); //里面的函数不需要调用加小括号function fn() {alert('你好');divs[1].removeEventListener('click',fn);}
(2)例
divs[2].attachEvent('onclick',fn1);function fn1() {alert('你好');divs[2].detachEvent('onclick',fn1);}
删除事件兼容性解决方案
3. DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即DOM事件流
比如我们给一个div注册了点击事件:
DOM事件流分成3个阶段:
- 捕获阶段
- 当前目标阶段
- 冒泡阶段
- 事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐级向上传播到DOM最顶层节点的过程
- 事件捕获:王景最早提出,由DOM最顶层节点开始,然后逐级向下传播到最具体的元素接收的过程
注意:
- js代码中只能执行捕获或者冒泡其中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- addEventlistener(type, listener[, useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是是false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序
- 实际开发中我们很少使用事件捕获,我们更关注事件冒泡
- 有些事件是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave
- 事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件
4. 事件对象
4.1 什么是事件对象
EventTarget.onclick = function(event) {}
EventTarget.addEventLsitener(‘click’, function(event) {})
//这个event就是事件对象,我们还喜欢写成e或者evt
官方解释:event对象代表事件的状态,比如键盘按键的状态、鼠标的位置、鼠标按钮的状态
简单理解:事件发生后,跟时间相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性跟方法
比如:
- 谁绑定了这个事件
- 鼠标接触事件的话,会得到鼠标的相关信息,如鼠标位置
- 键盘触发事件后,会得到键盘的相关信息,如按下哪个键
4.2 事件对象的使用用法
eventTarget.onclick = function(event) {
// 这个event就是事件对象,我们还喜欢写成e或者evt
}
eventTarget.addEventListener(‘click’, function(event) {
// 这个event就是事件对象,我们还喜欢写成e或者evt
})
这个event是个形参,系统帮我们设定为事件对象,不需要传递实参过去
当我们注册事件时,event对象就会被系统自动创建,并依次给事件监听器(事件处理函数)
div.addEventListener('click',function(event) {console.log(event);})
4.3 事件对象的兼容性问题
- 标准浏览器中是浏览器给方法传递的参数,只需要定义形参e就可以获取到
- 在IE6~8中,浏览器不会给方法传递参数没如果需要的话,需要用到window.event中获取查找
解决:
e = e || window.event;
总结:实际使用中不用考虑这么多,直接用e就完事儿
4.4 事件对象常用的属性和方法
- e.target 返回的是触发事件的对象(元素)
- this 返回的绑定事件的对象
区别:
e.target 点击了哪个元素,就返回哪个元素
this 绑定了事件哪个元素就指向哪个元素
例:
var ul = document.querySelector('ul');ul.addEventListener('click',function(e){// 我们给ul绑定了事件,那么this就指定ulconsole.log(this);//e.target 指向我们点击的那个对象 谁触发了这个事件我们点击的是li e.target指向的就是liconsole.log(e.target);})
点击li以后
兼容性处理(了解)
div.onclick = function(e) {e = e || window.event;var target = e.target || e.srcElement;console.log(target);}
- e.type返回事件类型
function fn(e) {console.log(e.type);}
- e.preventDefault();、returnValue、return false阻止默认行为
// 兼容性写法// 传统的注册方式a.onclick = function(e) {//普通的浏览器 e.preventDefault(); 方法e.preventDefault();// 低版本的浏览器 ie678 属性e.returnValue;// 我们可以利用 return false 也能阻止默认行为 没有兼容性问题,特点是// return 后面的代码不执行了 而且只限于传统的注册方法return false;alert('11');}
4.5 阻止事件冒泡
- 阻止事件冒泡的两种方式
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到DOM对顶层节点
阻止事件冒泡
- 标准写法:利用事件对象里面的stopPropagation()方法
e.stoppropagation()
- 非标准写法:IE6~8利用事件cancelBubble属性
例:
var son = document.querySelector('.son');son.addEventListener('click',function(e){alert('son');// 阻止冒泡事件 有兼容问题e.stopPropagation();// 非标准 cancel 取消 bubble 冒泡e.cancelBubble = true;},false); //获取省略不写false
- 阻止事件冒泡的兼容性写法
if(e && e.stopPropagation) {e.stopPropagation();} else {window.event.cancelBubble = true;}
4.6 事件委托(代理、委派)
事件委托
事件委托也叫事件代理,在jq里面称为事件委派
事件委托的原理
不是每一个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点
事件委托的作用
我们只提高了一次DOM,提高了程序性能
例:
// 给父节点添加监听器,利用事件冒泡影响每个子节点var ul = document.querySelector('ul');ul.addEventListener('click',function(e){ //e,target 这个可以得到我们点击的对象e.target.style.backgroundColor = 'pink';})
效果:
document.addEventListener('contextmenu', function(e) {e.preventDefault();})
2.禁止鼠标选中(selectstart开始选中)
4.7 常用的鼠标事件
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认的上下文菜单
document.addEventListener('selectstart', function(e) {e.preventDefault();})
4.8 鼠标事件对象
event对象代表事件的状态,跟跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent
例:
// 鼠标事件对象 MouseEventdocument.addEventListener('click',function(e){//1. client 鼠标在可视区的x和y坐标,跟长度条啥的都没关系console.log(e.clientX);console.log(e.clientY);console.log("---------------");//2. page 鼠标在页面文档的x和y坐标console.log(e.pageX);console.log(e.pageY);})
结果:横坐标相同高度不同
4.9 常用的键盘事件
事件除了可以使用鼠标触发,还能使用键盘触发
注意:
- 如果使用addEventListener不需要加on
- onkeypress和前面两个的区别是,它不识别功能键,比如左右箭头,shift等
- 三个事件的执行顺序是:keydown–keypress–keyup
- keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入复选框中
- keyup事件触发的时候,文字已经落入文本框里面了
document.addEventListener('keyup',function(){alert('你好');})// 2.keyup 按键按下的时候触发 能识别功能键 document.addEventListener('keydown',function(){alert('你好啊');})// 3.keypress 按下的的时候触发 不能识别功能键 document.addEventListener('keypress',function(){alert('你真好啊');})
2.键盘事件对象
属性:keyCode
说明:返回该键的ASCll值
注意:
- onkeydown和onkeyup不区分字母大小写。onkeypress区分字母大小写·。
- 实际开发中,更多使用keydown跟keyup,他能识别所有键(包括功能键)
- keypress不知别功能键,但是keyCode能区分大小写返回不同的AScll值
例:
document.addEventListener('keyup',function(e){console.log("keyup:"+e.keyCode); // 我们可以利用keycode返回的ASCII码来判断用户按下哪个键if(e.keyCode == 65) { alert('您按下了a键');} else { alert('您没有按下a键');}})
DOM之事件高级(附实例、图解)相关推荐
- 黑马程序员pink老师前端入门教程,零基础必看的JavaScript基础语法视频教程(DOM,事件高级)
DOM 节点操作 父节点和子节点 第一个子元素和最后一个子元素 新浪下拉菜单案例 兄弟节点 创建和添加节点 简单版发布留言案例 删除节点 删除留言案例 复制节点 动态生成表格-创建学生数据 动态生成表 ...
- 再谈三角形整理形态(附实例图解)
对称三角形的定义.市场含义.各项要点.研判诀窍.案例分析.上升/下降三角形的基本概念.市场含义.要点提示.注意事项.形态举例.还有底部三角形.扩散三角形.研判要点.操作要点. 千帆竞发的网易博客 相关 ...
- JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- 13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录 一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
- JavaScript之DOM(事件高级)
事件高级 一.注册事件(绑定事件) 1.传统注册方式 2.方法监听注册方式 1.addEventListener 事件监听方式 2.attachEvent 事件监听方式 3.注册事件兼容性问题 二.删 ...
- vuex结合php,vuex中store的使用介绍(附实例)
本篇文章给大家带来的内容是关于vuex中store的使用介绍(附实例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.状态管理(vuex)简介 vuex是专为vue.js应用程序 ...
- php xml对象解析_php解析xml 的四种简单方法(附实例)
XML处理是开发过程中经常遇到的,PHP对其也有很丰富的支持,本文只是对其中某几种解析技术做简要说明,包括:Xml parser, SimpleXML, XMLReader, DOMDocument. ...
- Js事件高级知识点整理
Js事件高级 注册事件概述 给元素添加事件,成为注册事件或者绑定事件. 注册事件有两种方式:传统方式和方法监听方式. 传统注册方式 利用on开头的事件onclick < button οncli ...
- 从零开始的AI·吃透kNN算法,学完我悟了(附实例代码)
从零开始的AI系列 从零开始的AI·机器学习の基本概念 从零开始的AI·决策树原来这么好理解(附实例代码) 从零开始的AI·朴素贝叶斯?拿来吧你(附实例代码) 文章目录 从零开始的AI系列 前言 一. ...
- WebAPI(part12)--事件高级
学习笔记,仅供参考,有错必究 文章目录 事件高级 注册事件 addEventListener 事件监听方式 attachEvent事件监听方式 案例 删除事件(解绑事件) 删除事件的方式 案例 DOM ...
最新文章
- linux安装phoenix 5.1.0(对应hbase 2.2.6)
- 大专一年级计算机考试题,(大专一年级语文期中考试试卷.doc
- [FxCop.设计规则]13. 定义自定义属性参数的访问属性
- 【题解】BZOJ5093图的价值(二项式+NTT)
- 携程实时计算平台架构与实践丨DataPipeline
- C# Winform 实现Ajax效果自定义按钮
- 记服务器系统安装中不识别固态硬盘问题
- 如何对网络“黑灰产”实现精准打击?
- 叶俊:没有人会把钱存在有漏洞的账户
- 最好看的Excel条形图 如何用Excel图表把它做出来
- html5怎么查看路由器状态,怎么看路由器是否正常_怎么看路由器是否联网?-192路由网...
- 无法显示页面,因为发生内部服务器错误。
- 真正毁掉团队的,是“窄化效应”
- 设计一个学生学籍管理系统
- 亲亲亲亲兄弟们必学成为首富第一步学习Linux基础命令
- 【通信原理】第三章 -- 随机过程[下]
- Spark高效数据分析03、Spark SQL
- NCS再探--nRF5340 Audio
- Gartner 2022 年技术成熟度曲线显示数字政府的新动向
- 《Continual lifelong learning with neural networks : A review》阅读笔记
热门文章
- 【图像分割】基于matlab直觉模糊C均值聚类图像分割IFCM【含Matlab源码 120期】
- tensorflowgpu利用率为0_「活动」体验新一代主机 天翼云数十款云产品0元试用
- 如何简化卷积神经网络_卷积神经网络:简化
- ai人工智能的数据服务_建立AI系统的规则-来自数据科学家
- openai-gpt_为什么GPT-3感觉像是编程
- python3 与python2 异常处理的区别与联系
- Java关于继承中的内存分配
- LeetCode算法题-House Robber(Java实现)
- InnoDB之锁机制
- 不简单的工厂:实际体验 .NET Core 2.1 新生物 HttpClientFactory