event事件-优快云博客

本文介绍JavaScript事件处理中event对象的target属性，通过实例演示如何利用jQuery获取触发事件的DOM元素，并展示如何改变这些元素的样式。

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

event表示事件，其属性target表示该事件的元素(event具有继承)

例如：

<head>
    <meta charset="UTF-8">
    <title>event事件</title>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .demo1{
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            text-align: end;
        }
    </style>
</head>
<body>
<div class="demo1">
    <h1>欢迎</h1>
    <p id="content">dadedefhasanfhoahrenafdfai</p>
</div>
<script type="text/javascript">
    $('.demo1').on('click',function (event) {
        var b=event.target;
//        b.css('backgroundColor','red');
        console.log(b);
    });
</script>
</body>

页面显示结果为：

这里，event是click事件，target是event事件的元素。

因此，event.target的结果为DOM对象。也就是说click事件的元素.这里我们一定要注意，event具有继承性，虽然我们是

$('.demo1').on('click',function (event)，但是event默认为类名为demo1的元素及其子元素共有。即：当我们点击h1标签，则event.target的值为h1元素；当我们点击p元素，则event.target的值为p元素；当我们点击div元素，event.target的值为div元素。

因为event,target是DOM对象，因此在jQuery中，我们获取该事件元素应该为：$(event.target)

现在我们给事件元素改变背景颜色：

<head>
    <meta charset="UTF-8">
    <title>event事件</title>
    <script src="//libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <style type="text/css">
        .demo1{
            width: 100%;
            height: 100%;
            background-color: aquamarine;
            text-align: end;
        }
    </style>
</head>
<body>
<div class="demo1">
    <h1>欢迎</h1>
    <p id="content">dadedefhasanfhoahrenafdfai</p>
</div>
<script type="text/javascript">
    $('.demo1').on('click',function (event) {
        var b=$(event.target);
        b.css('backgroundColor','red');
        console.log(b);
    });
</script>
</body>