这两个方面的知识，在妙味课堂中有听过，再次复习一下：

原文来自：【http://www.cnblogs.com/Essence/p/4266618.html】

事件冒泡与默认行为

 

在说事件冒泡之前，我们先说说事件对象（Event）

Event

  1. 在触发DOM上某个事件时，会产生一个事件对象event，这个对象包含着所有事件有关的信息（导致事件的元素、事件的类型、与特定事件相关的信息）
  2. 所有浏览器都支持Event对象，但支持方式不同
  3. IE中的事件对象：window.event
　　　　　/*

            封装Event对象

            IE：window.event

         */

        function getEvent(event){

            return event?event:window.event;

        }

　　

事件冒泡

  1. 什么是事件冒泡
    1. 即事件开始时由最具体的元素（文档中嵌套最深的那个元素）接收，然后逐级向上传播到较不为具体的节点
    2. 所有浏览器都支持事件冒泡 
      <!DOCTYPE html>
      
<html>
      
<head>
      
<meta charset="utf-8">
      
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
      
<title>事件冒泡</title>
      
<meta name="description" content="">
      
<meta name="keywords" content="">
      
<link href="" rel="stylesheet">
      
<style>
      
    .one{
      
        width:400px;
      
        height:100px;
      
        border:1px solid #333;
      
    }
      
    .two{
      
        height:35px;
      
        line-height:35px;
      
        padding-left:15px;
      
        border:1px solid red;
      
    }
      
    .three{
      
        padding:10px;
      
        background-color: green;
      
        border:1px solid #999;
      
        cursor:pointer;
      
    }
      
</style>
      
<script src = "http://code.jquery.com/jquery-1.11.2.min.js"></script>
      
<script>
      
    $(function(){
      
        $(".one").click(function(event) {
      
            alert($(this).text());
      
        });
      
        $(".two").click(function(event) {
      
            alert($(this).text());
      
        });
      
        $(".three").click(function(event) {
      
            alert($(this).text());
      
        });
      
    });
      
</script>
      
</head>
      
<body>
      
    <div class="one">
      
        我是one(div)
      
        <p class="two">
      
            我是two（p）
      
            <span class="three">我是three（span）</span>
      
        </p>
      
    </div>
      
</body>
      
</html>

      当在span、p、div元素上各绑定一个click事件，当单击span元素时，会依次触发三个事件，即span、p、div元素上的click事件，这就是事件冒泡，按照DOM层次结构像水泡一样不断向上直至顶端

  2. 　　阻止事件冒泡
    1. DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行
    2. IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用 
      1. /*
        
         封装事件冒泡函数：
        
         document.all:判断浏览器是否是IE
        
         IE：cancelBubble
        
         Firefox：stopPropagation
        
        */
        
        function stopPropagation(e){
        
             var e = window.event || e;
        
             if(document.all){
        
                  e.cancelBubble = true;
        
             }else{
        
                  e.stopPropagation();
        
             }
        
        }
    3. jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

默认行为

  1. 什么是默认行为
    1. 网页元素，都有自己的默认行为，例如，单击超链接会跳转...
  2. 阻止默认行为
    1. DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行
    2. IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用
    3. /*
      
            封装阻止元素的默认行为函数
      
            IE：returnValue
      
            DOM：preventDefault
      
         */
      
        function preventDefaultAction(event){
      
            var event = window.event || event;
      
            if(document.all){
      
                //支持IE
      
                event.returnValue = false;
      
            }else{
      
                //IE不支持
      
                event.preventDefault();
      
            }
      
        }
    4. jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()
  3. 如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

