zoukankan      html  css  js  c++  java
  • event.target 和 event.currentTarget 的区别

    冒泡和捕获

    在页面中点击一个元素,事件是从这个元素的祖先元素中逐层传递下来的,这个阶段为事件的捕获阶段。当事件传递到这个元素之后,又会把事件逐成传递回去,直到根元素为止,这个阶段是事件的冒泡阶段。

    我们为一个元素绑定一个点击事件的时候,可以指定是要在捕获阶段绑定或者换在冒泡阶段绑定。 当addEventListener的第三个参数为true的时候,代表是在捕获阶段绑定,当第三个参数为false或者为空的时候,代表在冒泡阶段绑定。

    知道事件有这么一个穿透的过程之后,结合下面的例子,就可以很好来理解event.targetevent.currentTarget

    <div id="a">
        <div id="b">
          <div id="c">
            <div id="d"></div>
          </div>
        </div>
    </div>
    
    <script>
        document.getElementById('a').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('b').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('c').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });    
        document.getElementById('d').addEventListener('click', function(e) {
          console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
        });
    </script>

    上面事件的绑定都是在冒泡阶段的,当我们点击最里层的元素d的时候,会依次输出:

    target:d&currentTarget:d
    target:d&currentTarget:c
    target:d&currentTarget:b
    target:d&currentTarget:a

    从输出中我们可以看到,event.target指向引起触发事件的元素,而event.currentTarget则是事件绑定的元素,只有被点击的那个目标元素的event.target才会等于event.currentTarget

  • 相关阅读:
    Word Ladder
    Word Ladder II
    Valid Palindrome
    java 正则表达式-忽略大小写与多行匹配
    Vue自定义指令
    定义格式化时间的全局过滤器
    Vue过滤器的使用
    daterangepicker 设置默认值为空(转载)
    js时间戳与日期格式之间的互转
    Vuedevtools安装
  • 原文地址:https://www.cnblogs.com/yourself/p/8872967.html
Copyright © 2011-2022 走看看