zoukankan      html  css  js  c++  java
  • js中addEventListener第三个参数涉及到的事件捕获与冒泡

    js中,我们可以给一个dom对象添加监听事件,函数就是

    addEventListener("click",function(){},true);

    很容易理解,第一个参数是事件类型,比如点击(click)、触摸(touchstart),

    第二个参数就是事件函数,

    比如我给一个button添加alert函数。

    window.onload=function(){
    document.getElementById("hello").addEventListener("onkeydown",function () {
    alert("hello");
    });
    }

    那么第三个参数是什么呢?这个参数设计到事件的捕获与冒泡,为true时捕获,false时冒泡。

    什么意思呢?

    我举个简单的例子,我有两个div和一个button,button在div2里面,div2在div1里面。如下图所示

    给button、div1、div2、都添加了click事件,分别alert button、div1、div2。

    window.onload=function(){
    document.getElementById("btn").addEventListener("click",function () {
    // body...
    alert("hello");
    });
    document.getElementById("div1").addEventListener("click",function(){
    alert("div1");
    });
    document.getElementById("div2").addEventListener("click",function(){
    alert("div2");
    });
    }

    那么问题就来了,我点击button,也相当于点击了div1和div2,那么,谁先出现呢?

    直观的讲,谁在上面,谁在下面。

    所以,在js中就分为了两个处理方法,冒泡和捕获。

    冒泡:从里面往外面触发事件,就是alert的顺序是 button、div2、div1。

    捕获:从外面往里面触发事件,就是alert的顺序是div1、div2、button。

    要想冒泡,就要将每个监听事件的第三个参数设置为false,也就是默认的值。

    要想捕获,就要将每个监听事件的第三个参数设置为true。

    好了,就讲这么多了。为了更好的理解冒泡和捕获,大家可以给三个事件的第三个参数随便设置,就是说不同时设置为true或false,

    给button为true,div1为false等等,根据结果就能更好的理解这两个概念了。

  • 相关阅读:
    Tomcat 配置用户认证服务供C#客户端调用
    Solr与HBase架构设计
    一个自定义MVP .net框架 AngelFrame
    Dell R720上的系统安装问题的解决办法(关于RAID建立磁盘阵列的技术)
    中文分词器性能比较
    关于RabbitMQ关键性问题的总结
    js基本类型与引用类型,浅拷贝和深拷贝
    sass初学入门笔记(一)
    Emmet插件比较实用常用的写法
    今天发现新大陆:haml和Emmet
  • 原文地址:https://www.cnblogs.com/zdhblog/p/6845879.html
Copyright © 2011-2022 走看看