文章目录

注册事件（绑定事件）
- addEventListener 事件监听方式
删除事件（解绑事件）
- 删除事件的方式
DOM事件流
事件对象
- 事件对象的常见属性和方法
- - 事件阻止默认行为
阻止事件冒泡
- 两种方式
- - 阻止事件冒泡
事件委托（代理、委派）
- 事件委托的原理
- 委托的作用
常用的鼠标事件
- 鼠标事件对象
- - 跟随鼠标
常用的键盘事件
- 按键输入内容案例
- 快递单号查询案例

注册事件（绑定事件）

概述：

给元素添加事件，称为注册事件或者绑定事件

注册事件有两种方式：传统方式和方法监听注册方式

传统注册方式	方法监听注册方式
利用on开头的事件，如onclick	w3c标准推荐方式
	addEventListener() 它是一个方法
btn.onclick = function(){}	IE9 之前的IE不支持此方法，可用attachEvent()代替
特点：注册事件的唯一性	特点：同一个元素同一个事件可以注册多个监听器
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理函数	按注册顺序依次执行

addEventListener 事件监听方式

eventTarget.addEventListener(type,listener[,useCapture])
//将指定的监视器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数

该方法接收三个参数：

type:事件类型字符串，比如click,mouseover,注意这里的不带on
**listener:**事件处理函数，事件发生时，会调用该监听函数
**useCapture:**可选参数，是一个布尔值，默认false,学完DOM事件流后再深入

    <button>传统注册</button><button>方法监听注册</button><script>var btns = document.querySelectorAll('button');//1.传统btns[0].onclick = function() {alert('我是传统');}//2.事件监听注册btns[1].addEventListener('click', function() {alert('我是事件监听');}) //同一元素可加多个btns[1].addEventListener('click', function() {alert('66');})</script>

删除事件（解绑事件）

删除事件的方式

传统注册方式

eventTarget.οnclick=null;

方法监听注册方式

eventTarget.removeEventListener(type,listener[,useCapture]);

    <div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);//传统方式删除事件divs[0].onclick = null;}divs[1].addEventListener('click', fn) //里面的fn不需要加()调用function fn() {alert(22);//方法监听注册方式删除divs[1].removeEventListener('click', fn);}</script>

DOM事件流

事件流描述的是从页面中接收事件的顺序。
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

比如我们给一个div注册了点击事件:

DOM事件流分为3个阶段：

捕获阶段
当前目标阶段
冒泡阶段

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F1eorxow-1648139745083)(C:\Users\17147\AppData\Roaming\Typora\typora-user-images\image-20220324152116957.png)]

JS代码只能执行捕获或者冒泡其中的一个阶段
onclick 和 attachEvent(ie) 只能得到冒泡阶段
捕获阶段如果addEventListener 第三个参数时true 那么则处于捕获阶段
实际开发中我们很少使用事件捕获，我们更关注事件冒泡
有些事件是没有冒泡的，比如 onblur、onfocus、onmouseenter、onmouseleave
事件冒泡有时候会带来麻烦，有时候又会帮助很巧妙的做某些事件，我们后面讲解。

    <div class="father"><div class="son">son盒子</div></div><script>//事件捕获// body -> father -> son// var son = document.querySelector('.son');// son.addEventListener('click', function() {//     alert('son');// }, true);// var father = document.querySelector('.father');// father.addEventListener('click', function() {//     alert('father');// }, true);//冒泡阶段//son -> father -> body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false);document.addEventListener('click', function() {alert('document');})</script>

事件对象

官方解释：event对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。

简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，它有很多属性和方法。

    <div>123</div><script>var div = document.querySelector('div');div.onclick = function(event) {console.log(event);}div.addEventListener('click', function(e) {console.log(e);})//1.event 就是一个事件对象 写到我们监听函数的()里 当形参来看//2.事件对象只有有了事件才会存在，它是系统给我们自动创建的，不需要我们传递参数//3.事件对象是事件的一系列相关数据的集合 跟事件相关的。例如鼠标点击里面就包含了鼠标的相关信息。//如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了哪个键</script>

事件对象的常见属性和方法

事件对象属性方法	说明
e.target	返回触发事件的对象标准
e.srcElement	返回触发事件的对象非标准 ie6-8使用
e.type	返回事件的类型比如 click mouseover 不带on
e.cancelBubble	该属性阻止冒泡非标准 ie6-8使用
e.returnValue	该方法阻止默认事件(默认行为) 非标准 ie6-8使用比如不让链接跳转
e.preventDefault()	该方法阻止默认事件(默认行为) 标准比如不让链接跳转
e.stopPropagation()	阻止冒泡标准

