本文深入探讨JavaScript事件处理，包括addEventListener、attachEvent的事件绑定，删除事件，DOM事件流的概念，事件对象的重要属性和方法，如阻止事件冒泡和默认行为。此外，重点讲解了事件委托技术及其应用，以及鼠标和键盘事件的坐标属性和keyCode属性在实际案例中的使用。
目录
复习一下事件基础的内容：也是DOM 重点核心内容
关于dom操作，我们主要针对于元素的操作。
主要学了元素的创建、增、删、改、查、以及元素属性操作、事件操作。
1）元素的创建
① document.write('<标签名>内容</标签名>');
② innerHTML='<标签名>内容</标签名>'；
③ document.creatElement('标签名');
注意：三种都要赋值给变量装起来
2）元素的增
①父元素.appendChild(子元素) // 在后面添加
②父元素.insertBefore(子元素，位置)；// 在前面追加
注意：通常是和document.creatElement('标签名'); 配合使用 ，先创建子节点，再把子节点添加到父节点中
3）元素的删
父元素.removeChild(子元素);
4）元素的改
5）元素的查
6）属性操作
7）事件操作
给元素注册事件， 采取 事件源.事件类型 = 事件处理程序
六、事件高级
6.1 注册事件（绑定事件）
1）概述
2）addEventListener 事件监听方式
3）attachEvent事件监听方式（了解）
4）用三种方式注册事件，体会它们的不同之处
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <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 u'); //由于唯一性，只能执行后面一个事件处理程序 } // 2. 事件侦听注册事件 addEventListener （推荐使用） // (1) 里面的事件类型是字符串 必定加引号 而且不带on // (2) 与传统方法不同的是：这种方式同一个元素 同一个事件可以添加多个侦听器（事件处理程序） btns[1].addEventListener('click', function () { alert(22); }) // 重点学习addEventListener（）函数的两个参数 btns[1].addEventListener('click', function () { alert(33); }) // 3. attachEvent ie9以前的版本支持 （不推荐，因为是非标准的）了解即可 // 有两个参数，事件必须加on，回调函数和上面一样 btns[2].attachEvent('onclick', function () { alert(11); }) </script> </body> </html>效果：
6.2 删除事件（解绑事件）
当我们点击一定次数的按钮后，可以通过disable的方式，禁用按钮，但其他元素没有这个属性来控制点击的次数，这时候就可以给点击事件解绑。
没有给div元素删除点击事件前：可以无限次地点击
注意：
用传统方式删除事件，是用 事件源.事件=null的形式。
用监听方式删除事件时，不能用匿名函数。
代码：（删除事件过后，只能点击一次）
<!DOCTYPE html> <html lang="en"> <head> <meta charset&
最低0.47元/天 解锁文章
扫一扫
250
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
