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

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

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

1.1 传统方式注册

利用on开头的事件 onlick
<button onclick = "alert(1)"></button>
btn.onclick = function() {}
特点：注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数将会覆盖前面注册的处理函数

    <button>传统注册事件</button><button>方法监听注册事件</button><script>var btns = document.querySelectorAll('button');//唯一性原则，只会弹出1，不会弹出hi~btns[0].onclick = function() {alert('hi~');}btns[0].onclick = function() {alert('1'); }</script>

1.2 方法监听注册方式

W3C标准推荐
addEventListener() 是一个方法
IE9之前的IE不支持，可以用attachEvent() 代替
特点：同一个元素同一个时间可以注册多个监听器
按注册顺序依次执行

1）`addEventListener` 事件监听方式（IE9以上）

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

将指定的监听器注册到evevtTarget（目标对象）上，当该对象触发指定的事件时，就会执行事件处理函数。

该方法接收三个参数：

参数	说明
type	事件类型字符串，比如click、mouseover，注意这里不要带on
listener	事件处理函数，事件发生时，会调用该函数
useCaption	可选参数，是一个布尔值，默认是false

 <button>传统注册事件</button><button>方法监听注册事件</button><script>var btns = document.querySelectorAll('button');//1. 传统方式注册事件//唯一性原则，只会弹出1，不会弹出hi~btns[0].onclick = function() {alert('hi~');}btns[0].onclick = function() {alert('1');}//2. 事件侦听注册事件 里面的事件类型是字符串，必须加引号，而且不带on//先弹出22，再弹出33btns[1].addEventListener('click', function() {alert(22);})btns[1].addEventListener('click', function() {alert(33);})</script>

2）`attachEvent` 事件监听方式（非标准）

eventTarget.attachEvent(evevtNameWithOn, callback)

将指定的监听器注册到eventTarget（目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行。

该方法接收的两个参数：

参数	说明
eventNameWithOn	事件类型字符串，比如onclick、onmouseover，这里要带on
callback	事件处理函数，当目标触发事件时回调函数被调用

2. 删除事件（解绑事件）

1. 传统注册方式

eventTarget.onclick = null;

2. 方法监听注册方式

eventTarget.removeEventListener(type, listener[ , useCaption]);
eventTarget.datachEvent(eventNameWithOn, callback);

 <div>1</div><div>2</div><div>3</div><script>var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);//1. 传统方式删除事件divs[0].onclick = null;}//2. removeEventListener 删除事件divs[1].addEventListener('click', fn)function fn() {alert(22);divs[1].removeEventListener('click', fn);}//3. eventTarget.datachEvent(eventNameWithOn, callback);divs[2].attachEvent('onclick', fn1);function fn1() {alert(33);divs[2].detachEvent('onclick', fn1);}</script>

3. DOM事件流

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

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

DOM事件流分为三个阶段：

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

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：由DOM最顶层节点开始，然后逐级向下传播到最具体的元素接收的过程

注意：

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

onclick 和 attachEvent 只能得到冒泡阶段

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

实际开发中很少用事件捕获，更关注事件冒泡

