zoukankan      html  css  js  c++  java
  • JavaScript事件对象属性e.target和this的区别

    前言:

    Event对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
    事件发生后,跟事件相关的一系列信息数据的集合都放到这个对象里面,这个对象就是事件对象event,它有很多属性和方法。
    比如:

    1. 谁绑定了这个事件。
    2. 鼠标触发事件的话,会得到鼠标的相关信息,如鼠标位置。
    3. 键盘触发事件的话,会得到键盘的相关信息,如按了哪个键。
      其中事件对象属性e.target,它和this的指向有所不同。

    案例:

    HTML:

    <div>div
        <span>span</span>
    </div>
    

    CSS:

    div {
         100px;
        height: 100px;
        background-color: red;
    }
    
    span {
        display: block;
         50px;
        height: 50px;
        background-color: yellow;
    }
    

    预览:

    JS:

    var div = document.querySelector('div');
    div.addEventListener('click', function(e) {
        console.log(this);  // 给div绑定了事件,那么this就指向div
        console.log(e.target);  // e.target指向点击的那个对象
    })
    

    实现结果:

    点击div:

    this返回div标签,e.target返回div标签


    点击span:

    this返回div标签,e.target返回span标签

    分析:

    1. 因为div绑定了点击事件,那么this返回的都是div
    2. 点击dive.target返回div;点击spane.target返回span

    总结:

    1. this返回的是绑定事件的对象(元素);e.target返回的是触发事件的对象(元素)。
    2. 简单来说,this:哪个元素绑定了这个点击事件,就返回哪个元素;e.target:点击了哪个元素,就返回哪个元素。
  • 相关阅读:
    个人阅读作业
    个人阅读作业3
    阅读作业中软件开发书籍阅读后的一些体会
    个人项目代码复审
    读《移山之道-VSTS软件开发指南》
    北航MOOC客户端
    个人阅读作业3
    个人阅读作业2
    代码互审
    结对编程项目总结以及一些小小的体会
  • 原文地址:https://www.cnblogs.com/jacklzx/p/13788577.html
Copyright © 2011-2022 走看看