jquery의 일반적인 바인딩 이벤트는 무엇입니까?

jQuery에는 일반적으로 사용되는 네 가지 바인딩 이벤트가 있습니다. 1. 선택한 요소와 하위 요소에 하나 이상의 이벤트 핸들러를 추가하는 "on()" 메서드 2. 추가하는 "bind()" 메서드 특정 이벤트 유형의 수신 함수를 선택한 요소에 바인딩합니다. 3. 버전 1.9에서 제거된 "live()" 메서드. 4. "delegate()" 메서드, 지정된 요소 Handler에 하나 이상의 이벤트를 추가합니다. 지정된 기능을 실행합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

jquery에는 일반적으로 사용되는 네 가지 바인딩 이벤트가 있습니다.

1.on() 메서드(선호되는 방법)

on() 메서드는 선택한 요소 및 하위 요소 핸들러에 하나 이상의 이벤트를 추가합니다. .

jQuery 버전 1.7부터 on() 메서드는 바인딩(), live() 및 위임() 메서드를 새롭게 대체합니다. 이 방법은 API에 많은 편의성을 제공하며 jQuery 코드 기반을 단순화하므로 권장됩니다.

매개변수:

event: 필수입니다. 선택한 요소에서 제거할 하나 이상의 이벤트 또는 네임스페이스를 지정합니다. 여러 이벤트 값을 공백으로 구분합니다. 유효한 이벤트여야 합니다.

data: 선택 사항입니다. 이벤트 핸들러를 지정된 하위 요소에만 추가할 수 있음을 지정합니다(더 이상 사용되지 않는 Delegate() 메서드와 같은 선택기 자체는 추가할 수 없음).

function: 선택 사항입니다. 이벤트가 발생할 때 실행할 함수를 지정합니다.

map: 요소에 추가할 하나 이상의 이벤트와 이벤트가 발생할 때 실행할 함수가 포함된 이벤트 맵({event:function, event:function, ...})을 지정합니다.

구문: ​​$(selector).on(event,childSelector,data,function,map)

예: p 요소

$("p").on("click",function(){

    alert("The paragraph was clicked.");

});

2에 클릭 이벤트를 추가합니다. bind()의 기능은 특정 이벤트 유형의 청취 기능을 선택한 요소에 바인딩하는 것입니다.

매개변수:

필수입니다. 클릭, 변경, 마우스 오버 등의 이벤트 유형;

선택 사항. 청취 함수에 전달된 매개변수는 event.data를 통해 획득됩니다. 선택 사항.

필수. 이벤트가 발생할 때 실행할 함수(리스닝 함수)를 지정하며, 이벤트 객체를 전달할 수 있습니다. 여기서 이벤트는 jQuery로 캡슐화된 이벤트 객체이므로 기본 이벤트 객체와는 다르므로 주의가 필요합니다. 그것을 사용하여.

map: 요소에 추가할 하나 이상의 이벤트와 이벤트가 발생할 때 실행할 함수를 포함하는 이벤트 맵({event:function, event:function, ...})을 지정합니다. 발생 구문: $(

).bind(event,data,function,map)예:

$("p").bind("click",function(){

    alert("单击p元素");

});

live(), 버전 1.9에서 제거되었습니다.

매개변수:

event: 필수. 요소에 추가할 하나 이상의 이벤트를 지정합니다. 여러 이벤트 값을 공백으로 구분합니다. 유효한 이벤트여야 합니다.

선택사항.

필수입니다. 이벤트가 발생하면 함수 구문: $(

).live(event,data,function)예: 버튼을 클릭하면

요소 :

$("button").live("click",function(){

    $("p").slideToggle();

});

四、delegate()方法

delegate() 方法为指定的元素（属于被选元素的子元素）添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。

参数：

childSelector：必需。规定要添加事件处理程序的一个或多个子元素。

event：必需。规定添加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。

data:可选。传递到该函数的额外参数

function:必需。当事件发生时，运行的函数

语法：$(selector).delegate(childSelector,event,data,function)

举例：当单击

$("div").delegate("p","click",function(){

    $("p").css("background-color","pink");

});