<!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---->冒泡
* 一般默认都是冒泡阶段,很少用捕获阶段
* 冒泡阶段:从里向外
* 捕获阶段:从外向内
* */
