JS-事件高级

tech2025-07-20  5

1.注册事件(绑定事件)

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

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

(1)传统注册方式

利用on开头的事件onclick

<button οnclick="alert('hi~')"></button>

btn.οnclick=function(){}

特点:注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数,最后注册的处理函数将会覆盖前面的注册的处理函数

(2)方法监听注册方式

w3c标准 推荐方式

addEventListener()它是一个方法

IE9之前的IE不支持此方法,可使用attachEvent()代替

特点:同一个元素同一个事件可以注册多个监听器

按注册顺序依次执行

 

addEventListener事件监听方式:

该方法接收三个参数:

type:事件类型字符串,比如click、mouseover、注意这里不要带on

listener:事件处理函数,当事件发生时,会调用该监听函数

useCapture:可选参数,时一个布尔值,默认是false。学完DOM事件流后,再进一步学习

attachEvent事件监听方式

该方法接收两个参数

eventNameWithOn:事件类型字符串,比如onclick、onmouseover,这里要带on

callback:事件处理函数,当目标触发事件时回调函数被调用

注册事件兼容性解决方案

兼容性处理的原则:首先照顾大多数浏览器,再处理特殊浏览器

<body> <button>传统事件注册事件</button> <button>方法监听注册事件</button> <button>ie9 attachEvent</button> <script> var btns = document.querySelectorAll('button'); //1.传统方式注册事件 btns[0].onclick = function () { alert('hi'); } btns[0].onclick = function () { alert('hao a you'); } //2.事件侦听注册事件 addEventListener 里面的事件类型是字符串 必定加引号 而且不带on //(1)里面的事件类型是字符串 必定加引号 而且不带on //(2)同一个元素 同一个事件可以添加多个侦听器(事件处理程序) btns[1].addEventListener('click', function () { alert(22); }) btns[1].addEventListener('click', function () { alert(2333333); }) //3.attachEvent ie9以前的版本支持 btns[2].attachEvent('onclick', function () { alert(11); }) </script> </body>

 

2.删除事件的方式

传统注册方式

evenrTarget.οnclick=null;

方法监听注册方式

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

eventTarget.detachEvent(eventNameWithOn,callback)

