event事件

时间：2018-01-07 14:02:35 阅读：141 评论：0 收藏：0 [点我收藏+]

标签：charset 继承性 tar fun text str ima dfa png

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>