事件监听

js绑定事件方式1

var $btn1 = document.querySelector('#btn1');
$btn1.onclick = function (e) {
    log('js绑定事件方式1');
}

document.querySelector('#btn1-unbind').onclick = function (e) {
    if ($btn1.onclick) {
        $btn1.onclick = null;
        log('解绑成功');
    }
}

js绑定事件方式2

var $btn2 = document.querySelector('#btn2');
var $bnt2Unbind = document.querySelector('#btn2-unbind');
var btn2EventHandler = function (e) {
    log('js绑定事件方式2');
};
$btn2.addEventListener('click', btn2EventHandler);
$bnt2Unbind.addEventListener('click', function (e) {
    $btn2.removeEventListener('click', btn2EventHandler);
    log('解绑成功，像我这种匿名函数是没法解绑');
});
document.querySelector('#btn2-unbind-test').addEventListener('click', function (e) {
    $bnt2Unbind.removeEventListener('click', function (e) {
        $btn2.removeEventListener('click', btn2EventHandler);
        log('解绑成功，像我这种匿名函数是没法解绑');
    });
    log('试了也不行，O(∩_∩)O~~');
});

事件阻止

1. preventDefault

百度一下（preventDefault）

var $ = document.querySelector.bind(document);
var a1EventHandler = function (e) {
    e.preventDefault();
    log('使用preventDefault阻止链接跳转, 双击可以移除该事件哦');
}
// 冒泡阶段触发
$('#a1').addEventListener('click', a1EventHandler, false);
$('#a1').addEventListener('dblclick', function (e) {
    this.removeEventListener('click', a1EventHandler);
    log('已经移除点击事件， 现在可以正常跳转了吧');
}, false);
// 捕获阶段触发
$('#parent1').addEventListener('click', function (e) {
    log('a1的祖宗，我是红色框,我是在捕获阶段触发的');
}, true);
// 冒泡阶段触发
$('#child1').addEventListener('click', function (e) {
    log('a1的父元素，我是绿色框,我是在冒泡阶段触发的');
}, false);

2. stopPropagation

百度一下（stopPropagation）

var $ = document.querySelector.bind(document);
var a1EventHandler = function (e) {
    e.stopPropagation();
    log('使用stopPropagation阻止事件冒泡，但是不能阻止默认行为');
}
// 冒泡阶段触发
$('#a2').addEventListener('click', a1EventHandler, false);

$('#a2').addEventListener('click', function (e) {
    e.stopPropagation();
    log('使用stopPropagation阻止事件冒泡，测试多次绑定');
}, false);

// 捕获阶段触发
$('#parent2').addEventListener('click', function (e) {
    log('a2的祖宗，我是红色框,我是在捕获阶段触发的');
}, true);
// 冒泡阶段触发
$('#child2').addEventListener('click', function (e) {
    log('a2的父元素，我是绿色框,我是在冒泡阶段触发的');
}, false);

3. stopImmediatePropagation

百度一下（stopImmediatePropagation）

var $ = document.querySelector.bind(document);
var a1EventHandler = function (e) {
    e.stopImmediatePropagation();
    log('使用stopImmediatePropagation阻止该元素的其他点击事件的执行而且也会阻止事件冒泡');
}
// 冒泡阶段触发
$('#a3').addEventListener('click', a1EventHandler, false);

$('#a3').addEventListener('click', function (e) {
    log('使用stopImmediatePropagation阻止事件冒泡，测试多次绑定');
}, false);

// 捕获阶段触发
$('#parent3').addEventListener('click', function (e) {
    log('a3的祖宗，我是红色框,我是在捕获阶段触发的');
}, true);
// 冒泡阶段触发
$('#child3').addEventListener('click', function (e) {
    log('a3的父元素，我是绿色框,我是在冒泡阶段触发的');
}, false);

4. return false

百度一下（return false）

var $ = document.querySelector.bind(document);
var a1EventHandler = function (e) {
    log('使用return false');
    return false;
}
// 冒泡阶段触发
$('#a4').addEventListener('click', a1EventHandler, false);

$('#a4').addEventListener('click', function (e) {
    log('使用return false测试多次绑定');
    return false;
}, false);

// 捕获阶段触发
$('#parent4').addEventListener('click', function (e) {
    log('a4的祖宗，我是红色框,我是在捕获阶段触发的');
}, true);
// 冒泡阶段触发
$('#child4').addEventListener('click', function (e) {
    log('a4的父元素，我是绿色框,我是在冒泡阶段触发的');
}, false);

据说 return false 在jQuery中是等价于preventDefault + stopPropagation，有时间再试