srcmini本文概述
- jQuery bind()事件的参数
- jQuery bind()事件的示例
- jQuery bind()事件的优点
- 具有mouseenter()和mouseleave()事件的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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click", function(){
alert("This paragraph was clicked.");
});
});
</script>
</head>
<body>
<p>Click on the statement.</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>立即测试
评论前必须登录！
注册