jq 获取dom对象this和event.target

最新推荐文章于 2024-08-25 10:44:35 发布

ViolenceHK

最新推荐文章于 2024-08-25 10:44:35 发布

阅读量5.7k

点赞数

文章标签： jq dom .on .live

本文链接：https://blog.youkuaiyun.com/ViolenceHK/article/details/77480966

版权

本文详细解析了JavaScript中this和event.target的区别，并介绍了不同事件绑定方法的特点，包括bind、live、delegate和on，帮助开发者更好地理解并运用这些核心概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

几天学习Ajax,看别人在点击事件获取dom时用event.target获取,发现很多不知道的地方。

一、先说说区别

1.js中事件是会冒泡的，所以this是可以变化的，但event.target不会变化，它永远是直接接受事件的目标DOM元素；

2.this和event.target都是dom对象，如果要使用jquey中的方法可以将他们转换为jquery对象：$(this)和$(event.target);

比如：event.target和$(event.target)的使用：

先上我用来测试的html

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jq 获取dom对象this、event.target</title>
    <script type="text/javascript" src="../js/jquery1.11.3.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $(".box1").on("click",function(event){
                $("#temp1").html("clicked: " + event.target.nodeName);
                $(event.target).css("color","#FF3300");
            })
        });

        $(function(){
            $(".box2").on("click",function(event){
                $("#temp2").html("clicked: " + this.nodeName);
                $(this).css("color","#FF3300");
                event.stopPropagation();
            })
        });
    </script>
</head>

<body>
<div id="temp1"></div>
<ul class="box1" style="padding:20px; background:#FFFFFF">
    <li>第一行
        <ul>
            <li>这是公告标题1</li>
            <li>这是公告标题2</li>
            <li>这是公告标题3</li>
            <li>这是公告标题4</li>
        </ul>
    </li>
</ul>

<div id="temp2"></div>
<ul class="box2" style="padding:20px; background:#FFFFFF">
    <li>第一行
        <ul>
            <li>这是公告标题1</li>
            <li>这是公告标题2</li>
            <li>这是公告标题3</li>
            <li>这是公告标题4</li>
        </ul>
    </li>
</ul>
</body>
</html>

在同操作的时候，this和event.terget的表现形式不一样。(

event.stopPropagation(); 阻止js事件冒泡

)

二、我还发现一个有趣的是on 和 link 、live、delegate的用法也有很多说法

.bind()是直接绑定在元素上
.live()则是通过冒泡的方式来绑定到元素上的。更适合列表类型的，绑定到document DOM节点上。和.bind()的优势是支持动态数据。
.delegate()则是更精确的小范围使用事件代理，性能优于.live()
.on()则是最新的1.9版本整合了之前的三种方式的新事件绑定机制，而且。on.可以方法连缀，用着很方便。

所以，现在用.on是最好的。