【十四】JavaScript之DOM中的事件操作
【十四】JavaScript之DOM中的事件操作
【1】事件操作
-
所谓的事件(Event),其实就是用户与浏览器之间的一次交互过程或交互行为。
- 例如：用户输入一段内容，用户鼠标晃动一下等等。
-
js中提供了大量的事件操作给开发者, 在用户发生事件操作以后，进行反馈，响应。
-
事件类型有很多，但是操作基本都是一样的，只是里面的代码因为事件的不同，而执行的方式，属性不同而已。
【2】事件类型
- js中针对用户与浏览器之间的交互方式不同，提供了多种类型的事件，常用的有例如：鼠标事件、键盘事件、表单事件、窗口事件等。
| 类型 | 事件 | 描述 |
|---|---|---|
| 鼠标事件 | click | 鼠标点击事件 |
| 鼠标事件 | mouseover | 鼠标滑过事件 |
| 鼠标事件 | dblclick | 鼠标双击事件 |
| 鼠标事件 | mouseout | 鼠标离开事件 |
| 鼠标事件 | mouseup | 鼠标松开事件 |
| 鼠标事件 | mousedown | 鼠标按下事件 |
| 鼠标事件 | mousemove | 鼠标移动事件 |
| 表单事件 | focus | 获取焦点事件 |
| 表单事件 | blur | 失去焦点事件 |
| 表单事件 | change | 输入框/选择框值改变事件 |
| 表单事件 | select | 在文本框中选择文本时 |
| 表单事件 | submit | 表单提交 |
| 键盘事件 | keydown | 键盘按下 |
| 键盘事件 | keyup | 键盘松开 |
| 键盘事件 | onkeypress | 按下并松开 |
| 窗口事件 | onload | 页面加载内容完成以后自动触发当前事件 |
Title
(2)表单事件
- 表单事件一般是绑定表单元素的
Title
登录账号：
登录密码：
确认密码：
所在城市：
(3)键盘事件
- 一般是绑定window，document，表单输入类型元素的。
Title
(4)窗口事件
- 窗口事件一般只给window绑定。
Title
标题
【3】事件的绑定
基本使用
Title
- 1-内容
- 2-内容
- 3-内容
- 4-内容
- 5-内容
动态绑定事件[常用]
Title
hello
静态绑定事件
- 直接给标签元素以"on+事件名"这种方式绑定事件,称之为静态绑定
Title
动态绑定与静态绑定的区别
动态绑定，根据已存在的元素对象指定事件处理的，而静态绑定，实际上是根据HTML代码结合事件处理函数来处理的。所以针对元素如果属于js代码动态生成，动态绑定有可能无法处理。
以下情况使用动态绑定，就不好处理。
Title
【4】批量绑定事件
- 表示一次性给多个元素绑定事件
Title
- 1-
- 2-
- 3-
【5】事件的操作
- 在事件处理函数中，可以根据event事件处理机制，在函数内部通过当前时间对象完成事件周边操作
Title
【6】事件的传播机制
- 事件在用户触发时，实际上在js中内部处理过程中，分2个阶段：
- 冒泡阶段与捕获阶段。
- 冒泡阶段：
- 从事件发生的最开始元素(event.target)，从内层往外层，逐层查找事件处理函数，这个过程就是冒泡阶段。
- 捕获阶段：
- 从窗口(window)调用事件处理函数，从外层往内层逐步查找元素冒泡路径的过程，这就是捕获阶段。
【7】事件冒泡
Title
标题
文章内容
a标签内容
-
在事件触发时，事件的影响出内往外进行逐层传递，这个过程就是事件冒泡(Event Propagation)，有好处也有坏处。
-
好处：
- 我们可以批量的元素操作的事件，基于事件委托让父元素进行代理绑定，避免在动态绑定时对于动态生成的HTML元素不可控的情况。
-
坏处：
- 有时候父元素与子元素绑定同类型事件时，父元素不希望被触发的事件，会因为子元素被触发了而直接执行。
-
阻止事件冒泡
Title
登录
登录账号：
登录密码：
【8】事件委托
- 利用事件冒泡实现事件委托(也叫事件委派)
- 基于事件冒泡的特点，让子元素被触发事件以后的事件处理函数绑定到父元素中。
作业
关注人数 15.0万
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！