jQuery on()方法示例及jquery on()方法的优点

下面我来详细讲解“jQuery on()方法示例及jquery on()方法的优点”的攻略。

1. 什么是jQuery on()方法？

jQuery on() 方法用于为一个或多个事件元素附加一个或多个事件处理程序。支持动态添加和移除事件。 在jquery 1.7之前，我们使用的bind()、live()、delegate()方法也可以为元素绑定事件或者动态添加元素绑定事件，
但从jquery 1.7版本开始jQuery on()方法逐渐成为它们的替代品，在jquery3.0版本之后不再建议使用上述方法。

2. jQuery on()方法示例

下面我们来看两个jQuery on()方法的示例：

2.1 示例1 利用on()绑定事件

在html页面上有一个按钮，绑定一个click事件，当我们点击按钮时，就弹出一个提示框:

<button id="btn">点击我</button>

$("#btn").on("click",function(){
    alert("hello world");
});

2.2 示例2 利用on()动态添加事件

我们可以利用on()方法，为一个父级元素绑定事件，然后通过事件委托，处理其子元素上的事件：

<div id="father">
    <ul>
        <li>选项1</li>
        <li>选项2</li>
        <li>选项3</li>
        <li>选项4</li>
        <li>选项5</li>
    </ul>
</div>

$("#father").on("click","li",function(){
    alert($(this).html());
});

上述示例中，利用on()方法为父元素#father绑定了一个click事件，但是事件的响应函数是处理其子元素li的点击事件，通过$(this)获取到当前点击的选项。

3. jQuery on()方法的优点

相比老版本的bind()、live()、delegate()，jQuery on()方法有以下优点：

• 语法简单
• 支持动态添加元素
• 不容易内存泄漏
• 相比bind()、live()、delegate()性能更高

在实际开发中，推荐使用jQuery on()方法来绑定事件。

以上就是“jQuery on()方法示例及jquery on()方法的优点”的攻略。