chaihongjun.me

JS事件捕获和冒泡Demo

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="">
    <ul>
      <li>Click on a layer to watch the event move through the DOM tree.</li>
    </ul>
  </div>
</body>
</html>

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 20px;
  transition: background 800ms;
}

html {
  height: 100%;
  background: hsl(193, 66%, 55%);
  font: bold 40px helvetica, sans-serif;
  color: red;
}

body {
  height: 100%;
  background: hsl(193, 66%, 65%);
}

div {
  height: 100%;
  background: hsl(193, 66%, 75%);
}

ul {
  height: 100%;
  list-style: none;
  background: hsl(193, 66%, 85%);
}

li {
  height: 100%;
  background: hsl(193, 66%, 95%);
}

.highlight {
  background: red;
}

JS:

var html = document.documentElement;
var body = document.body;
var div = body.querySelector('div');
var ul = body.querySelector('ul');
var li = body.querySelector('li');
var pause = 200;

 //Capture 事件捕获
html.addEventListener('click', callback, true);
body.addEventListener('click', callback, true);
div.addEventListener('click', callback, true);
html.addEventListener('click', callback, true);
ul.addEventListener('click', callback, true);
li.addEventListener('click', callback, true);

// Bubble 15:59冒泡
html.addEventListener('click', callback, false);
body.addEventListener('click', callback, false);
div.addEventListener('click', callback, false);
html.addEventListener('click', callback, false);
ul.addEventListener('click', callback, false);
li.addEventListener('click', callback, false);

function callback(event) {
  var ms = event.timeout = (event.timeout + pause) || 0;
  var target = event.currentTarget;
  
  setTimeout(function() {
    target.classList.add('highlight');
    setTimeout(function() {
      target.classList.remove('highlight');
    }, pause);
  }, ms);
}

http://jsbin.com/lojazabiga/edit?html,css,js,console,output


知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»