有些事件是没有冒泡的，如onblur、onfocus、onmouseenter、onmouseleave

 <style>.father {overflow: hidden;width: 300px;height: 300px;margin: 100px auto;background-color: pink;text-align: center;}.son {width: 200px;height: 200px;margin: 50px;background-color: purple;line-height: 200px;color: #fff;}</style>
</head><body><div class="father"><div class="son">son盒子</div></div><script>//dom事件流 三个阶段//捕获阶段//第三个参数是true则处于捕获阶段 document -> html -> body -> father -> sonvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, true);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, true);//冒泡阶段 //第三个参数是false或者省略，则处于冒泡阶段 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>
</body>

4. 事件对象

 <div>123</div><script>var div = document.querySelector('div');//1. event是事件对象，写到侦听函数的小括号里面//2. 事件对象只有有了事件才会存在，他是系统自动创建的，不需要我们传递参数//3. 事件对象是我们事件的一系列相关数据的集合，跟事件相关的：比如鼠标点击里面包含了鼠标的相关信息、鼠标坐标；//键盘事件包含键盘事件的信息，如按下了哪个键    //4. 事件对象可以自己命名，如event、evt、e等//5. 有兼容性问题，ie678通过window.eventdiv.onclick = function(event) {console.log(event);}div.addEventListener('click', function(e) {console.log(e);})</script>

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

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

5. 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

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

阻止事件冒泡

标准写法：利用事件对象里面的 stopPropagation() 方法
e.stopPropagation()
非标准写法：IE6-8利用事件对象cancelBubble属性

5.2 阻止事件冒泡的兼容性解决方案

if(e && e.stopPropagation) {e.stopPropagation;
} else {window.event.cancelBubble = true;
}

6. 事件委托（代理、委派）

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

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

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

作用：
只操作了一次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('123');// e.target可以得到点击的对象e.target.style.backgroundColor = 'pink';})</script>
</body>

7. 常用的鼠标事件

7.1 常用的鼠标事件

鼠标事件	触发条件
onclick	鼠标点击左键触发
onmouseover	鼠标经过触发
onmouseout	鼠标离开触发
onfocus	获得鼠标焦点触发
onblur	失去鼠标焦点触发
onmousemove	鼠标移动触发
onmouseup	鼠标弹起触发
onmousedown	鼠标按下触发

1. 禁止鼠标右键菜单

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

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

2. 禁止鼠标选择（selectstart 开始选择）

document.addEventListener('selectstart', function(e) {e.preventDefaule();
})

7.2 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合。

现阶段主要用鼠标事件对象MouseEvent和键盘事件对象KeyboardEvent。

鼠标事件对象	说明
e.clientX	返回鼠标相对于浏览器窗口可视区的X坐标
e.clientY	返回鼠标相对于浏览器窗口可视区的Y坐标
e.pageX	返回鼠标相对于文档页面的X坐标 IE9+支持
e.pageY	返回鼠标相对于文档页面的Y坐标 IE9+支持
e.screenX	返回鼠标相对于电脑屏幕的X坐标
e.screenY	返回鼠标相对于电脑屏幕的Y坐标

8. 常用键盘事件

8.1 常用键盘事件

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

注意：

如果使用addEventListener不需要加on
onkeypress 不识别功能键，如 ctrl、shift、箭头等
三个事件的执行顺序：keydown – keypress – keyup

8.2 键盘事件对象

键盘事件对象属性	说明
keyCode	返回该键的ASCII值

注意：
onkeydown 和 onkeyup 不区分字母大小写，onkeypress 区分字母大小写。

实际开发中更多使用onkeydown 和 onkeyup ，因为它们可以识别所有键。

DOM - DOM事件高级相关推荐

黑马程序员pink老师前端入门教程，零基础必看的JavaScript基础语法视频教程（DOM，事件高级）
DOM 节点操作父节点和子节点第一个子元素和最后一个子元素新浪下拉菜单案例兄弟节点创建和添加节点简单版发布留言案例删除节点删除留言案例复制节点动态生成表格-创建学生数据动态生成表 ...
JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
13前端学习之WebAPI(三):节点操作、事件高级、DOM事件流、事件委托冒泡
文章目录一.节点操作: 1. 删除节点: 1.2. 案例:删除留言 2. 赋值(克隆)节点: 3. 案例:动态生成表格: 3.1 案例分析: 3.2 实现: 4. 创建元素的三种方式: 4.1 区别 ...
JavaScript之DOM(事件高级）
事件高级一.注册事件(绑定事件) 1.传统注册方式 2.方法监听注册方式 1.addEventListener 事件监听方式 2.attachEvent 事件监听方式 3.注册事件兼容性问题二.删 ...
小汤学编程之JavaScript学习day05——DOM、事件
一.DOM 1.DOM树状结构图 2.节点类型 3.document节点 4.element节点 5.CSS 二.事件链 1.JS的继承结构图 2.常用事件句柄 ...
javascript系列之DOM(三)---事件
javascript系列之DOM(三)---事件原文:javascript系列之DOM(三)---事件事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些 ...
python 全栈开发，Day51(常用内置对象,函数,伪数组 arguments,关于DOM的事件操作,DOM介绍)...
昨日内容回顾 1.三种引入方式1.行内js <div onclick = 'add(3,4)'></div>//声明一个函数function add(a,b){}2.内接js& ...
10-关于DOM的事件操作
[转]10-关于DOM的事件操作一.JavaScript的组成 JavaScript基础分为三个部分: ECMAScript:JavaScript的语法标准.包括变量.表达式.运算符.函数.if语句 ...
DOM注册事件的三种方式~满满的干货哦
Hello ~ 下面是对DOM注册事件的三种方式,希望可以帮助到有需要的小伙伴注册事件就是将JavaScript函数与指定的事件相关联. 当该事件被触发时,绑定的函数会被调用. HTML页面元素提供 ...
DOM及DOM二级事件
DOM Document Object Model 文档对象模型 javascript由三部分组成:ECMAScript.BOM.DOM DOM提供API来操作HTML页面,如:document下面的 ...

DOM - DOM事件高级

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

1.1 传统方式注册

1.2 方法监听注册方式

1）`addEventListener` 事件监听方式（IE9以上）

2）`attachEvent` 事件监听方式（非标准）

2. 删除事件（解绑事件）

1. 传统注册方式

2. 方法监听注册方式

3. DOM事件流

4. 事件对象

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

5. 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

5.2 阻止事件冒泡的兼容性解决方案

6. 事件委托（代理、委派）

7. 常用的鼠标事件

7.1 常用的鼠标事件

7.2 鼠标事件对象

8. 常用键盘事件

8.1 常用键盘事件

8.2 键盘事件对象

DOM - DOM事件高级相关推荐

最新文章

热门文章

DOM - DOM事件高级

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

1.1 传统方式注册

1.2 方法监听注册方式

1）addEventListener 事件监听方式（IE9以上）

2）attachEvent 事件监听方式（非标准）

2. 删除事件（解绑事件）

1. 传统注册方式

2. 方法监听注册方式

3. DOM事件流

4. 事件对象

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

5. 阻止事件冒泡

5.1 阻止事件冒泡的两种方式

5.2 阻止事件冒泡的兼容性解决方案

6. 事件委托（代理、委派）

7. 常用的鼠标事件

7.1 常用的鼠标事件

7.2 鼠标事件对象

8. 常用键盘事件

8.1 常用键盘事件

8.2 键盘事件对象

DOM - DOM事件高级相关推荐

最新文章

热门文章

1）`addEventListener` 事件监听方式（IE9以上）

2）`attachEvent` 事件监听方式（非标准）