JQuery——事件处理

天玄TX

于 2023-08-10 16:39:43 发布

阅读量288

点赞数 1

分类专栏： jquery 文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/TianXuab/article/details/132213258

版权

jquery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在 jQuery 中，事件处理允许您在元素上绑定特定的行为，以响应用户的交互动作，如点击、悬停、键盘输入等。以下是一些常见的 jQuery 事件处理的示例：

1. 点击事件：

click 事件在元素被点击时触发。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Handling</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <button id="myButton">Click Me</button>

  <script>
    $(document).ready(function() {
      $('#myButton').click(function() {
        alert('Button clicked!');
      });
    });
  </script>
</body>
</html>

2. 悬停事件：

mouseenter 和 mouseleave 事件在鼠标进入和离开元素时触发。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Handling</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>

  <script>
    $(document).ready(function() {
      $('#myDiv').mouseenter(function() {
        $(this).css('background-color', 'blue');
      }).mouseleave(function() {
        $(this).css('background-color', 'red');
      });
    });
  </script>
</body>
</html>

3. 键盘事件：

keydown、keyup 和 keypress 事件在用户按下或释放键盘上的按键时触发。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Handling</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <input type="text" id="myInput">

  <script>
    $(document).ready(function() {
      $('#myInput').keydown(function(event) {
        console.log('Key pressed:', event.key);
      });
    });
  </script>
</body>
</html>

4. 表单事件：

表单事件包括 submit（提交表单时触发）、focus（元素获得焦点时触发）、blur（元素失去焦点时触发）等。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Event Handling</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <form id="myForm">
    <input type="text" name="username" placeholder="Username">
    <input type="password" name="password" placeholder="Password">
    <button type="submit">Login</button>
  </form>

  <script>
    $(document).ready(function() {
      $('#myForm').submit(function(event) {
        event.preventDefault();
        console.log('Form submitted!');
      });
    });
  </script>
</body>
</html>

这些示例演示了如何在 jQuery 中处理不同类型的事件。通过选择适当的事件，您可以为元素添加各种交互行为，以满足用户需求。请注意，上述示例中的事件处理方法也可以使用事件委托（event delegation）来提高性能和代码组织。

天玄TX

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JQuery——事件处理

这些示例演示了如何在 jQuery 中处理不同类型的事件。通过选择适当的事件，您可以为元素添加各种交互行为，以满足用户需求。请注意，上述示例中的事件处理方法也可以使用事件委托（event delegation）来提高性能和代码组织。在 jQuery 中，事件处理允许您在元素上绑定特定的行为，以响应用户的交互动作，如点击、悬停、键盘输入等。事件在用户按下或释放键盘上的按键时触发。事件在鼠标进入和离开元素时触发。事件在元素被点击时触发。（元素失去焦点时触发）等。（元素获得焦点时触发）、（提交表单时触发）、
复制链接

扫一扫