博客

当我们需要在jQuery中为元素绑定事件的时候，可以使用.on()方法，也可以使用.hover()方法。下面将详细介绍如何使用这两个方法。

使用.on()

语法

$(selector).on(event, childSelector, data, function, map)

参数说明

• event：必需。规定主事件。
• childSelector：可选。规定只能添加给“指定的子元素”匹配的事件处理程序（由字符串描述），而不是直接添加到目标元素上。
• data：可选。规定传递到函数的额外数据。
• function：可选。规定当事件发生时运行的函数。
• map：可选。规定一个对象，该对象包含事件类型和函数。

示例说明

1. 给所有按钮绑定点击事件

<!-- HTML -->
<button id="btn">Click me!</button>

// JavaScript
$('#btn').on('click', function() {
  alert('Button clicked!');
});

当按钮被点击时，弹出提示框提示“Button clicked!”

1. 给table中的每个单元格绑定点击事件

<!-- HTML -->
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

// JavaScript
$('table td').on('click', function() {
  alert('Cell clicked! Text: ' + $(this).text());
});

当单元格被点击时，弹出提示框提示“Cell clicked! Text: [单元格内容]”

使用.hover()

语法

$(selector).hover(function, function)

参数说明

• function：必需。当鼠标指针进入（mouseleave）或离开（mouseout）元素时要运行的函数。

示例说明

1. 当鼠标进入div时颜色变为红色，离开时变回原来的颜色

<!-- HTML -->
<div id="myDiv">Hello World!</div>

/* CSS */
#myDiv{
  background-color: green;
  width: 100px;
  height: 100px;
}

// JavaScript
$('#myDiv').hover(function() {
  $(this).css('background-color', 'red');
}, function() {
  $(this).css('background-color', 'green');
});

当鼠标进入div时，背景色变为红色，鼠标移出时，背景色变为绿色。

1. 为一组图片绑定鼠标悬浮事件

<!-- HTML -->
<img src="image1.jpg" alt="Image 1" class="hover-image">
<img src="image2.jpg" alt="Image 2" class="hover-image">

/* CSS */
.hover-image {
  width: 100px;
  height: 100px;
}

// JavaScript
$('.hover-image').hover(function() {
  $(this).css('border', '2px solid red');
}, function() {
  $(this).css('border', 'none');
});

当鼠标悬停在图片上时，图片周围出现红色的边框，离开时边框消失。