zoukankan      html  css  js  c++  java
  • 事件冒泡与默认行为

    Event

    在触发DOM上某个事件时,会产生一个事件对象event,这个对象包含着所有事件有关的信息(导致事件的元素、事件的类型、与特定事件相关的信息)

    所有浏览器都支持Event对象,但支持方式不同

    IE中的事件对象:window.event

    /*

    封装Event对象

    IE:window.event

    */

    function getEvent(event){

    return event?event:window.event;

    }

    事件冒泡

    什么是事件冒泡

    即事件开始时由最具体的元素(文档中嵌套最深的那个元素)接收,然后逐级向上传播到较不为具体的节点

    所有浏览器都支持事件冒泡

    <!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{

    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层次结构像水泡一样不断向上直至顶端

    阻止事件冒泡

    DOM中提供stopPropagation()方法,但IE不支持,使用event对象在事件函数中调用就行

    IE中提供的是,cancelBubble属性,默认为false,当它设置为true时,就是阻止事件冒泡,也是用event对象在事件函数中调用

    /*

    封装事件冒泡函数:

    document.all:判断浏览器是否是IE

    IE:cancelBubble

    Firefox:stopPropagation

    */

    function stopPropagation(e){

    var e = window.event || e;

    if(document.all){

    e.cancelBubble = true;

    }else{

    e.stopPropagation();

    }

    }

    jQuery中提供了stopPropagation()方法来停止事件冒泡,当需要时,只需用用event对象来调用就行,即event.stopPropagation();

    默认行为

    什么是默认行为

    网页元素,都有自己的默认行为,例如,单击超链接会跳转...

    阻止默认行为

    DOM中提供preventDefault()方法来取消事件默认行为,但是只有当cancelable属性设置为true的事件,才可以使用preventDefault()来取消事件默认行为,使用event对象在事件函数中调用就行

    IE中提供的是returnValue属性,默认为true,当它设置为false时,就是取消事件默认行为,也是用event对象在事件函数中调用

    复制代码

    /*

    封装阻止元素的默认行为函数

    IE:returnValue

    DOM:preventDefault

    */

    function preventDefaultAction(event){

    var event = window.event || event;

    if(document.all){

    //支持IE

    event.returnValue = false;

    }else{

    //IE不支持

    event.preventDefault();

    }

    }

    复制代码 jQuery中提供了preventDefault()方法来阻止元素的默认行为,只需要用event对象来调用就好,即event.preventDefault()

    如果想同时对事件对象停止冒泡和默认行为,可以在事件处理函数中返回false。这是对事件对象同时调用stopPropagation()方法和preventDefault()方法的一种简写方式

  • 相关阅读:
    小素典会员订阅协议
    vue项目自动构建工具1.0,支持多页面构建
    spring boot 框架根據 sql 創建語句自動生成 MVC層類代碼
    使用 docsify 創建自己的 markdown 文檔系統
    “衣”及其部分屬字
    js原型鏈與js繼承解析
    js 中怎么获取session 值和HTML标签的属性值
    layui table动态表头 改变表格头部 重新加载表格的方法
    throw throws Throwable 关联于区别
    静态代理和动态代理的区别和联系
  • 原文地址:https://www.cnblogs.com/jinhuixin/p/4266922.html
Copyright © 2011-2022 走看看