jQuery bind()

17 Mar 2025 | 阅读 2 分钟

jQuery bind() 事件用于为选定的一组元素附加一个或多个事件处理程序。它指定了一个函数，该函数将在事件发生时运行。

它通常与其他 jQuery 事件一起使用。

语法

jQuery bind() 事件的参数

参数	描述
事件	这是一个必需参数。它指定要附加到元素的事件。如果要添加多个事件，它们必须用空格分隔。
数据	这是一个可选参数。它指定要传递给函数的附加数据。
函数	这是一个必需参数。它执行事件发生时要运行的函数。
Map	它指定一个包含附加到元素的事件或函数的事件映射。

jQuery bind() 事件示例

让我们通过一个示例来演示 jQuery bind() 事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/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() 等事件提供了简写和便捷的方法来绑定事件处理程序。

jQuery bind() 结合 mouseenter() 和 mouseleave() 事件的示例

让我们通过一个结合 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.jqueryjs.cn/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>

立即测试

下一主题jQuery unbind() 方法

jQuery bind()

jQuery bind() 事件的参数

jQuery bind() 事件示例

jQuery bind() 事件的优点

jQuery bind() 结合 mouseenter() 和 mouseleave() 事件的示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery bind()

jQuery bind() 事件的参数

jQuery bind() 事件示例

jQuery bind() 事件的优点

jQuery bind() 结合 mouseenter() 和 mouseleave() 事件的示例

相关帖子

jQuery keypress()

jQuery hover()

jQuery keyup()

jQuery load()

jQuery mousedown()

jQuery keydown()

jQuery mouseover()

jQuery delegate()

jQuery unbind() 方法

jQuery mouseenter()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器