Jquery 【on事件】
2024-08-24 02:50:43
一.on事件的定义和用法
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。
on为多个元素绑定事件
web代码
```
<button aria-hidden="true" data-dismiss="modal" class="close" id="btnClose" type="button">×</button>
<input type="button" value="取消" class="btn btn-warning" aria-hidden="true" data-dismiss="modal" id="btnCancel" />
```
Jquery代码
```
$(document).on('click', "#btnClose,#btnCancel", function () {
$('.popup-box').fadeOut(300);
});
```
二.on为元素绑定多个事件
web代码
```
<div id="div1">我是div嗯哼</div>
```
Jquery代码
```
$("#div1").on({
mouseenter: function() {
// Handle mouseenter...
},
mouseleave: function() {
// Handle mouseleave...
},
click: function() {
// Handle click...
}
});
```
三.on同时绑定多个元素的多个方法
web代码
```
<style>
div {
width: 200px;
height: 200px;
font-size:20px;
text-align:center;
line-height:200px;
border:1px solid red;
}
</style>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
<div id="div4">
div4
</div>
```
Jquery代码
```
$(document).on(
{
mouseenter: function () {
alert("鼠标进入")
},
mouseleave: function () {
alert("鼠标移出")
},
click: function () {
alert("鼠标点击")
}
},"#div1,#div2,#div3,#div4")
```
四.给元素子元素绑定方法
web代码
```
<style>
div {
width: 200px;
height: 200px;
font-size:20px;
text-align:center;
line-height:200px;
border:1px solid red;
}
</style>
<div id="div1">
<div id="div1_1">
我是第一个子代
</div>
<div id="div1_2">
我是第二个子代
</div>
</div>
```
```
$(function () {
$("#div1").click(function () {
alert("哈哈")
});
$("#div1").on("click","#div1_2", function () {
alert("感谢您点击了我");
});
});
```
说明：点击div1，alert(哈哈)；点击div2，alert(感谢您点击了我) alert(哈哈)最新文章
- 比较TFS与SVN，你必须知道的10点区别
- HTML 学习笔记 CSS(轮廓)
- AutoIt3（AU3）开发的分辨率快速设置工具
- Node.js高级编程读书笔记 - 2 文件和进程处理
- MVC——应用Ajax获取不到数据问题解答
- 使用userdel命令删除Linux用户
- Windows 下启动Apache服务(转)
- git 分布式版本控制了解
- myeclipse maven编译出错
- SQL查询表,表的所有字段名，SQL查询表,表的所有字段名
- QQ空间掉帧率优化实战
- [工具]Microsoft To-Do，简约还是简陋？
- scala的多种集合的使用(7)之集Set的操作方法
- 绕最新版安全狗-附上sqlmap的tamper
- 模块(modue)和包(package)的概念-import导入模块
- vue 中的数据绑定
- jasperReport和Ireport
- SNMP学习笔记之SNMP介绍，OID及MIB库
- P4016 负载平衡问题 网络流
- AtCoder Regular Contest 102