jQuery 事件

知否
English

本节我们学习 jQuery 中的事件的使用,jQuery 是专门为响应 HTML 页面中的事件而设计的。我们在使用时,需要遵循以下原则:

  • 把所有 jQuery 代码置于事件处理函数中。
  • 把所有事件处理函数置于文档就绪事件处理器中。
  • jQuery 代码置于单独的 .js 文件中。
  • 如果存在名称冲突,则重命名 jQuery 库。

什么是事件

首先我们要知道什么是事件,页面对不同访问者的响应叫做事件,例如点击某个按钮,选择单选框或复选框,滑动鼠标等,这些都可以称为事件。

jQuery常用事件

jQuery 中,大多数 DOM 事件都有一个相应的 jQuery 方法。例如我们前面提到过的点击事件的对应的方法为 click() 方法。

click点击事件

当我们点击元素时,会发生 click 点击事件,这需要用到 click() 方法。

示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      alert("hello, xkd!");
    });
  });
</script>
</head>
<body>
  <div>
    <button>点击按钮</button>
  </div>
</body>
</html>

在浏览器中的演示效果:

dblclick双击事件

当我们双击元素时,会触发 dblclick 双击事件。触发双击事件需要用到 dblclick() 方法。

注意 dblclick 事件也会产生 click 事件,所有如果这两个事件都被应用于同一个元素,则会产生问题。

示例:

例如双击 p 元素并隐藏这个元素:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("p").dblclick(function(){
      $(this).hide();
    });
  });
</script>
</head>
<body>
  <div>
    <p>双击隐藏此元素</p>
  </div>
</body>
</html>

在浏览器的演示效果:

鼠标事件

jQuery 的鼠标有四个相关的事件,包括鼠标指针进入、离开、按下、释放:

  • 当鼠标指针穿过(进入)被选元素时,可以通过 mouseenter() 方法触发 mouseenter 事件。
  • 当鼠标指针离开 HTML 元素时,可以通过 mouseleave() 方法触发 mouseleave 事件。
  • 当鼠标指针移动到元素上方,并按下鼠标按键时,可以通过 mousedown() 方法触发 mousedown 事件。
  • 当在元素上松开鼠标按钮时,可以通过 mouseup() 方法触发 mouseup 事件。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".one").mouseenter(function(){
      alert("mouseenter事件");
    });
    $(".two").mouseleave(function(){
      alert("mouseleave事件");
    });
    $(".three").mousedown(function(){
      alert("mousedown事件");
    });
    $(".four").mouseup(function(){
      alert("mouseup事件");
    });
  });
</script>
</head>
<body>
  <div>
    <p class="one">mouseenter事件,鼠标指针移动到元素上,弹出弹出层</p>
    <p class="two">mouseleave事件,鼠标指针离开元素上,弹出弹出层</p>
    <p class="three">mousedown事件,在元素上按下鼠标,弹出弹出层</p>
    <p class="four">mouseup事件,在元素上松开鼠标,弹出弹出层</p>
  </div>
</body>
</html>

hover()方法

hover() 方法用于在鼠标指针悬停在被选元素上时要运行的两个函数。即 mouseenter()mouseleave() 方法。

示例:

hover() 中第一个函数在鼠标进入 HTML 元素时执行,第二个函数在鼠标离开 HTML 元素时执行:

$(function(){
    $("p").hover(
      function(){
        console.log("鼠标进入HTML元素,执行第一个函数!");
      },
      function(){
        console.log("鼠标离开HTML元素,执行第二个函数!");
      }
    );
});

上述代码相当于:

$("p").mouseenter(function(){
      console.log("鼠标进入HTML元素,执行第一个函数!");
}).mouseleave(function(){
      console.log("鼠标离开HTML元素,执行第二个函数!");
});

我们可以在浏览器中看一下演示效果:

focus()和blur()方法

当表单元素获得焦点时,也可以说是通过鼠标点击选中元素或通过 tab 键定位到元素时,会发生 focus 事件。可以通过 focus() 方法来触发 focus 事件。

focus() 方法通常与 blur() 方法一起使用,当表单元素失去焦点时发生 blur 事件。 blur 事件是通过 blur() 来触发的。

示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
      $("input").focus(function(){
        console.log("元素获得焦点");
      });
      $("input").blur(function(){
        console.log("元素失去焦点");
      });     
  });
</script>
</head>
<body>
  <div>
    用户名:<input type="text">
  </div>
</body>
</html>

在浏览器中的演示效果:

阅读 243

Skrike while the iron is hot.

154 声望
172 粉丝
0 条评论
你知道吗?

Skrike while the iron is hot.

154 声望
172 粉丝
文章目录
宣传栏