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