zoukankan      html  css  js  c++  java
  • 事件传播流程

    什么是事件?

       事件是文档和浏览器窗口中发生的特定的交互瞬间。 事件是javascript应用跳动的心脏,也是把所有东西黏在一起的胶水,当我们与浏览器中web页面进行某些类型的交互时,事件就发生了。

     事件可能是用户在某些内容上的点击,鼠标经过某个特定元素或按下键盘上的某些按键,事件还可能是web浏览器中发生的事情,比如说某个web页面加载完成,或者是用户滚动窗口或改变窗口大小。

    什么是事件流:

       事件流描述的是从页面中接受事件的顺序,但有意思的是,微软(IE)和网景(Netscape)开发团队居然提出了两个截然相反的事件流概念,IE的事件流是事件冒泡流(event bubbling),而Netscape的事件流是事件捕获流(event capturing)。

       

    什么是事件冒泡:

           IE提出的事件流叫做事件冒泡,即事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点,看一下以下示例:

    $("div").click(function(event) {  
        alert("div clicked");  
    }); 
    
    $("p").click(function(event) {  
        alert("p clicked");  
    }); 
     
    
    $("span").click(function(event) {  
        alert("span clicked");  
    });  

    html代码:

    <div>
        <p>hello, <span>world!</span>
    </div>

    如果点击world,会一次弹出三个框”span clicked“,”p clicked“,”div clicked“。因为在点击span的时候,span的click事件向上传播到p的onclick函数里,然后再向上传播到div的onclick函数里。

    如果点击hello,会一次弹出两个框”p clicked“,”div clicked“。因为在点击p的时候,p的click事件向上传播到div的onclick函数里。

    如果点击div,就只会一次弹出一个框”div clicked“。

    那么怎么解决呢,我们来看一下

    1:return false

    $("div").click(function(event) {  
        alert("div clicked");  
    }); 
     
    $("p").click(function(event) {  
        alert("div clicked");
        return false;  
    }); 
    
    $("span").click(function(event) {  
        alert("span clicked");  
        return false;  
    });  

    2:调用even.stopPropagation()方法

    $("div").click(function(event) {  
        alert("div clicked");  
    });  
    $("span").click(function(event) {  
        alert("span clicked");  
        event.stopPropagation();  
    });  
  • 相关阅读:
    Oracle VM VirtualBox 虚拟机中桥接模式一直不能用 ,需要安装 VBoxNetLwf.inf
    Windows7窗口跑到屏幕外面
    手动操作群晖蜂鸣器指示灯方法
    DHT11温湿度传感器接入HomeBridge
    DIY树莓派Homebridge智能台灯
    群晖NAS局域网无法跑满千兆排查
    虚拟机性能监控与故障处理工具------JDK的命令行工具
    垃圾收集器与内存分配策略-内存分配与回收策略
    Minor GC 与Full GC有什么不一样
    java的关键字与保留字
  • 原文地址:https://www.cnblogs.com/Narkea/p/10493686.html
Copyright © 2011-2022 走看看