You are here
绑定事件 事件收听者 事件捕获 与冒泡
绑定事件
事件收听者
window.onload = function () {
window.onload = function () {
var btn = document.querySelector('.btn');
btn.onclick = function () {
console.log('被点了！');
};
btn.onmouseover = function () {
console.log('谁在上面');
};
btn.onmouseout = function () {
console.log('离开了');
};
};
事件收听者
window.onload = function () {
var btn = document.querySelector('.btn');
function showMessage(event) {
//console.log(event);
console.log('被点了');
}
btn.addEventListener('click', showMessage, false);
/*
btn.onclick = function () {
console.log('被点了！');
};
btn.onmouseover = function () {
console.log('谁在上面');
};
btn.onmouseout = function () {
console.log('离开了');
};*/
};
事件捕获 与冒泡
var listGroup = document.querySelector('.list-group');
function showMessage(event) {
console.log('点击了 ul');
//如果加上下面这一行就是阻止事件的传播 因为这里捕获的方式,所以.list-groupl里面的东西触发的点击事件不会被执行
//如果加上下面这一行就是阻止事件的传播 因为这里捕获的方式,所以.list-groupl里面的东西触发的点击事件不会被执行
//event.stopPropagation();
}
//第三个参数true 就是捕获 就是由外向里捕获 先执行 console.log('点击了 ul'); 再执行 console.log('点击了 lost');
//第三个参数true 就是捕获 就是由外向里捕获 先执行 console.log('点击了 ul'); 再执行 console.log('点击了 lost');
//第三个参数false 就是冒泡由里向外冒泡 先执行 console.log('点击了 lost'); 再执行 console.log('点击了 ul');
listGroup.addEventListener('click', showMessage, true);
var lost = document.getElementById('lost');
function showAnotherMessage(event) {
console.log('点击了 lost');
}
lost.addEventListener('click', showAnotherMessage, false);
普通分类: