jQuery中on()方法用法实例

下面是关于“jQuery中on()方法用法实例”的详细攻略：

一、什么是on()方法

on()是jquery中的一个事件绑定方法，同时它也是jquery推荐使用的事件绑定方式。通过on()方法可以实现对目标元素的多个事件进行绑定，并且可以动态绑定事件，该方法支持链式调用，使用方便。

二、on()方法的语法格式

on()方法的基本语法如下：

$(selector).on(event, childSelector, data, function)

参数说明：

selector：被选中元素的选择器。
event：绑定事件的名称，比如: click、keypress。
childSelector：事件委托，可以指定一个或多个子元素才被触发事件，即子元素的选择器，可以省略。
data：传入到事件函数里的数据，可以省略。
function：指定事件触发后执行的函数。

三、on()方法的实例说明

示例一：给按钮绑定点击事件

我们创建一个按钮元素，给按钮绑定一个点击事件，代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <title>on()方法示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <button id="mybtn">点击我</button>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#mybtn").on("click",function(){
                alert("您点击了我！");
            });
        });
    </script>
</body>
</html>

当用户点击按钮时，就会提示“您点击了我！”，这就是on()方法的简单示例。

示例二：事件委托

我们在页面上添加多个相同的元素，为他们添加点击事件，比如我们为三个按钮添加点击事件，当任意一个按钮被点击时，就会弹出一个提示框。这时候，我们可以通过事件委托，只向他们的父元素绑定一次点击事件即可。

代码实现如下：

<!DOCTYPE html>
<html>
<head>
    <title>on()方法示例</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
    <div id="mydiv">
        <button id="mybtn1">按钮1</button>
        <button id="mybtn2">按钮2</button>
        <button id="mybtn3">按钮3</button>
    </div>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#mydiv").on("click","#mybtn1,#mybtn2,#mybtn3",function(){
                alert("您点击了我！");
            });
        });
    </script>
</body>
</html>

代码解释：当用户点击任意一个按钮时，#mydiv 元素就会触发一次 click 事件，然后 jquery 内部会判断该事件的 target 是否在 #mybtn1、#mybtn2、#mybtn3 之中，如果在则执行事件函数。这里的“#mydiv”部分就是我们的事件委托规则了。

END

经过上面两个实例的深入讲解，相信你已经对on()方法有了一个全面的认识和掌握了它的使用方法了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery中on()方法用法实例 - Python技术站