事件捕获和事件冒泡

addEventListener和removeEventListener

// type:事件类型,不含"on",比如"click"、"mouseover"、"keydown";
// 而attachEvent的事件名称,含含"on",比如"onclick"、"onmouseover"、"onkeydown";
// listener:事件处理函数
// useCapture是事件冒泡,还是事件捕获,默认false,代表事件冒泡类型,true表示事件捕获
addEventListener(type, listener, useCapture);

测试代码:

点击D区域

1. 当是事件捕获时(useCapture=true)：

   
   
   

   事件捕获.gif

2. 当是事件冒泡时(useCapture=false):

   
   
   

   事件冒泡.gif

3. 当AC为true，BD为false时:

   
   
   

   混合.gif