ソース
/* イベントハンドラを生成して、それを返す */
function logEvent(handlerName, type, cancel,
stop, stopImmediate) {
/* ここが実際のイベントハンドラ */
return function(evt) {
if(cancel) evt.preventDefault();
if(stop) evt.stopPropagation();
if(stopImmediate) evt.stopImmediatePropagation();
console.log(`${type}: ${handlerName}` +
(evt.defaultPrevented ? ' (キャンセルされた)' : ''));
}
}
/* 要素にイベントロガーを付加 */
function addEventLogger(element, type, action) {
const capture = type === 'capture';
element.addEventListener(
'click',
logEvent(element.tagName, type, action==='cancel',
action==='stop', action==='stop!'), capture);
}
const body = document.querySelector('body');
const div = document.querySelector('div');
const button = document.querySelector('button');
addEventLogger(body, 'capture');
addEventLogger(body, 'bubble');
addEventLogger(div, 'capture');
addEventLogger(div, 'bubble');
addEventLogger(button, 'capture');
addEventLogger(button, 'bubble');