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

最新推荐文章于 2024-06-19 17:31:34 发布

我是你要找的bug

最新推荐文章于 2024-06-19 17:31:34 发布

阅读量648

点赞数

分类专栏： jquery on绑定方法文章标签： jquery

本文链接：https://blog.youkuaiyun.com/XUYIGE/article/details/104314313

版权

jquery 同时被 2 个专栏收录

10 篇文章

订阅专栏

on绑定方法

1 篇文章

订阅专栏

本文介绍了jQuery的on方法如何在单个及多个元素上绑定事件，并通过示例展示了如何获取触发事件的元素对象及其属性值。

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

一个元素绑定事件：

方式一：使用$(this)获取
如下代码：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input type="button" value="点我" id="test"/>

<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
  $(function(){
        $('#test').on('click',function(){
            var value=$(this).attr('value');
            alert('我的value属性值为'+value);
        });
    });



</script>
</body>
</html>

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

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input type="button" value="点我" id="test"/>

<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">
  $(function(){
         $('#test').on("click",function(event){
             var value=$(event.target).attr('value');
             alert('我的value属性值为：'+value);
         });
     });

</script>
</body>
</html>

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

多个元素绑定事件：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
 </head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<input type="button" value="点我" id="test"/>

<script type="text/javascript" src="./jquery/jquery.js"></script>
<script type="text/javascript">

    $(function(){
        $('li').on('click',function(event){
            var value=$(event.target).html();
            alert('我的内容为：'+value);
        });
    });

</script>
</body>
</html>