JavaScript中的事件（机制/冒泡、捕获与委托）。

1.事件

事件是您在编程时系统内发生的动作或者发生的事情，系统通过它来告诉您在您愿意的情况下您可以以某种方式对它做出回应。

事件类型参考：https://developer.mozilla.org/zh-CN/docs/Web/Events

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块。当我们定义了一个用来回应事件被激发的代码块的时候，我们说我们注册了一个事件处理器。注意事件处理器有时候被叫做事件监听器——从我们的用意来看这两个名字是相同的，尽管严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

Note：网络事件（不是 JavaScript 语言的核心）是被定义成内置于浏览器的JavaScript APIs。

2.事件处理器属性：

• onclick：点击触发事件

• btn.onfocus及btn.onblur ：光标离开/点击触发。

• btn.ondblclick ：双击。

• window.onkeypress, window.onkeydown, window.onkeyup ：按动键盘触发。

• keydown: 当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
  keypress: 当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
  （keypress事件存在跨浏览器问题，按下非字符键时有的也会触发keypress。）

  keyup: 当用户释放键盘上的按键时触发。

• btn.onmouseover 和 btn.onmouseout ：鼠标放置/移开

3.不要使用行内事件处理器。

//以下两种方式混用 HTML 和 JavaScript，使得文档很难解析。应该在一个地方写JS代码。
<button onclick="bgChange()">Press me</button>
-
function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}
或者：
<button onclick="alert('Hello, this is my old-fashioned event handler!');">Press me</button>

//即使在单一文件中，内置事件处理器也不是一个好主意。比如有100个button时。
//下面这样写才是好的选择：
var buttons = document.querySelectorAll('button');
for (var i = 0; i < buttons.length; i++) {
  buttons[i].onclick = bgChange;
}//给每个button都添加上了事件处理器。

4.addEventListener()和removeEventListener()

addEventListener()需要两个参数，一个是事件名称，一个是回应事件的代码。

var btn = document.querySelector('button');

function bgChange() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}   

btn.addEventListener('click', bgChange);
//也可以写成匿名函数如下：
btn.addEventListener('click', function() {
  var rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
});

//removeEventListener()

removeEventListener()是方法移除监听器，用来移除上个代码块中的事件监听器。

btn.removeEventListener('click', bgChange);

优点：

myElement.onclick = functionA;
myElement.onclick = functionB;
//不可以，第一个将会被覆盖。（只运行functionB）
myElement.addEventListener('click', functionA);
myElement.addEventListener('click', functionB);
//可以，点击时触发两个事件。（都运行）

两个函数详细使用方法：

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/removeEventListener

5.如何选择机制？（事件处理器/addEventListener() etc.）

• 事件处理程序属性：功能和选项会少，但是具有更好的跨浏览器兼容性(在Internet Explorer 8的支持下)。

• DOM Level 2 Events (addEventListener(), etc.) ：更强大，但也可以变得更加复杂，并且支持不足（只支持到Internet Explorer 9）。

6.其他事件概念

• 事件对象：事件在浏览器中是以对象的形式存在的，即event。触发一个事件就会产生一个事件对象event，该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件通常与函数结合，事件对象只有当事件发生的时候才产生，只能在处理函数内部调用，处理函数运行结束后自动销毁。一般使用：e / evt / event 作为事件对象。
• 阻止默认行为：事件不执行它的默认行为

var form = document.querySelector('form');
var fname = document.getElementById('fname');
var lname = document.getElementById('lname');
var submit = document.getElementById('submit');
var para = document.querySelector('p');
//onsubmit事件处理程序（在提交的时候，在一个表单上发起submit事件）
form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();//阻止提交
    para.textContent = 'You need to fill in both names!';
  }
}
//但是这是一种很弱的阻止行为，比如说当你输入空格的时候，就不会阻止你提交了:)

• 事件冒泡及捕获（两种机制）：主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。

  IE提出的事件流叫做事件冒泡。即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。

  网景公司提出的事件流叫事件捕获流。和冒泡完全相反。

  阻止：event.stopPropagation()

• 事件委托：

  事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数（事件委托），就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。Jquery的e.stopPropagation会阻止冒泡，意思就是到我为止，我以上（父类）事件就不要触发了。

  （引用：https://www.cnblogs.com/qq9694526/p/5653728.html）

<script>
    window.onload=function (){
        var odiv1=document.getElementById("div1");
        var odiv2=document.getElementById("div2");
        var odiv3=document.getElementById("div3");
 
        odiv1.addEventListener("click",function(){
            alert("div1");
        },true);//设置addEventListener的第三个参数为true，即捕获。
        odiv2.addEventListener("click",function(){
            alert("div2");
        },true);
        odiv3.addEventListener("click",function(){
            alert("div3");
        },true);
    }
</script>

【事件流：从页面中接受事件的顺序。】