Jquery bind()
Jquery bind()
jQuery bind()事件用于为一组元素中的选定元素附加一个或多个事件处理程序。它指定事件发生时要运行的功能。
它通常与jQuery的其他事件一起使用。
语法:
$(selector).bind(event,data,function,map)
jQuery bind()事件的参数
| 参数 | 说明 |
| event | 这是强制性参数。它指定一个或多个事件附加到元素。如果要添加多个事件，则必须将它们用空格隔开。 |
| data | 这是一个可选参数。它指定了要传递给该函数的其他数据。 |
| function | 这是强制性参数。它执行事件发生时要运行的功能。 |
| map | 它指定一个事件映射，其中包含一个或多个附加到该元素的事件或函数。 |
jQuery bind()事件的示例
让我们以一个示例来演示jQuery bind()事件。
<!DOCTYPE html>
<html>
<head>
<script src="/ajax/libs/jquery/1.11.2/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("p").bind("click", function(){
alert("单击此段落。");
});
});
</script>
</head>
<body>
<p>单击此段落。</p>
</body>
</html>
输出:
单击此段落。
jQuery bind()事件的优点
它与各种浏览器兼容。
绑定事件处理程序非常简单快捷。
它提供了一些带有click()，hover()等事件的简便快捷方法，用于绑定事件处理程序。
带有mouseenter()和mouseleave()事件的jQuery bind()示例
让我们以带有mouseenter()和mouseleave()的jQuery bind()为例事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>bind demo</title>
<style>
p {
background: yellow;
font-weight: bold;
cursor: pointer;
padding: 5px;
}
p.over {
background: #ccc;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Click or double click on the statement.</p>
<span></span>
<script>
$("p").bind("click", function( event ) {
var str = "(" + event.pageX + ", " + event.pageY + ")";
$("span").text("This is a single click! " + str );
});
$("p").bind("dblclick", function() {
$("span").text("This is a double click on " + this.nodeName );
});
$("p").bind("mouseenter mouseleave", function( event ) {
$( this ).toggleClass("over");
});
</script>
</body>
</html>
输出:
Click or double click on the statement.