jquery의 모든 사용-프런트엔드 Q&A-php.cn

jquery의 모든 사용

WBOY

풀어 주다： 2023-05-14 12:50:36

원래의

1023명이 탐색했습니다.

jQuery는 JavaScript 프로그래밍을 더 쉽고 빠르게 만들 수 있는 다양한 기능을 제공하는 인기 있는 JavaScript 라이브러리입니다. 그 중 jQuery의 .on() 메서드는 개발자가 동적 이벤트를 생성하고, 이벤트 핸들러를 바인딩하고, 이벤트 리스너를 추가하는 데 도움을 줄 수 있는 매우 실용적인 메서드입니다. 이 문서에서는 .on() 메서드의 모든 용도를 소개합니다. .on()方法是一种非常实用的方法，可以帮助开发者创建动态的事件、绑定事件处理程序和添加事件监听器。本文将介绍.on()方法的所有用法。

一、基本语法

.on()方法用于添加事件处理程序和事件监听器，其基本语法如下：

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

로그인 후 복사

其中，

selector：用于选择要绑定事件的元素，可以是CSS选择器或者jQuery对象；
event：指定要绑定的事件类型，例如click、mousedown、mousemove等；
childSelector：可选参数，用于过滤要绑定事件的后代元素；
data：可选参数，传入事件处理程序中的参数；
function：指定要绑定的事件处理程序，可以是内置函数、用户定义的函数或者匿名函数。

二、`.on()`方法的用法

.on()方法具有多种用法，以下将一一介绍。

1. 监听单个事件

下面的示例将为所有button元素添加click事件监听器：

$("button").on("click", function() {
  alert("你单击了按钮！");
});

로그인 후 복사

此外，.on()方法还支持其他的事件类型，例如mousedown、mousemove、keydown等。

2. 监听多个事件

.on()方法还支持绑定多个事件，以下示例将为button元素添加click、mousedown和mouseup事件监听器：

$("button").on("click mousedown mouseup", function() {
  alert("你与按钮交互了！");
});

로그인 후 복사

3. 指定后代元素

.on() 方法还支持过滤要绑定事件的后代元素，以下示例将为ul元素中的所有li元素添加click事件监听器：

$("ul").on("click", "li", function() {
  alert("你单击了列表项！");
});

로그인 후 복사

4. 一次触发多个事件

通过将多个事件类型作为参数传递给on()方法，可以一次性为这些事件类型添加事件监听器，例如以下示例：

$("button").on({
  mouseenter: function() {
    $(this).css("background-color", "lightgray");
  },
  mouseleave: function() {
    $(this).css("background-color", "white");
  },
  click: function() {
    $(this).css("background-color", "yellow");
  }
});

로그인 후 복사

5. 使用事件冒泡

通过使用事件冒泡，可以为动态元素绑定事件，即将事件处理程序绑定到父元素，当子元素上触发事件时，事件将从子元素向上冒泡至父元素并触发事件处理程序。

以下示例将为所有的button元素及其动态添加的子元素添加click事件监听器：

$("button").on("click", function() {
  alert("你单击了按钮！");
});

// 动态添加元素
$("button").append("");

로그인 후 복사

6. 传入数据

有时需要将附加数据传递给事件处理程序，可以通过.on()方法的data参数来实现。以下示例将为所有的button元素传递附加数据：

$("button").on("click", {
  name: "小明",
  age: 18
}, function(event) {
  alert("我的名字是 " + event.data.name + "，" + "我今年 " + event.data.age + "岁。");
});

로그인 후 복사

三、总结

.on()方法提供了丰富的功能，可以帮助开发者创建动态的事件、绑定事件处理程序和添加事件监听器。本文介绍了.on()方法的所有用法，包括：

监听单个事件；
监听多个事件；
指定后代元素；
一次触发多个事件；
使用事件冒泡；
传入数据。

熟练掌握.on()

1. 기본 구문

.on() 메서드는 이벤트 핸들러와 이벤트 리스너를 추가하는 데 사용됩니다. 🎜rrreee🎜그 중 🎜

selector: CSS 선택기 또는 jQuery 객체일 수 있는 이벤트에 바인딩할 요소를 선택하는 데 사용됩니다.

event: 바인딩할 요소를 지정합니다. click, mousedown, mousemove 등과 같은 특정 이벤트 유형;

childSelector: 이벤트에 바인딩될 하위 요소를 필터링하는 데 사용되는 선택적 매개변수.

data: 선택적 매개변수, 이벤트 핸들러에 전달되는 매개변수.

함수: 내장 함수, 사용자 정의 함수 또는 익명 함수일 수 있는 바인딩할 이벤트 핸들러를 지정합니다.

2. `.on()` 메소드의 사용법

🎜.on() 메소드는 다음과 같이 다양한 용도로 사용됩니다. 하나씩 소개하겠습니다. 🎜

1. 단일 이벤트 듣기

🎜다음 예에서는 모든 버튼 요소에 대한 click 이벤트 리스너를 추가합니다. 🎜rrreee🎜또한, .on() 메서드는 mousedown, mousemove, keydown 등과 같은 다른 이벤트 유형도 지원합니다. 🎜

2. 여러 이벤트 듣기

🎜 .on() 메서드는 여러 이벤트 바인딩도 지원합니다. 다음 예에서는 버튼에 click, mousedown 및 mouseup 이벤트 리스너: 🎜rrreee

3. 하위 요소 지정

🎜.on ( ) 메서드는 이벤트 바인딩을 위한 하위 요소 필터링도 지원합니다. 다음 예에서는 ul 요소의 모든 li 요소에 click를 추가합니다. . >이벤트 리스너: 🎜rrreee

4. 여러 이벤트를 한 번에 트리거

🎜 여러 이벤트 유형을 on() 메서드에 매개변수로 전달하면 이러한 이벤트를 한 번에 트리거할 수 있습니다. 다음 예와 같이 이벤트 리스너를 추가합니다.🎜rrreee

5. 이벤트 버블링 사용

🎜이벤트 버블링을 사용하면 이벤트를 동적 요소에 바인딩할 수 있습니다. 상위 요소, 하위 요소에서 이벤트가 트리거되면 이벤트가 하위 요소에서 상위 요소로 버블링되어 이벤트 핸들러를 트리거합니다. 🎜🎜다음 예에서는 모든 button 요소와 동적으로 추가된 하위 요소에 click 이벤트 리스너를 추가합니다. 🎜rrreee