Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

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.

昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4