Event那些事Demo

事件监听

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

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

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

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

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,有时间再试