JS中this与event.target的区别

YoJ-茶叶蛋

已于 2022-08-04 11:08:37 修改

阅读量250

点赞数 1

文章标签： javascript

于 2022-05-09 16:13:01 首次发布

本文链接：https://blog.csdn.net/m0_46132840/article/details/124668788

版权

JavaScript this 事件处理 event.target 函数参数

关键词由CSDN通过智能技术生成

This：this关键字要想在函数中使用以代表调用函数的那个对象，必须要作为函数的实参传入，而且函数对应的形参还不能直接是this接收。

this是指向调用这个函数的对象，下面例子中，无论点击那个元素，打印出来的都是绑定的box事件对象。

Event：特指此事件对象（点击事件，键盘事件...），包含该事件的所有属性（例如事件类型：mouse）

Event.target：用event的话，调用函数时不用传参，但一定要是事件触发的函数，event就是代表该事件，直接在函数里面使用（类似内置对象的感觉）.

下面例子中可以具体到点击的那个元素。

<body>
  <div id="box">
    <ul id="ul">
      <li>西施</li>
      <li>貂蝉</li>
      <li>昭君</li>
    </ul>
    <p>如花</p>
    <p>西施</p>
    <p>王昭君</p>
    <p>貂蝉</p>
    <p>杨玉环</p>
    <span>芙蓉姐姐</span>
    <span>芙蓉姐姐</span>
    <p>凤姐</p>
    <span>芙蓉姐姐</span>
    <span>芙蓉姐姐</span>
  </div>
</body>

var box = document.getElementById("box");
  box.onclick = function (e) {
    // this是指向调用这个函数的对象box
    // console.log(this);
    // e.target表示触发事件的目标对象

    //点击西施
    console.log(e.target);
    console.log(this);
}