JavaScript 事件
JS 常见的事件类型
- JS 常见的事件类型
键盘事件
- keydown : 键盘按下事件
- keyup : 键盘 弹起事件
- keypress: 键盘挤压
鼠标事件
- click : 单击事件(按下鼠标的左键)
- dblclick : 双击事件 (在很短的时间内两次按下鼠标的左键)
- mousedown : 鼠标按下事件
- mouseup : 鼠标弹起事件
- mouseenter : 鼠标进入事件
- mouseleave : 鼠标离开事件
- mouseover : 鼠标在元素上
- mouseout : 鼠标在元素外
- mousemove : 鼠标移动事件
- mousewheel : 鼠标滚动事件
表单事件
- change : 值改变、且失去焦点 事件，主要多运用于 输入框、单选框、复选框、下拉列表
- blur : 失去焦点 事件
- focus : 获取焦点 事件
- input : 值改变 事件 ， 主要应用于 输入框
- submit : 表单 事件、只能应用于 form 表单上
其他事件
- load : 加载完成 事件， 主要应用于 body(网页)、图片
- scroll : 滚动条滚动事件
- resize : 容器大小发生改变
给 元素 绑定事件
- 在标签上， 通过 on + 事件名 的方式，绑定事件
- 使用 js 中 dom对象的 addEventListener 绑定事件 (官方推荐写法)
- 使用 Js 中的 dom 对象，直接 监听 某个事件
event 事件对象常见的属性
-
target : 获取 触发事件的源
-
keyCode : 在键盘事件下，可以获取键盘按下的键的编码
-
pageX , pageY : 在鼠标事件下，可以获取 鼠标相对于浏览器的坐标
-
preventDefault() : 阻止元素的默认行为
- a) form 表单 通过 submit 按钮会自动提交
- b) a 标签 href 自动跳转
- c) 多行文本框 textarea 回车自动换行
事件冒泡:
-
当 父元素 和 子元素 绑定了 相同的事件、触发子元素事件的时候，会同时触发父元素的事件，先触发子元素事件、在触发父元素事件、这种行为 被称为 事件冒泡
-
阻止冒泡的方式是 ：在 子元素绑定事件中，通过 event.stopPropagation() 来阻止冒泡
事件捕获:
- 当 父元素 和 子元素 绑定了 相同的事件、、触发子元素事件的时候，会同时触发父元素的事件，先触发 父元素事件、在触发子元素事件，这种行为 被 称为 事件捕获机制
JS 默认采用 事件冒泡机制
扫描二维码关注公众号，回复： 15021079 查看本文章
JS 事件委托机制
- JS 中可以将事件 委托给 它的的 父亲们
- 作用:
a) 可以减少事件的绑定次数
b) 可以给 未来的元素 绑定事件
- 作用:
事件委托主要通过 event.target 来实现的
下，可以获取键盘按下的键的编码
-
pageX , pageY : 在鼠标事件下，可以获取 鼠标相对于浏览器的坐标
-
preventDefault() : 阻止元素的默认行为
- a) form 表单 通过 submit 按钮会自动提交
- b) a 标签 href 自动跳转
- c) 多行文本框 textarea 回车自动换行
事件冒泡:
-
当 父元素 和 子元素 绑定了 相同的事件、触发子元素事件的时候，会同时触发父元素的事件，先触发子元素事件、在触发父元素事件、这种行为 被称为 事件冒泡
-
阻止冒泡的方式是 ：在 子元素绑定事件中，通过 event.stopPropagation() 来阻止冒泡
事件捕获:
- 当 父元素 和 子元素 绑定了 相同的事件、、触发子元素事件的时候，会同时触发父元素的事件，先触发 父元素事件、在触发子元素事件，这种行为 被 称为 事件捕获机制
JS 默认采用 事件冒泡机制
JS 事件委托机制
- JS 中可以将事件 委托给 它的的 父亲们
- 作用:
a) 可以减少事件的绑定次数
b) 可以给 未来的元素 绑定事件
- 作用:
事件委托主要通过 event.target 来实现的