目录
1、jQuery绑定事件
jQuery提供了四种事件绑定方式，bind()、live()、delegate()、on()。
该四种方法均是通过事件冒泡方式，bind()只针对已经存在的元素进行事件的设置，live、delegate、on可以为未来新添加元素注册事件。
1）bind()
语法：
bind（event,data,function）- event为元素事件，可以为一个或多个。
- data为可选参数项，需要传递的参数。
- function为事件发生时要执行的函数。
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$(".btn-test").bind("click",function(){ //单个事件处理
$(".container").slideToggle();//显示隐藏div
});
$(".btn-test").bind("mouseout click",function(){ //多个事件处理 采用空格相隔的方式
$(".container").slideToggle();//显示隐藏div
});
}
)
</script>
</head>
<body>
<input type="button" value="按钮" class="btn-test"/>
<div class="container" ><img src="image/小兔子.jpg" height="200"/></div>
</body> 
2）delegate()
delegate（）方法为指定的元素，以及被选元素的子元素，添加一个或多个事件处理程序。
delegate(childSelector,event,data,function)- childSelector指定需要注册事件的元素，一般为调用对象的子元素。
- event:为添加元素的一个或多个事件。
- data为需要传递的参数。
- function执行函数。
应用举例：
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("ul").delegate("li","click",function(){ //单个事件处理
alert(this.innerHTML);
});
var i=4;
$("#btn").click(function(){
$("ul").append("<li>列表项目"+ i++ +"</li>")
})
}
)
</script>
</head>
<body>
<button id="btn">添加列表项目</button>
<ul id="list">
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
</ul>
</body> 
2、jQuery绑定方法
jquery提供24个快捷键方法为特定的事件类型绑定事件处理程序。
如bind（）方法绑定的事件可以用clink()方法绑定。
$("p").bind("click",function(){
//事件处理函数
}
);$("p").click(function(){
//事件处理函数
}
);3、jQuery绑定一次事件
one（）f方法用于绑定一次事件，由它绑定的事件在执行一次响应后就会失效。
语法格式：
one(event,[data],function)- event为事件类型
- data需要传递的参数
- function为需要执行的函数
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
</style>
<link type="text/css" rel="stylesheet" href="style.css">
<script src="jquery/jquery-3.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function(){ //界面始化函数
$("#btn").one("click",function(){
alert("响应一次事件");
});
}
)
</script>
</head>
<body>
<button id="btn">按钮</button>
</body> 