事件捕获与冒泡
一.冒泡:是由最里面的的元素向外面进行传递,默认(捕获则相反)
阻止冒泡(捕获)
w3c标准:event.stopPropagation
IE:event.cancelBunnle=true
二.(行为:)事件委托
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
d1.onclick = function(){
alert("中国")
}
d2.onclick = function(){
alert("湖北")
}
d3.onclick = function(){
alert("武汉")
}
绑定事件二级写法:时间监听器
dom.addEventListener(事件名称。处理函数callback [,boolean])
ccallback叫回调函数;当函数的参数为一个函数的时候,我们管这种参数叫回调函数
[]表示的是可选参数,任何的手册都是一样
false为冒泡阶段 默认的值
true为捕获阶段
d1.addEventListener('click',function(event){
var event = event || window.event;//兼容性
alert("中国")
event.stopPropagation(); //阻止捕获
},false);
d2.addEventListener('click',function(){
alert("湖北")
},false);
d3.addEventListener('click',function(event){
var event = event || window.event;
alert("武汉")
event.stopPropagation(); //阻止冒泡
},false);
二.行为(当你点击后带来的)
<a href="http://www.baidu.com">百度</a>
当你点击后所带来的的后果
点击a链接,后果是跳转
阻止默认行为:
var a = document.getElementsByTagName("a")[0];
a.onclick = function(event){
// return false;
var event = event || window.event;
event.preventDefault()
// 1.return false;
// 2 W3C标准.event.preventDefault() //IE9以下不兼容
// 3 老版本IE event.returnValue = false
}
鼠标右击事件:
document.oncontextmenu = function(){ //右击事件有带来后果
console.log('按了鼠标的右键')
return false
}
三.事件对象
var div01 = document.getElementById("div01");
var div02 = document.getElementById("div02");
div01.onclick = function(event){
// event是事件对象,有事件触发的时候就会产生的对象
// 兼容性
var event = event || window.event;
var target = event.target || event.srcElement; //可以拿到点击的子元素
console.log(event);
console.log(target);
}
四。事件委托
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(e){
e = e || window.event;//兼容性
var target = event.target || event.srcElement;
console.log(target.innerHTML);
}