e.target 和 this 的区别：

e.target 点击了哪个元素，就返回那个元素

this 哪个元素绑定了这个点击事件，那么就返回谁

    <div>123</div><ul><li>1</li><li>2</li><li>3</li></ul><script>//e.target 返回的是触发事件的对象（元素）//this 返回的是绑定事件的对象（元素）var div = document.querySelector('div');div.addEventListener('click', function(e) {console.log(e.target);console.log(this);})</script>

事件阻止默认行为

    <div>123</div><a href="http://felikschen.vcn.ink/">我的主页</a><form action="http://felikschen.vcn.ink/"><input type="submit" name="sub" value="提交"></form><script>//阻止默认行为：链接不跳转 或 提交按钮不提交var a = document.querySelector('a');a.addEventListener('click', function(e) {e.preventDefault(); //DOM 标准写法})</script>

阻止事件冒泡

两种方式

事件冒泡∶开始时由最具体的元素接收，然后逐级向上传播到到DOM最顶层节点。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。

阻止事件冒泡

标准写法：利用事件对象里面的stopPropagation()方法

    <div class="father"><div class="son">son盒子</div></div>
<script>var son = document.querySelector('.son');son.addEventListener('click', function(e) {alert('son');e.stopPropagation();}, false);
</script>

非标准写法，兼容IE678 e.cancelBubble = true;

事件委托（代理、委派）

事件委托也称为事件代理，在jQuery里面称为事件委派。

事件冒泡本身的特性，会带来的坏处，也会带来的好处，需要我们灵活掌握。生活中有如下场景∶
咱们班有100个学生，快递员有100个快递，如果一个个的送花费时间较长。同时每个学生领取的时候，也需要排队领取，也花费时间较长，何如?
**解决方案:**∶快递员把100个快递，委托给班主任，班主任把这些快递放到办公室，同学们下课自行领取即可。
优势︰快递员省事，委托给班主任就可以走了。同学们领取也方便，因为相信班主任。

 <ul><li>123</li><li>123</li><li>123</li><li>123</li><li>123</li>
</ul>

点击每个li都会弹出对话框，以前需要给每个li注册事件，是非常辛苦的，而且访问DOM的次数越多，这就会延长整个页面的交互就绪时间。

事件委托的原理

♥不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

以上案例:给ul注册点击事件，然后利用事件对象的target 来找到当前点击的li，因为点击li，事件会冒泡到ul上，ul有注册事件，就会触发事件监听器。

委托的作用

只操作了一次DOM，提高了程序的性能

    <ul><li>123</li><li>123</li><li>123</li><li>123</li><li>123</li></ul><script>var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// alert('feliks');for (var i = 0; i < ul.children.length; i++) {this.children[i].style.backgroundColor = '';}e.target.style.backgroundColor = 'pink';})</script>

常用的鼠标事件

禁止鼠标右键菜单

contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

 document.addEventListener('contextmenu', function(e) {e.preventDefault();})

禁止鼠标选中(select start 开始选中)

    我是一段不愿意被分享的文字<script>//1.禁止右键document.addEventListener('contextmenu', function(e) {e.preventDefault();});//2.禁止选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();})</script>

鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent.

    <script>//鼠标事件对象 MouseEventdocument.addEventListener('click', function(e) {//1. client 相对于可视区域console.log(e.clientX);console.log(e.clientY);//2. page 相对于文档页面的x和y坐标console.log(e.pageX);console.log(e.pageY);//3.screen 相对于文档页面的x和y坐标console.log(e.screenX);console.log(e.screenY);})</script>

跟随鼠标

