JS-事件高级

tech2025-07-20 15

1.注册事件（绑定事件）

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

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

（1）传统注册方式

利用on开头的事件onclick

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)

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

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

4.事件对象

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

<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属性

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。

案例：跟随鼠标的天使

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

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事件触发的时候，文字以及落入文本框里面了

最新回复(0)