this和e.target的异同

简单分析

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

this和event.target的区别:

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

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

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

实验验证

  • 使用绑定e.target
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>e.target</title>
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body>
<div id="temp"></div>
<ul class="JQ-content-box" style="padding:20px; background:#FFFFFF">
    <li>第一行
        <ul>
            <li>这是公告标题1</li>
            <li>这是公告标题2</li>
            <li>这是公告标题3</li>
            <li>这是公告标题4</li>
        </ul>
    </li>
</ul>
<script>
    $(function(){
        $("li").on("click",function(e){
            console.log(e.target);
            console.log(this);
            $("#temp").html("clicked: " + e.target.nodeName);
            $(e.target).css("color","#FF3300");
        })
    });
</script>
</body>
</html>

效果

e.target.png

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

  • 使用绑定this
    <script>
    $(function(){
        $("li").on("click",function(e){
            console.log(e.target);
            console.log(this);
            $("#temp").html("clicked: " + e.target.nodeName);
            $(this).css("color","#FF3300");
        })
    });
</script>
    ```
效果

![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的其他兄弟元素,已经因为冒牌,而改变了指定元素

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 单例模式 适用场景:可能会在场景中使用到对象,但只有一个实例,加载时并不主动创建,需要时才创建 最常见的单例模式,...
    Obeing阅读 6,360评论 1 10
  • 工厂模式类似于现实生活中的工厂可以产生大量相似的商品,去做同样的事情,实现同样的效果;这时候需要使用工厂模式。简单...
    舟渔行舟阅读 12,378评论 2 17
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 5,206评论 0 2
  • 事件绑定的方式 给 DOM 元素绑定事件分为两大类:在 html 中直接绑定 和 在 JavaScript 中绑定...
    Bruce_zhuan阅读 4,652评论 0 6
  • 这篇文章介绍Activity的插件化方案,Activity的插件化方案不止今天介绍的这一种。建议在看本文之前,先看...
    LooperJing阅读 7,648评论 3 17