获取dom 已绑定的事件_DOM(2)-事件及其绑定、事件流

1. 事件及其绑定

1.1 概念

事件：什么时候做什么事

执行机制：触发——响应

绑定事件（注册时间）三要素：

1. 事件源：给谁绑定事件
2. 事件类型：触发条件
3. 事件函数：响应内容，需要做什么

1.2 事件绑定

JavaScript解析器会给绑定事件添加一个监听，监听就是一直检测这个元素的状态，一旦出现触发条件，会立即执行响应内容。

1.2.1 属性绑定

DOM 0级中，常用监听方法是通过HTML行内属性绑定和DOM对象属性绑定。

HTML：

 <input id="btn" value="别点我" type="button" onclick="alert('你点我干嘛？')">

DOM：

 var btn = document.getElementById("btn");
 btn.onclick = function() {
    
   alert("你点我干嘛？");
   // this指向btn
   console.log(this);
 }

常见鼠标事件类型：

• onclick 鼠标左键单击
• ondbclick 鼠标左键双击
• onmousedown 鼠标左键按下触发
• onmouseup 鼠标按键放开时触发
• onmousemove 鼠标在元素上移动
• onmouseout 鼠标移出元素边界
• 更多类型可以查看文档 链接

属性事件绑定的弊端：同一属性中无法添加多个事件。因为属性的赋值会发生覆盖，只会保留最后一次赋值的内容。

事件绑定过程中，事件函数内部有this对象，它指向的是事件源元素，在上面例子中指向的就是btn，且不会因为环境不同（比如循环）而更改指向。

1.2.2 addEventL