jquery 的on方法获取发生事件的元素对象

最新推荐文章于 2021-12-01 20:55:28 发布

xinghuo0007

最新推荐文章于 2021-12-01 20:55:28 发布

阅读量1.4w

点赞数 1

分类专栏： jquery笔记文章标签： jquery 对象

本文链接：https://blog.csdn.net/xinghuo0007/article/details/71436779

版权

jquery笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

jquery 的on方法获取发生事件的元素对象

方法一：一个元素绑定事件的时候

方式一：使用$(this)获取

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
<input type="button" value="点我" id="test"/>
<script>
    $(function () {
        $("#test").on("click",function(){
            var value = $(this).attr("value");
            alert("我的value属性值为："+value);
        });
    });
</script>
</body>
</html>

点解按钮结果为：我的value属性值为点我

方式二：使用处理函数的参数获得

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
<input type="button" value="点我" id="test"/>
<script>
    $(function () {
        $("#test").on("click",function(event){
            var value = $(event.target).attr("value");
            alert("我的value属性值为："+value);
        });
    });
</script>
</body>
</html>

点击按钮结果为：我的value属性为点我

方法二：多个元素绑定事件的时候

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.2.1.js"></script>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
<input type="button" value="点我" id="test"/>
<script>
    $(function () {
        $("li").on("click",function(event){
            var value = $(event.target).html();
            alert("我的内容为："+value);
        });
    });
</script>
</body>
</html>