<style>img {position: absolute;}
</style><body><img src="../../images/睁眼.png" alt=""><script>var pic = document.querySelector('img');document.addEventListener('mousemove', function(e) {// console.log(e);//核心原理：每次移动鼠标，获得最新的鼠标坐标，把这个x,y作为图片的left和top即可var x = e.pageX;var y = e.pageY;//记得加 单位pxpic.style.left = x + 'px';pic.style.top = y + 'px';})</script>

常用的键盘事件

键盘事件	触发条件
onkeyup	某个键被松开时触发
onkeydown	某个键被按下时触发可识别功能键
onkeypress	某个键被按下时触发但是它不识别功能键如ctrl shift箭头等

    <script>//1.keyup 键盘弹起触发document.addEventListener('keyup', function() {console.log('我弹起了');})//2.onkeydown 键盘按下触发document.addEventListener('keydown', function() {console.log('我按下了');})//pressdocument.addEventListener('keypress', function() {console.log('我按下了press');})</script>

执行顺序：

keydown–>keypress–>keyup

    <script>document.addEventListener('keyup', function(e) {// console.log(e);console.log('keyup' + e.keyCode);//1. keyup 和 keydown事件不区分字母大小写//2. keypress 区分if (e.keyCode == 65) {alert('a');}})document.addEventListener('keypress', function(e) {console.log('press' + e.keyCode);})</script>

按键输入内容案例

核心思路∶

检测用户是否按下了s键，如果按下s键，就把光标定位到搜索框里面
使用键盘事件对象里面的keyCode判断用户按下的是否是s键
搜索框获得焦点:使用js 里面的 focus)方法

    <input type="text"><script>var search = document.querySelector('input');document.addEventListener('keyup', function(e) {if (e.keyCode == 83) {search.focus();}})</script>

快递单号查询案例

快递单号输入内容时，上面的大号字体盒子( con )显示(这里面的文字
同时把快递单号里面的值( value )获取过来赋值给con盒子( innerText )做为内容
如果快递单号里面内容为空，则隐藏大号字体盒子(con)盒子
注意：keydown和keypress在文本框里面的特点：他们两个事件触发的时候，文字还没有落入到文本框中
keyup事件触发的时候，文字已经落入文本框里面了

<style>.con {display: none;}
</style><body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入快递单号" class="jd"></div><script>//var con = document.querySelector('.con');var jd_ipt = document.querySelector('.jd');jd_ipt.addEventListener('keyup', function() {if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerHTML = this.value;}})//失去焦点，隐藏盒子jd_ipt.addEventListener('blur', function() {con.style.display = 'none';})//获得焦点，隐藏盒子jd_ipt.addEventListener('focus', function() {if (this.value !== '') {con.style.display = 'block';}})</script>

javascript二——事件相关推荐

JavaScript的事件系列二keydown,keypress,获取键码------JavaScript学习之路4
JavaScript的事件系列二判断热键shift,ctrl,alt,win shiftkey 当shift按下时为true,默认为false var v = ev || window.event; ...
Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...
html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
JavaScript为事件处理器传递参数 (转）
首先参考:javascript attachEvent和addEventListener 使用方法 attachEvent方法,为某一事件附加其它的处理事件.(不支持Mozilla系列) addEve ...
原生JS javascript解除绑定事件 JS删除绑定事件
原生JS javascript解除绑定事件 JS删除绑定事件一.直接删除法 1.适用于直接绑定的事件,如: <h1 id="h1" onclick="_click ...
JavaScript中事件回顾
事件其实在第一次学习JavaScript的时候就接触了,一行非常简单的代码 alert('Hello JavaScript!!!')就诠释了什么是事件.事件是什么呢?事件在基于浏览器编程的语言Java ...
深入理解JavaScript的事件循环（Event Loop）一、什么是事件循环
深入理解JavaScript的事件循环(Event Loop) 一.什么是事件循环 JS的代码执行是基于一种事件循环的机制,之所以称作事件循环,MDN给出的解释为因为它经常被用于类似如下的方式来实现 ...
java鼠标js触发事件吗,JavaScript鼠标事件是什么？JavaScript鼠标事件详解
js中是比较简单的语言,然而js的精髓就是js事件,这也是js当中最重要的部分,很多人对JavaScript鼠标事件是什么还不是很了解,下面我们对JavaScript鼠标事件进行详解. 一:在js中, ...
JavaScript touch 事件 touchstart touchmove touchend
JavaScript touch 事件 touchstart touchmove touchend MDN 官方文档: https://developer.mozilla.org/en-US/docs ...

javascript二——事件

文章目录

注册事件（绑定事件）

addEventListener 事件监听方式

删除事件（解绑事件）

删除事件的方式

DOM事件流

事件对象

事件对象的常见属性和方法

事件阻止默认行为

阻止事件冒泡

两种方式

阻止事件冒泡

事件委托（代理、委派）

事件委托的原理

委托的作用

常用的鼠标事件

鼠标事件对象

跟随鼠标

常用的键盘事件

按键输入内容案例

快递单号查询案例

javascript二——事件相关推荐

最新文章

热门文章