addEventListener参数和冒泡和捕获详细使用与说明

addEventListener第三参数冒泡和捕获详细说明

1.addEventListener参数说明

target.addEventListener(type, listener, useCapture);

参数一: type
表示监听事件类型的字符串。
参数二: listener
当所监听的事件类型触发时,会接收到一个事件通知(实现了 Event 接口的对象)对象。listener 必须是一个实现了 EventListener 接口的对象,或者是一个函数。有关回调本身的详细信息,请参阅事件监听回调
参数三: options 可选
一个指定有关 listener 属性的可选参数对象。可用的选项如下:
capture: Boolean,表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。(useCapture 默认为 false )

2.useCapture的冒泡和捕获区别,请看案例(最下方为源代码)

当点击div "fang4"时,useCapture的改变案例如下

2.1下方4个div的addEventListener中useCapture默认全为false时,触发事件顺序

addEventListener参数和冒泡和捕获详细使用与说明_第1张图片

2.2下方4个div的addEventListener中useCapture默认全为true时,触发事件顺序

addEventListener参数和冒泡和捕获详细使用与说明_第2张图片

2.3下方4个div的useCapture分别为fang1捕获true,fang2冒泡false,fang3捕获true,fang4冒泡false

addEventListener参数和冒泡和捕获详细使用与说明_第3张图片

2.4下方4个div的useCapture分别为fang1冒泡false,fang2捕获true,fang3冒泡false,fang4捕获true

addEventListener参数和冒泡和捕获详细使用与说明_第4张图片

源代码add.html

DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>addEventListenertitle>
head>
<body>
  <div id="fang1">fang1
   <div id="fang2">fang2
     <div id="fang3">fang3
       <div id="fang4">fang4
       div>
     div>
    div>
  div>
body>
<style>
  #fang1{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
  }
  #fang2{
    width: 150px;
    height: 150px;
    background-color: green;
  }
  #fang3{
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
  #fang4{
    width: 50px;
    height: 50px;
    background-color: olivedrab;
  }
  
style>
<script>
var fang1 = document.getElementById("fang1");
var fang2 = document.getElementById("fang2");
var fang3 = document.getElementById("fang3");
var fang4 = document.getElementById("fang4");

fang1.addEventListener("click", function(e){
  console.log(1)
},false)
fang2.addEventListener("click", function(e){
  console.log(2)
},false)
fang3.addEventListener("click", function(e){
  console.log(3)
},false)
fang4.addEventListener("click", function(e){
  console.log(4)
},false)
script>
html>

你可能感兴趣的:(js,javascript)