js中的事件冒泡

简介: js中的事件冒泡
<!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---->冒泡

* 一般默认都是冒泡阶段,很少用捕获阶段

* 冒泡阶段:从里向外

* 捕获阶段:从外向内

* */

相关文章
|
22天前
|
JavaScript 前端开发
js开发:请解释事件冒泡和事件捕获。
JavaScript中的事件处理有冒泡和捕获两种方式。事件冒泡是从子元素向上级元素依次触发事件,而事件捕获则从最外层元素向内层元素传递。`addEventListener`的第三个参数可设定事件模式,`false`或不设为冒泡,`true`为捕获。例如: ```javascript element.addEventListener(&#39;click&#39;, console.log, false); // 冒泡 element.addEventListener(&#39;click&#39;, console.log, true); // 捕获 ```
13 0
|
3月前
|
JavaScript
js中的事件冒泡和事件捕捉
js中的事件冒泡和事件捕捉
12 0
|
3月前
|
JavaScript 前端开发
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
【面试题】对JS中的事件冒泡、事件捕获、事件委托的理解
|
4月前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
28 2
|
6月前
|
JavaScript 前端开发
JavaScript学习 -- 事件冒泡与事件委派(委托)
JavaScript学习 -- 事件冒泡与事件委派(委托)
29 0
|
6月前
|
JavaScript 容器
js中的事件冒泡与事件捕获
js中的事件冒泡与事件捕获
16 0
|
8月前
|
JavaScript 前端开发
JS的冒泡和如何阻止事件冒泡
JS的冒泡和如何阻止事件冒泡
115 0
|
JavaScript 前端开发
简单解析js的事件冒泡及如何取消事件冒泡
简单解析js的事件冒泡 1.什么是事件冒泡? 以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时,点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下: 在这里插入图片描述 HTML代码: &lt;div class=&quot;box1&quot;&gt; &lt;div clas
简单解析js的事件冒泡及如何取消事件冒泡
|
JavaScript
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
88 0