jQuery中的事件类型（几乎全部）的事件本身解释和参数解释以及代码演示

盛夏绽放

于 2024-07-30 11:51:58 发布

阅读量407

点赞数 18

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/x15514104477/article/details/140790727

版权

一.ready(fn)事件

作用： jQuery中的ready(fn)方法是一种事件处理函数，用于在文档的DOM结构加载完成后立即执行指定的函数。
这个方法经常被用于确保DOM元素已经被载入并可以操作，从而替代了传统的window.onload事件处理方式。

优势： 使用$(document).ready()方法可以大大提高页面响应速度，它仅需要DOM结构加载完成即可执行，而不需要等待其他如图片等资源的完全加载。

示例1: 在DOM加载完成时运行的代码，可以这样写：

$(document).ready(function(){
  // 在这里写你的代码...
});

示例2： 使用 $(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

$(function($) {
  // 你可以在这里继续使用$作为别名...
});

二.on(events,[selector],[data],fn) 事件

1.作用：

在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。

2.参数解释：

events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。

selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。

data:当一个事件被触发时要传递event.data给事件处理函数。

fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

3.示例：

（1）单击段落时，提示显示该段落的文本：

$("p").on("click", function(){
	alert( $(this).text() );
});

（2）将数据传递给事件处理程序，这里通过名称指定：

function myHandler(event) {
	alert(event.data.foo);
}
$("p").on("click", {foo: "bar"}, myHandler)

（3）取消表单提交操作并通过返回false阻止事件冒泡：

$("form").on("submit", false)

（4）仅通过使用.preventDefault()取消默认操作：

$("form").on("submit", function(event) {
  event.preventDefault();
});

（5）使用.stopPropagation()阻止提交事件冒泡，而不阻止表单提交：

$("form").on("submit", function(event) {
  event.stopPropagation();
});

三.one(type,[data],fn)事件

1.作用：

one(type, [data], fn) 是一个事件处理函数，它用于在特定类型的事件触发时执行一次回调函数 fn。
注意：这个函数通常用于只关心事件首次触发的情况，而不是每次触发都执行回调。

2.参数解释：

type（必需）：事件类型，例如 “click”、“mouseover” 等。
data（可选）：传递给回调函数的数据。
fn（可选）：回调函数，当事件首次触发时执行。

3.示例：

当所有段落被第一次点击的时候，显示所有其文本。

$("p").one("click", function(){
  alert( $(this).text() );
});

四.off(events,[selector],[fn])事件

1.作用：

off(events,[selector],[fn]) 是一个 jQuery 方法，用于移除由 on() 方法添加的事件处理程序。

2.参数解释：

events（必需）：一个字符串，包含一个或多个用空格分隔的事件类型，例如 “click”、“submit” 等，或者是一个自定义事件名称。

selector（可选）：一个字符串，包含一个选择器，用于指定要移除事件处理程序的元素。如果省略，将移除所有匹配 events 的事件处理程序。

fn（可选）：一个函数，用于指定要移除的事件处理函数。如果省略，将移除所有匹配 events 和 selector 的事件处理程序。

3.示例：

// 假设有以下事件处理程序
$("#someElement").on("click", ".someSelector", function() {
  console.log("Clicked!");
});

// 使用 off() 移除事件处理程序
$("#someElement").off("click", ".someSelector");

五.点击事件

1.click(): 当用户单击元素时触发

$("#element").click(function() {
  alert("Element clicked!");
});

六.鼠标悬停事件

1.mouseenter([Data], fn): 当鼠标指针进入元素时触发

概述：

当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。
注意：与 mouseover 事件不同，只有在鼠标指针穿过被选元素时，才会触发 mouseenter 事件。如果鼠标指针穿过任何子元素，同样会触发 mouseover 事件。

参数解释：

data:mouseenter([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的mouseenter事件中绑定的处理函数。

示例：

当鼠标指针进入（穿过）元素时，改变元素的背景色：

$("p").mouseenter(function(){
    $("p").css("background-color","yellow");
});

2. mouseleave([[data],fn]): 当鼠标指针离开元素时触发

概述：

当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。
注意： 与 mouseout 事件不同，只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。如果鼠标指针离开任何子元素，同样会触发 mouseout 事件。

参数解释：

data: mouseleave([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的mouseleave事件中绑定的处理函数。

示例：

当鼠标指针离开元素时，改变元素的背景色：

$("p").mouseleave(function(){
  $("p").css("background-color","#E9E9E4");
});

七.键盘事件

1.keypress([[data],fn]): 当按下并释放键盘上的键时触发

概述：

当键盘或按钮被按下时，发生 keypress 事件。
keypress 事件与 keydown 事件类似：当按钮被按下时，会发生该事件。它发生在当前获得焦点的元素上。
与 keydown 事件不同：每插入一个字符，就会发生 keypress 事件。
注释： 如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数解释：

data: keypress([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的keypress事件中绑定的处理函数。

示例：

简单示例：

$("#input").keypress(function(event) {
  console.log("Key pressed: " + String.fromCharCode(event.which));
});

复杂演示：

$(document).ready(function() {
  // 定义一个回调函数，当按键被按下时触发
  function onKeyPress(event) {
    var key = event.which;
    if (key === 13) { // 检查是否按下了回车键（键码为13）
      console.log("回车键被按下");
    }
  }

  // 为文档添加键盘按键事件监听器
  $(document).keypress(onKeyPress);
});

2. keydown([[data],fn]): 当按下键盘上的键时触发

概述：

当键盘或按钮被按下时，发生 keydown 事件。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数解释：

data:keydown([Data], fn) 可传入data供函数fn处理。

fn:在每一个匹配元素的keydown事件中绑定的处理函数。

示例：

示例格式——在页面内对键盘按键做出回应，可以使用如下代码:

$(window).keydown(function(event){
  switch(event.keyCode) {
    // ...
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
    // 更多详细信息:     http://unixpapa.com/js/key.html
    // 常用keyCode： 空格 32   Enter 13   ESC 27
  }
});

示例代码

$(document).ready(function() {
  // 定义一个回调函数，当按键被按下时触发
  function onKeyDown(event) {
    var key = event.which;
    if (key === 13) { // 检查是否按下了回车键（键码为13）
      console.log("回车键被按下");
    }
  }
  // 为文档添加键盘按键事件监听器
  $(document).keydown(onKeyDown);
});

3.keyup([[data],fn]): 当释放键盘上的键时触发

概述：

当按钮被松开时，发生 keyup 事件。它发生在当前获得焦点的元素上。
注释：如果在文档元素上进行设置，则无论元素是否获得焦点，该事件都会发生。

参数解释：

data: keyup([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的keyup事件中绑定的处理函数。

示例：

当按下按键时，改变文本域的颜色：

$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

八.表单事件

1.submit([[data],fn]): 当表单提交时触发

概述：

当提交表单时，会发生 submit 事件。
注意： 该事件只适用于表单元素。

参数解释：

data（必需）: submit([Data], fn) 可传入data供函数fn处理。

fn（可选）: 在每一个匹配元素的submit事件中绑定的处理函数。

示例：

提交本页的第一个表单:

$("form:first").submit();

如果你要阻止表单提交:

$("form").submit( function () {
   return false;
});

2.change([[data],fn])：当元素的值发生改变时触发

概述:

当元素的值发生改变时，会发生 change 事件。
注意: 该事件仅适用于文本域（text field），以及 textarea 和 select 元素。当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。

参数解释：

data： change([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的change事件中绑定的处理函数。

示例：

基本用法——触发被选元素的 change 事件：

$(selector).change();

方法框架——给所有的文本框增加输入验证：

$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

复杂示例：

$(document).ready(function() {
  // 定义一个回调函数，当输入框内容发生变化时触发
  function onChange() {
    var inputValue = $(this).val();
    console.log("输入框的值已更改为： " + inputValue);
  }

  // 为所有输入框添加change事件监听器
  $("input").change(onChange);
});

九.窗口事件

1.resize([[data],fn]): 当浏览器窗口大小改变时触发

概述：

当调整浏览器窗口的大小时，发生 resize 事件。

参数解释：

data: resize([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的resize事件中绑定的处理函数。

示例：

对浏览器窗口调整大小进行计数：

$(window).resize(function() {
  $('span').text(x+=1);
});

输出窗口的高度和宽度：

$(document).ready(function() {
  // 定义一个回调函数，当窗口大小发生变化时触发
  function onResize() {
    var windowWidth = $(window).width();
    var windowHeight = $(window).height();
    console.log("窗口宽度： " + windowWidth + ", 窗口高度： " + windowHeight);
  }

  // 为窗口添加resize事件监听器
  $(window).resize(onResize);
});

2. scroll([[data],fn]): 当页面滚动时触发

概述：

当用户滚动指定的元素时，会发生 scroll 事件。
scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。

参数解释：

data: resize([Data], fn) 可传入data供函数fn处理。

fn: 在每一个匹配元素的resize事件中绑定的处理函数。

示例：

输出页面的滚动距离：

$(document).ready(function() {
  // 定义一个回调函数，当页面滚动时触发
  function onScroll() {
    var scrollTop = $(window).scrollTop();
    console.log("页面滚动距离： " + scrollTop);
  }

  // 为窗口添加scroll事件监听器
  $(window).scroll(onScroll);
});

对元素滚动的次数进行计数：

$("div").scroll(function() {
  $("span").text(x+=1);
});

盛夏绽放

关注

18
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的事件类型（几乎全部）的事件本身解释和参数解释以及代码演示

对jquery中几乎所有事件类型的事件本身的解释、事件参数的解释以及事件对应的代码示例帮助新手理解
复制链接

扫一扫

jQuery中的 事件类型（几乎全部）的 事件本身解释 和 参数解释 以及 代码演示

一.ready(fn)事件

二.on(events,[selector],[data],fn) 事件

1.作用：

2.参数解释：

3.示例：

三.one(type,[data],fn)事件

1.作用：

2.参数解释：

3.示例：

四.off(events,[selector],[fn])事件

1.作用：

2.参数解释：

3.示例：

五.点击事件

1.click(): 当用户单击元素时触发

六.鼠标悬停事件

1.mouseenter([Data], fn): 当鼠标指针进入元素时触发

概述：

参数解释：

示例：

2. mouseleave([[data],fn]): 当鼠标指针离开元素时触发

概述：

参数解释：

示例：

七.键盘事件

1.keypress([[data],fn]): 当按下并释放键盘上的键时触发

概述：

参数解释：

示例：

2. keydown([[data],fn]): 当按下键盘上的键时触发

概述：

参数解释：

示例：

3.keyup([[data],fn]): 当释放键盘上的键时触发

概述：

参数解释：

示例：

八.表单事件

1.submit([[data],fn]): 当表单提交时触发

概述：

参数解释：

示例：

2.change([[data],fn])：当元素的值发生改变时触发

概述:

参数解释：

示例：

九.窗口事件

1.resize([[data],fn]): 当浏览器窗口大小改变时触发

概述：

参数解释：

示例：

2. scroll([[data],fn]): 当页面滚动时触发

概述：

参数解释：

示例：

jQuery中的事件类型（几乎全部）的事件本身解释和参数解释以及代码演示