本文详细探讨了JavaScript中DOM事件的注册、删除、事件流、事件对象、阻止事件冒泡和事件委托。介绍了addEventListener和attachEvent的区别，以及事件流的捕获阶段、当前目标阶段和冒泡阶段。同时，讲解了事件对象的属性和方法，如何阻止事件冒泡，以及事件委托的概念和优点。还涉及了常用的鼠标和键盘事件。
文章目录
一，注册事件
1.1注册事件概述
给元素添加事件叫做注册事件或绑定事件
注册事件有两种方式：传统注册方式，方法监听注册方式
传统注册事件方式：
- 以on开头的事件onclick。
- 特点：注册事件的唯一性，同一个元素，同一个事件，只能设置一个处理函数，最后注册的处理函数会覆盖前面的处理函数
方法监听注册方式：
- addEventListener()方法
- 特点：同一个元素同一个事件可以注册多个监听器，按注册顺序依次执行。
- IE9之前的IE不支持此方法，可使用attachEvent()代替
1.2addEventListener事件监听方式
eventTarget.addEventListener(type,listener[,useCapture)]
该方法接受三个参数：
- type:事件类型字符串，click,mouseover等，这里不要加on.
- Listener:事件处理函数，事件触发时会调用这个函数。
- useCapture:可选参数，是一个布尔值，默认false。
<body>
<button>1</button>
<button>2</button>
<script>
var but = document.querySelectorAll('button');
// 传统注册方式(后面的处理函数会覆盖前面的处理函数)
but[0].onclick = function () {
alert('我是第一个按钮');
}
but[0].onclick = function () {
alert('又被点击了一次');
}
// 方法监听注册方式(按顺序依次执行处理函数)
but[0].addEventListener('click', function () {
alert('点击一次');
})
but[0].addEventListener('click', function () {
alert('点击两次');
})
</script>
</body>
1.3attachEvent事件监听方式
eventTarget.attachEvent(eventNameWithOn,callback)
- eventNameWitjOn:事件类型字符串，onclick,onmouseover.
- callback:事件处理函数
二，删除事件
当想要点击一次显示效果，再点击就不再显示效果，就用删除事件，写在处理函数里面
传统方式
- eventTarget.οnclick=null;
方法监听注册方式
- eventTarget.removeEventListener(type,Listener[,useCapture];
<body>
<button>1</button>
<button>2</button>
<script>
var but = document.querySelectorAll('button');
// 传统注册方式
but[0].onclick = function () {
alert('我是第一个按钮');
but[0].onclick = null;
}
// 方法监听注册方式
but[1].addEventListener('click', fn)
function fn() {
alert('点击了一次');
but[1].removeEventListener('click', fn);
}
</script>
三，DOM事件流
3.1事件流简述
事件流描述的就是从页面中接收事件的顺序。
（事件发生时，会在元素节点之间按照特定的顺序传播，这个传播的过程就叫DOM事件流。）
事件流分为三个阶段：
-
捕获阶段（从大到小，从上到下，有处理程序就运行，没有处理程序就往下传播）
-
当前目标阶段
-
冒泡阶段（从小到大，往上传播，有处理程序就运行，没有继续往上传播）
（事件冒泡：IE最早提出，事件开始时由最具体的元素接收。然后逐级向上传播到DOM最顶层节点的过程。
事件捕获：网景公司提出，事件开始时由DOM最顶层级开始，然后逐级向下传播到最具体的元素接收的过程。）
注意
-
JS只能执行冒泡或捕获其中一个阶段。
-
onclick,attachEvent只能得到冒泡阶段。
-
addEventListener(type,Listener[,Capture])第三个参数如果是true就是捕获阶段，如果是false或者为空就是冒泡阶段。
-
有些事件是没有冒泡的，onblur,onfocus,onmouseleave
-
实际开发中我们很少用事件捕获，我们更关注事件冒泡
四，事件对象
4.1简述事件对象
eventTarget.onclick=function(event){ } // 这个event就是事件对象，我们还喜欢写成e或者evt
eventTarget.addEventListener('click',function(event){ })
- event对象代表事件的状态，比如键盘按键的状态，鼠标的位置，鼠标按钮的状态。
- 简单理解为，事件发生后和这个事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象event，他有很多属性和方法。
- 这个event是个形参，系统帮我们设置成事件对象，不需要传递实参，当我们注册事件时，event对象就会被系统自动创建，并依次传递给事件监听器（处理函数）
- 事件对象里面包含了什么内容和事件有关
- 事件对象是事件一系列相关信息数据的集合
4.2事件对象的常见属性和方法
| 事件对象属性方法 | 说明 |
|---|---|
| e.target | 返回触发事件的对象 |
| e.type | 返回触发事件的类型 |
| e.preventDefault() | 阻止默认行为，链接跳转提交表单 |
| e.stopPropagation() | 阻止冒泡 |
e.target返回的是触发的事件，而this返回的是绑定的事件。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script>
var ul = document.querySelector('ul');
// e.target是点击谁返回谁,this是绑定了谁就返回谁
ul.onclick = function (e) {
console.log(e.target);
console.log(this);
}
</script>
</body>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<a href="https://www.baidu.com/">百度</a>
<script>
var ul = document.querySelector('ul');
// 返回事件类型
ul.addEventListener('click', function (e) {
console.log(e.type);
})
// 阻止默认行为
var a = document.querySelector('a');
a.addEventListener('click', function (e) {
e.preventDefault();
})
</script>
</body>
五，阻止事件冒泡
5.1阻止冒泡的两种方式
冒泡的坏处，点机子盒子如果父盒子也有处理程序也会运行，这时为了避免要用到e.stopPropagation()标准写法，非标准写法：e.cancelBubble=true;
- 事件冒泡：开始由最具体的元素接收，然后向上逐级传播最后传播到DOM顶层节点。
- 事件冒泡本身的特性，会带来好处也会带来坏处，要灵活掌握。
5.2事件委托
事件委托就是利用冒泡的好处。
事件委托也叫事件代理，在jQuery中称为事件委派。
事件委托的原理：
不是每个子节点单独设置事件监听器，而是给他的父节点设置事件监听器，然后利用冒泡原理影响设置的每个子节点。
核心原理：给父节点添加事件监听器，然后利用冒泡影响每一个子节点
<body>
<ul>
<li>知否</li>
<li>知否</li>
<li>知否</li>
<li>知否</li>
</ul>
<script>
// 给ul注册点击事件, e.target返回点击的小li, 给返回的小li添加样式, 点击小li, 由于冒泡行为会传递给ul, 触发ul的监听器, 让当前小li变色
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
// alert('不知绿肥红瘦');
// e.target可以获得我们点击的对象
e.target.style.backgroundColor = 'pink';
})
</script>
事件委托的作用：我们只操作了一次DOM。提高了程序的性能。
六，常用鼠标事件
| 鼠标事件 | 触发条件 |
|---|---|
| onclick | 鼠标点击 |
| onmouseover | 鼠标经过 |
| onmouseout | 鼠标离开 |
| onfocus | 获得鼠标焦点 |
| onblur | 失去鼠标焦点 |
| onmousemove | 鼠标移动 |
| onmouseup | 鼠标弹起 |
| onmousedown | 鼠标按下 |
| contextmenu | 禁用右键菜单 |
| selectstart | 禁止选中文字 |
<body>
<p>jdnejkenkj</p>
<script>
var p = document.querySelector('p');
// 禁止选中文字
p.addEventListener('selectstart', function (e) {
e.preventDefault();
})
// 禁用右键菜单
document.addEventListener('contextmenu', function (e) {
e.preventDefault();
})
</script>
</body>
6.1鼠标事件对象
event事件对象代表事件的状态，是事件一系列相关数据信息的集合，现阶段我们主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent.
| 鼠标事件对象 | 说明 |
|---|---|
| e.clientX | 返回鼠标相对于浏览器可视窗口的X坐标 |
| e.clientY | 返回鼠标相对于浏览器可视窗口的Y坐标 |
| e.pageX | 返回鼠标相对于文档页面的X坐标 |
| e.pageY | 返回鼠标相对于文档页面的Y坐标 |
| e.screenX | 返回鼠标相对于电脑屏幕的X坐标 |
| e.screenY | 返回鼠标先对于电脑屏幕的Y坐标 |
跟随鼠标移动案例
<style>
img {
position: absolute;
}
</style>
</head>
<body>
<img src="../DOM/images/angel.gif" alt="">
<script>
var img = document.querySelector('img');
document.addEventListener('mousemove', function (e) {
// 获取当前鼠标坐标
var x = e.pageX;
var y = e.pageY;
img.style.left = x - 48 + 'px';
img.style.top = y - 40 + 'px';
})
</script>
七，常用键盘事件
7.1常用键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 键盘弹起触发（不识别大小写，识别功能键） |
| onkeydown | 键盘按下触发（不识别大小写，识别功能键） |
| onkeypress | 键盘按下触发（识别大小写，不识别功能键） |
执行顺序：
7.2键盘事件对象
| 键盘事件对象属性 | 说明 |
|---|---|
| keyCode | 返回该键的ASCLL值 |
7.3ASCLL表
<body>
<script>
document.addEventListener('keyup', function (e) {
// 返回按下键的ASCLL值
console.log(e.keyCode);
})
document.addEventListener('keypress', function (e) {
// 返回按下键的ASCLL值可以区分大小写
console.log(e.keyCode);
})
</script>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
