this和e.target的异同

简单分析

每次触发DOM事件时会产生一个事件对象(也称为event对象),此处的参数接收事件对象,而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,e.target表示DOM元素,然后在获取其相应的属性值

this和event.target的区别:

虽然this和event.target都是dom对象

  • js中事件是对冒泡的,所以this是会发生变化的,

  • event.target不会发生变化。它是永远直接接受事件的目标DOM元素

实验验证

  • 使用绑定e.target



    
    e.target
    


  • 第一行
    • 这是公告标题1
    • 这是公告标题2
    • 这是公告标题3
    • 这是公告标题4

效果

e.target.png

说明绑定正确,且只有第一行被渲染,颜色改变。

  • 使用绑定this
    
    ```
效果

![this效果.png](http://upload-images.jianshu.io/upload_images/4958474-2eaf20afb55f0ad1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![this.png](http://upload-images.jianshu.io/upload_images/4958474-b8c03aec26390b6c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

会发现,它不仅指定了第一行,还指定了li的其他兄弟元素,已经因为冒牌,而改变了指定元素

你可能感兴趣的:(this和e.target的异同)