JavaScript — 浏览器事件、冒泡和捕获、事件委托

目录

一、浏览器事件

1.事件处理程序 

2.addEventListener 

(1).添加处理程序

(2).移除处理程序

3.事件对象

4.对象处理程序handleEvent 

二、冒泡和捕获

1.冒泡

2.event.target

3.停止冒泡

4.捕获

三、事件委托 

---

一、浏览器事件

事件 是某事发生的信号。所有的 DOM 节点都生成这样的信号（但事件不仅限于 DOM）。

以下列举出了一些DOM事件

鼠标事件：

• click —— 当鼠标点击一个元素时（触摸屏设备会在点击时生成）。
• contextmenu —— 当鼠标右键点击一个元素时。
• mouseover / mouseout —— 当鼠标指针移入/离开一个元素时。
• mousedown / mouseup —— 当在元素上按下/释放鼠标按钮时。
• mousemove —— 当鼠标移动时。

键盘事件：

• keydown 和 keyup —— 当按下和松开一个按键时。

表单（form）元素事件：

• submit —— 当访问者提交了一个 <form> 时。
• focus —— 当访问者聚焦于一个元素时，例如聚焦于一个 <input>。

Document 事件：

• DOMContentLoaded —— 当 HTML 的加载和处理均完成，DOM 被完全构建完成时。

CSS 事件：

• transitionend —— 当一个 CSS 动画完成时。

1.事件处理程序 

        为了对事件作出响应，我们可以分配一个 处理程序（handler）—— 一个在事件发生时运行的函数。处理程序是在发生用户行为（action）时运行 JavaScript 代码的一种方式。

(1).HTML特性

处理程序可以设置在 HTML 中名为 on<event> 的特性（attribute）中。HTML 特性名是大小写不敏感的。

举个例子：

<input value="Click me" onclick="alert('Click!')" type="button">

 (2).DOM属性

可以使用 DOM 属性（property）on<event> 来分配处理程序。DOM 属性是大小写敏感的。

举个例子：

<input id="elem" type="button" value="Click me">
<script>
  elem.onclick = function() {
    alert('Thank you');
  };
</script>

因为这里只有一个 onclick 属性，所以我们无法分配更多事件处理程序。

处理程序中的 this 的值是对应的元素。就是处理程序所在的那个元素。

2.addEventListener 

上述分配处理程序的方式的根本问题是 —— 我们不能为一个事件分配多个处理程序。

addEventListener 和 removeEventListener