zoukankan      html  css  js  c++  java
  • 事件对象、事件流、关于冒泡、默认行为

    事件对象

    在触发事件的时候,会产生一个事件对象event,这个对象中包含了与事件相关的信息。 例如:在触发鼠标双击时,是触发了这几件事  onkeydown+onkeyup+onclick+onkeydown+onkeyup+onclick

    事件流

    当HTML元素产生一个事件时,这个事件会在元素节点与根节点之后的路径传播,路径所经过的节点都会接收到这个事件,这个传播过程称为DOM事件流。 DOM事件流分为冒泡事件流和捕获事件流。

    事件冒泡

    当一个元素的事件被触发时,同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡。当我们触发了子元素的事件后,父元素对应的事件也会被触发。这个事件从原始元素开始一直冒泡到DOM树的最上层。不管有没有注册事件都会冒泡,都没有事件的话就不会触发事件。只要有一层注册事件,它都会往上冒泡,对应的事件也会一层一层的被触发。

    在盒子套盒子的时候,1.当鼠标移到外盒子边框的时候会触发进出外盒子事件2.当接着进入内盒子会触发离开外盒子-进入内盒子-进入外盒子事件。

    在轮播图的时候,为什么不给内盒子添加移入事件,而给外盒子添加?

    因为内盒子与两个按钮是并列关系,当进入内盒子,它会触发显示按钮事件,接着你移到按钮上它会触发离开内盒子事件,接着冒泡,这时它向上冒泡给外盒子(真正离开内盒子了,隐藏按钮display:none,不占位置,会接着触发移入内盒子(显示按钮)-这里是个死循环),而不是内盒子,所以会出现闪动效果。

    给外盒子添加移入事件的时候,这时候外盒子与按钮时父子关系。当移入外盒子边框会触发移入外盒子事件,进入内盒子的时候会触发移出外盒子-进入内盒子(冒泡给外盒子)-进入外盒子,当鼠标移入按钮会触发移出内盒子(冒泡)-移出外盒子-进入按钮(冒泡)-进入外盒子(显示按钮),这些事件很快结束,所以不会出现闪动

    语法:target.addEventListener(type,listener,[useCapture]) 当useCapture为false的时候,使用事件冒泡机制,不使用捕获
    冒泡顺序:div-body-html-document(IE6)
    正常浏览器:div-body-html-document-window
    不是所有事件都能冒泡。以下事件不冒泡:blur、focus、load、unload(关闭页面)


    事件捕获:老版本浏览器只支持事件冒泡,不支持事件捕获。事件的处理将从DOM层次的根开始,而不是从触发事件的目标元素开始,事件被从目标元素的所有祖先元素依次往下传递。

    事件的三个阶段:
    1.捕获阶段 2.目标阶段 执行当前对象的事件处理程序 3.冒泡阶段
    注意:事件的三个阶段一直都在执行,只不过我们通常都会去干预冒泡阶段,而不会去干预捕获阶段。

    //停止事件冒泡
    function stopBubble(e) {
    // 如果提供了事件对象,则这是一个非IE浏览器
    if ( e && e.stopPropagation ) {
    // 因此它支持W3C的stopPropagation()方法
    e.stopPropagation();
    } else {
    // 否则,我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
    }


    } //阻止事件默认行为
    function stopDefault(e) {
    // 阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault ) {
    e.preventDefault();
    } else {
    // IE中阻止函数器默认动作的方式
    window.event.returnValue = false;
    }
    return false;
    }

  • 相关阅读:
    你看懂了程序员的这些笑话吗?
    SharePoint 2013 Designer 自己定义操作菜单
    Ubuntu下用glade和GTK+开发C语言界面程序(三)——学习make的使用方法
    【九】注入框架RoboGuice使用:(Your First Injected Service and BroadcastReceiver)
    LeetCode 122 Best Time to Buy and Sell Stock II
    Cocos2d-x 3.1.1 学习日志6--30分钟了解C++11新特性
    HDU 4914 Linear recursive sequence(矩阵乘法递推的优化)
    TS4
    angularjs1-过滤器
    angularjs1- ng-include
  • 原文地址:https://www.cnblogs.com/xzq1992/p/6040933.html
Copyright © 2011-2022 走看看