jQuery使用笔记——事件对象

最新推荐文章于 2022-09-07 00:07:26 发布

tian_xin_ke

最新推荐文章于 2022-09-07 00:07:26 发布

阅读量236

点赞数

CC 4.0 BY-SA版权

文章标签： jquery 事件对象

本文链接：https://blog.youkuaiyun.com/tian_xin_ke/article/details/71361765

本文详细介绍了使用jQuery处理事件时事件对象的各种属性，包括currentTarget、target、delegateTarget及type等，并通过实例展示了如何利用这些属性进行事件处理。此外，还探讨了如何使用preventDefault阻止链接的默认行为。

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

给出””标签的内容

<body>
    <p>click me</p>
</body>

验证事件对象的各个属性含义
currentTarget

$(function(){
    $("div").on("click",function(e){
        console.log($(e.currentTarget));//div 事件的监听者
        console.log($(e.target));//p 事件的目标
        console.log($(this));//div
    })
})

delegateTarget

$(function(){
    $("div").on("click","p",function(e){
        console.log($(this).html());//打印标签p的内容
        console.log($(e.delegateTarget));//当前事件的委托者div的样式内容
        ($(e.delegateTarget)).css("border","1px solid red");//为div添加红色的边框
    })
})

新的””标签内容+样式内容

<style>
    #log{
        width:300px;
        height:300px;
        background-color:red;
    }
</style>

<body>
    <div id="log"></div>
</body>

type

$(function(){
    $("#log").on("mousemove",function(e){
        console.log("pagex="+e.pageX+"pagey="+e.pageY);//输出鼠标在div内距离边框的上边缘和左边缘的位置
        alert(e.type);//弹出事件类型（mousemove）
    })
})

给出新的””标签内容

<body>
    <a href="http://www.baidu.com">baidu</a>
</body>

preventDefault

$(function(){
    $("a").click(function(e){
        e.preventDefault();//阻止默认事件，即不会跳转到百度首页，只是弹出弹窗"haha"
        alert("haha");
    })
})