<style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>1</div> <div>2</div> <div>3</div> <script> var divs = document.querySelectorAll('div'); divs[0].onclick = function () { alert(1111); //1.传统方式删除事件 divs[0].onclick = null; } //2.removeEventListener 删除事件 //divs[1].addEventListener('click', fn); //里面的fn 不需要调用加小括号 function fn() { alert(222); divs[1].removeEventListener('click', fn); } //3. divs[2].attachEvent('onclick', fn1); function fn1() { alert(333); divs[2].detachEvent('onclick', fn1); } </script> </body>

 

3.DOM事件流

事件流描述的时从页面中接收事件的顺序

事件发生时会在元素节点之间按照特定顺序传播,这个传播过程DOM事件流

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

DOM事件流分为3个阶段

(1).捕获阶段

(2).当前目标阶段

(3).冒泡阶段

事件冒泡:IE最早提出,事件开始时由最具体的元素接收,然后逐渐向上传播到DOM最顶层节点的过程。

事件捕获:网景最早提出,由DOM最顶层节点开始,然后逐渐向下传播到最具体的元素接收的过程。

注意:

JS代码中只能执行捕获或者冒泡其中的一个阶段

onclick和attachEvent只能得到冒泡阶段

addEventListener(type,listener[,useCapture])第三个参数如果是true,表示在事件捕获阶段调用事件处理程序;如果是false(不写默认就是false),表示事件冒泡阶段调用事件处理程序

实际开发中我们很少使用事件捕获,我们更关注事件冒泡

有些事情是没有冒泡的,比如onblur、onfocus、onmouseenter、onmouseleave

事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做些事件,后面讲解

<style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: blue; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: blueviolet; line-height: 200px; color: #fff; } </style> </head> <body> <div class="father"> <div class="son">son盒子</div> </div> <script> //dom 事件流 三个阶段 //1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。 //2.onclick 和 attachEvent(IE) 只能得到冒泡阶段 //3. 捕获阶段 如果addEventListener 第三个参数是 true 那么则处于捕获阶段 document->html->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); //4. 冒泡阶段 如果addEventListener 第三个参数是 false 或者 省略 那么则处于冒泡阶段 son->father->body->html->document var 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> </body>

 

4.事件对象

<style> div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div>134</div> <script> //事件对象 var div = document.querySelector('div'); div.onclick = function (event) { console.log(event); console.log(window.event); event = event || window.event; console.log(event); } //div.addEventListener('click', function (e) { // console.log(e); //}) //1. event 就是 一个事件对象 写到我们侦听函数的 小括号里面 当形参来看 //2.事件对象只有有了事件才会存在,它是系统给我们自动创建的,不需要我们传递参数 //3.事件对象 是我们事件的一系列相关数据的集合 跟事件相关的 比如鼠标点击里面就包含了鼠标相关信息,鼠标坐标啊,如果是键盘事件里面就包含的键盘事件的信息 比如 判断用户按下了那个键 //4.这个事件对象我们可以自己命名 比如 event、evt、e //5.事件对象也有兼容性问题 ie678 通过window.event 兼容性写法 event = event || window.event; </script> </body>

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

<body> <div>123</div> <ul> <li>abc</li> <li>abc</li> <li>abc</li> </ul> <script> //常见事件对象的属性和方法 //1. e.target 返回的是触发事件的对象(元素) this返回的是绑定事件的对象(元素) //区别:e.target 点击了那个元素,就返回那个元素 this 那个元素绑定了这个点击事件,那么就返回谁 var div = document.querySelector('div'); div.addEventListener('click', function (e) { console.log(e.target); console.log(this); }) var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { //我们给ul 绑定了事件 那么this 就指向ul console.log(this); console.log(e.currentTarget); //e.target 指向我们点击的那个对象 谁触发了这个事件 我们点击的是li e.target 指向的就是li console.log(e.target); }) //了解兼容性 //div.onclick = function (e) { // e = e || window.e; // var target = e.target || e.srcElement; // console.log(target); //} //了解 跟 this 有个非常相似的属性 currentTarget ie678不认识 </script> </body> <body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub"> </form> <script> //常见事件对象的属性和方法 //1.返回事件类型 var div = document.querySelector('div'); div.addEventListener('click', fn); div.addEventListener('mouseover', fn); div.addEventListener('mouseout', fn); function fn(e) { console.log(e.type); } //2.阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交 var a = document.querySelector('a'); a.addEventListener('click', function (e) { e.preventDefault(); //dom 标准写法 }) //3.传统的注册方式 a.onclick = function (e) { //普通浏览器 e.preventDefault(); 方法 //e.preventDefault(); //低版本浏览器 ie678 returnValue 属性 // e.returnValue; //我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点: return 后面的代码不执行了,而且只限于传统的注册方式 return false; alert(11); } </script> </body>

阻止事件冒泡的两种方式

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

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

阻止事件冒泡

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

非标准写法:IE678 利用事件对象cancelBubble属性

<style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: blue; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: blueviolet; line-height: 200px; color: #fff; } </style> </head> <body> <div class="father"> <div class="son">son盒子</div> </div> <script> //常见事件对象的属性和方法 //阻止冒泡 dom 推荐的标准 stopPropagation var son = document.querySelector('.son'); son.addEventListener('click', function (e) { alert('son'); e.stopPropagation(); //stop 停止 Propagation 传播 e.cancelBubble = true; //cancel 取消 bubble泡泡 }, false); var father = document.querySelector('.father'); father.addEventListener('click', function () { alert('father'); }, false); document.addEventListener('click', function () { alert('document'); }); </script> </body>

6.事件委托(代理、委派)

事件冒泡本身的特性,会带来的坏处,也会带来好处,需要我们灵活掌握。生活中有如下场景:

咱班有100个学生,肯快递员有100个快递,如果一个一个的送花费时间较长。同时每个学生领取的时候,也需要排队领取,也花费时间较长,何如?

解决方案:快递员省事,委托给班主任就可以走了。同学们领取方便,因为相信班主任。

事件委托

事件委托也称为事件代理,在jQuery里面称为事件委托

事件委托的原理

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

事件委托的作用

我们只操作了一次DOM,提高了程序的性能

<body> <ul> <li>我是一个保安,上班为了下班</li> <li>我是一个保安,上班为了下班</li> <li>我是一个保安,上班为了下班</li> <li>我是一个保安,上班为了下班</li> <li>我是一个保安,上班为了下班</li> </ul> <script> //事件委托的核心原理:给父节点添加侦听器, 利用事件冒泡影响每一个子节点 var ul = document.querySelector('ul'); ul.addEventListener('click', function (e) { //alert('我是一个保安,上班为了下班'); //e.target 这个可以得到我们点击对象 e.target.style.backgroundColor = 'pink'; }) </script> </body>

 

7.常用的鼠标事件

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

鼠标事件对象

event对象代表事件的状态,跟事件相关的一系列信息的集合。现阶段我们主要学习鼠标对象MouseEvent和键盘事件对象KayboardEvent

<style> body { height: 3000px; } </style> </head> <body> <script> //鼠标事件对象 MouseEvent document.addEventListener('click', function (e) { //1.click 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('--------------------'); //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> </body>

案例:跟随鼠标的天使

这个天使图片一直跟随鼠标移动

<style> img { position: absolute; top: 20px; width: 100px; } </style> </head> <body> <img src="images/tians.jpg" alt=""> <script> var pic = document.querySelector('img'); document.addEventListener('mousemove', function (e) { //1.mousemove 只要我们鼠标移动1px 就会触发这个事件 //console.log(1); //2.核心原理: 每次鼠标移动,我们都会获得最新的鼠标坐标, 把这个x和y坐标作为图片的top和left值 就可以移动图片 var x = e.pageX; var y = e.pageY; console.log('x坐标是' + x, 'y的坐标是' + y); //3.千万不要忘记给left 和 top 添加px 单位 pic.style.left = x - 50 + 'px'; pic.style.top = y - 50 + 'px'; }) </script> </body>

8.常用的键盘事件

<body> <script> //常用的键盘事件 //1. keyup 按键弹起的时候触发 //document.onkeyup = function () { // console.log('我弹起了'); //} document.addEventListener('keyup', function () { console.log('我弹起了'); }) //2. keydown 按键按下的时候触发 能识别功能键 document.addEventListener('keydown', function () { console.log('我按下了'); }) //3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头 document.addEventListener('keypress', function () { console.log('我按下了press'); }) //4.三个事件的执行顺序 keydown -- keypress -- keyup </script> </body>

注意:

如果使用addEventListener不需要加on

onkeypress和前面2个的区别是,它不识别功能键,比如左右箭头,shift等

三个事件的执行顺序是:keydown --keypress--keyup

 

键盘事件对象

注意

keyup 和keydown 事件不区分字母大小写,keypress 区分字母大小写

在实际开发中,我们更多的使用kaydown和keyup,它能识别所有的键(包括功能键)

keypress不识别功能键,但是keyCode属性能区分大小写,返回不同的ASCII值

<body> <script> //键盘事件对象中的keyCode属性可以得到相应键的ASCII码值 //1.我们的keyup 和keydown 事件不区分字母大小写 a和A 得到的都是65 //2.我们的keypress 区分字母大小写 document.addEventListener('keyup', function (e) { //console.log(e); console.log('up:' + e.keyCode); //我们可以利用keyCode 返回的ASCII码值来判断用户按下了那个键 if (e.keyCode === 65) { alert('你按下了a键'); } else { alert('你没有按下a键'); } }) document.addEventListener('keypress', function (e) { console.log('press:' + e.keyCode); }) </script> </body>

案例:模拟京东案件输入内容

<body> <input type="text"> <script> //核心思路:检测用户是否按下了s键,如果按下了s键,就把光标定位到搜索框里面 //使用键盘事件对象里面的keyCode 判断用户是否按下的是s键 //搜索框获得焦点: 使用js 里面的 focus()方法 var search = document.querySelector('input'); document.addEventListener('keyup', function (e) { // console.log(e.keyCode); if (e.keyCode === 83) { search.focus(); } }) </script> </body>

案例:模拟京东快递单号查询

当我们在文本框输入内容时,文本框上面自动显示大字号的内容

注意:keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中

keyup事件触发的时候,文字以及落入文本框里面了

<style> * { margin: 0; padding: 0; } .search { position: relative; width: 178px; margin: 100px; } .con { display: none; position: absolute; top: -40px; width: 171px; border: 1px solid rgba(0, 0, 0, .2); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); padding: 5px 0; font-size: 18px; line-height: 20px; color: #333; } .con::before { content: ''; width: 0; height: 0; position: absolute; top: 28px; left: 18px; border: 8px solid #000; border-style: solid dashed dashed; border-color: #fff transparent transparent; } </style> </head> <body> <div class="search"> <div class="con">123</div> <input type="text" placeholder="请输入您的快递单号" class="jd"> </div> <script> //快递单号输入内容时, 上面的大号字体盒子(con)显示(这里面的字号更大) //表单检测用户输入: 给表单添加键盘事件 //同时把快递单号里面的值(value)获取过来赋值给 con盒子(innerText)作为内容 //如果快递单号里面内容为空,则隐藏大号字体盒子(con)盒子 var con = document.querySelector('.con'); var jd_input = document.querySelector('.jd'); jd_input.addEventListener('keyup', function () { //console.log('输入内容啦'); if (this.value == '') { con.style.display = 'none'; } else { con.style.display = 'block'; con.innerText = this.value; } }) //当我们失去焦点 就隐藏这个con盒子 jd_input.addEventListener('blur', function () { con.style.display = 'none'; }) //当我们获得焦点 就显示这个con盒子 jd_input.addEventListener('focus', function () { if (this.value !== '') { con.style.display = 'block'; } }) </script> </body>

 

最新回复(0)