1.事件冒泡和阻止
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<script >
function my$(id){
return document.getElementById(id);
}
//设置任意元素的中间的文本内容
function setInnnerText(element,text) {
if(typeof element.textContent=="undefined"){
element.innerText=text;
}else{
element.textContent=text;
}
}
</script>
<body>
<input type="button" value="创建一个p" id="btn"/>
哈哈哈
<input type="button" value="创建二个p" id="btn2"/>
<div id='dv'> </div>
<div id="dv1" style="width:500px ;height: 500px;background: red;">
<div id="dv2" style="width:400px ;height: 400px;background: green;">
<div id="dv3" style="width:300px ;height: 300px;background: orchid;"> </div>
</div>
</div>
<script>
//
//多个 元素冒泡多个事件有嵌套的关系;
//div1 和div2和div3点击事件都会发生
my$("dv1").onclick=function () {
console.log(this.id);
};
my$("dv2").onclick=function () {
console.log(this.id);
//阻止事件冒泡
window.event.cancelBubble=true;
};
//事件处理参数对象
my$("dv3").onclick=function () {
console.log(this.id);
//阻止事件冒泡IE支持
//e.stopPropagation();
//console.log(e);
};
document.body.onclick=function () {
console.log("颤抖吧,你们这些愚蠢的标签");
};
//事件冒泡从里到外
</script>
</body>
</html>
说明:
//事件有三个阶段:
/*
*
* 1.事件捕获阶段 :从外向内
* 2.事件目标阶段 :最开始选择的那个
* 3.事件冒泡阶段 : 从里向外
*
* 为元素绑定事件
* addEventListener("没有on的事件类型",事件处理函数,控制事件阶段的)
* 事件触发的过程中,可能会出现事件冒泡的效果,为了阻止事件冒泡--->
* window.event.cancelBubble=true;谷歌,IE8支持,火狐不支持
* window.event就是一个对象,是IE中的标准
* e.stopPropagation();阻止事件冒泡---->谷歌和火狐支持
* window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准
* 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替
* addEventListener中第三个参数是控制事件阶段的
* 事件的阶段有三个:
* 通过e.eventPhase这个属性可以知道当前的事件是什么阶段的
* 如果这个属性的值是:
* 1---->捕获阶段
* 2---->目标阶段
* 3---->冒泡
* 一般默认都是冒泡阶段,很少用捕获阶段
* 冒泡阶段:从里向外
* 捕获阶段:从外向内
* */
2事件的阶段
var objs=[my$("dv3"),my$("dv2"),my$("dv1")];
//遍历注册事件
objs.forEach(function (ele) {
//为每个元素绑定事件
ele.addEventListener("click", function (e) {
console.log(this.id+"====>"+e.eventPhase);
}, true);
});