javascript的阻止默认事件和阻止冒泡事件的更多相关文章

  1. 简单总结焦点事件、Event事件对象、冒泡事件

    每学习一些新的东西,要学会复习,总结和记录. 今天来简单总结一下学到的几个事件:焦点事件.Event事件对象.冒泡事件 其实这几个事件应该往深的说是挺难的,但今天主要是以一个小菜的角度去尝试理解一些基 ...

  2. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  3. jQuery阻止默认行为和阻止冒泡

    1.阻止默认行为:通常是值一个标签的默认行为,如button的提交表单,a标签的跳转等. 那如何阻止标签的默认行为? 1)return false 2) e.preventDefault(); < ...

  4. JQUERY中的事件处理：RETURN FALSE、阻止默认行为、阻止冒泡以及兼容性问题

    return false 在jQuery中,我们常用return false来阻止浏览器的默认行为,那"return false"到底做了什么? 当你每次调用"retur ...

  5. js 冒泡事件与解决冒泡事件

    事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到window . html代码: <div id="div1"> <div id= ...

  6. js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  7. js事件冒泡、阻止事件冒泡以及阻止默认行为

    事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...

  8. jquery阻止冒泡事件行为发生

    <div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...

  9. JQuery阻止冒泡事件on绑定中异常情况分析

    科普下事件冒泡以及默认行为,以下面例子举列子:     事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...

  10. 微信小程序--阻止冒泡事件

    微信小程序事件的使用方式 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数. <view id="tapTest ...

随机推荐

  1. 【译】用 `Wasmer` 进行插件开发 1

    [译]用 Wasmer 进行插件开发 1 Using Wasmer for Plugins Part 1 译文 原文链接 https://wiredforge.com/blog/wasmer-plug ...

  2. koa2第一天 安装koa2found 1 low severity vulnerability run `npm audit fix` to fix them, or `npm audit` for details

    安装全局koa2:npm install -g koa2 -generator 创建一个koa2文件夹:koa2 -e koa2 进入koa2文件夹:cd koa2 安装npm模块:npm insta ...

  3. 熬最深的夜喝最劣的酒————浅谈生成器（generator）

    测试(test)def s(): print("stup1") n = "第一步" yield n # 类似于return 但是又不同于 赖克宝,剁一下,跳一下 ...

  4. 一些 NuGet 程序包是使用不同于当前目标框架的目标框架安装的，可能需要重新安装

    如果 NuGet 检测到包受到重定向或升级项目的影响,它会将 packages.config 中的 requireReinstallation="true" 属性添加到所有受影响的 ...

  5. C语言数据结构——第二章 线性表

    二.线性表 2.1-线性表简介 2.1.1-线性表的定义 线性表是由若干个相同特性的数据元素组成的有限序列.若该线性表不包含任何元素,则称为空表,此时长度为0,当线性表不为空时,表中的元素的个数就是线 ...

  6. Java - 闭包

    概述 简单介绍 闭包 1. 聚合关系 概述 常见的 类间关系 场景 类 A 主要类 持有 类B 的实例 有点行为, 需要 类 B 的介入 类 B 有自己的行为 A 会在某些时候调用 B 的行为 代码示 ...

  7. IDE - IDEA - tab - 方法相关的移动

    1. 概述 标题可能会改 一个 tab 里方法相关的操作 2. 前提 以默认的模式编辑 tab 对我来说, 就关掉 vim 插件 3. 操作 1. 查看文件结构 概述 唤出当前文件的 结构 唤出后可以 ...

  8. PHP array_chunk() 妙用

    定义和用法 array_chunk()函数把一个数组分割为新的数组块. array_chunk(array,size,preserve_keys); 参数 描述 array 必需.规定要使用的数组. ...

  9. vim配置之——ctags与TagList的配置以及NERDTree && doxygentoolkit的安装

    参考(2)vim插件:显示树形目录插件NERDTree安装 和 使用 本文档主要对Linux下vim的ctags,TagList,NerdTree与doxgentoolkit进行相关的配置. 以下部分 ...

  10. Java进阶学习（3）之对象容器.小练习

    查找里程(10分) 题目内容: 下图为国内主要城市之间的公路里程: 你的程序要读入这样的一张表,然后,根据输入的两个城市的名称,给出这两个城市之间的里程. 注意:任何两个城市之间的里程都已经给出,不需 ...