jq 및 js의 이벤트 메커니즘 및 차단

JQuery의 이벤트 바인딩은 모두 이벤트 버블링입니다. 이 글에서는 jq와 js의 이벤트 메커니즘과 방지 방법을 알려드리겠습니다.

JQuery에서 이벤트 처리 기능을 바인딩하는 여러 가지 방법에서는 이벤트 유형(이벤트 버블링 또는 이벤트 캡처)을 전달할 수 없습니다. 예:

.on(events [, selector ] [, data ], handler)

Parameters
events - 문자열 유형 "click", "focus click", "keydown.myPlugin"과 같이 공백과 선택적 네임스페이스로 구분된 하나 이상의 이벤트 유형입니다.
eventsMap - 개체 유형은 개체 개체이며, 각 속성은 이벤트 유형 및 선택적 네임스페이스(매개변수 이벤트)에 해당하며, 속성 값은 바인딩된 이벤트 처리 함수(매개변수 핸들러)에 해당합니다.
selector - 옵션/문자열 유형 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다. 이 매개변수가 null이거나 생략되면 현재 요소 자체가 이벤트에 바인딩된다는 의미입니다. 이벤트 스트림이 현재 요소에 도달할 수 있는 한 실제 트리거는 하위 요소일 수도 있습니다.
data - 이벤트가 트리거될 때 event.data를 통해 이벤트 처리 함수에 전달되어야 하는 선택적/모든 유형의 데이터입니다.
handler - 함수 유형으로 지정된 이벤트 핸들러 함수입니다. 네이티브 자바스크립트에서 제공하는

addEventListener()를 사용하면 이벤트 유형을 설정할 수 있습니다.

element.addEventListener(event, function, useCapture)

매개변수
event - 필수입니다. 이벤트 이름을 지정하는 문자열입니다.

참고: "on" 접두사를 사용하지 마세요. 예를 들어 "onclick" 대신 "click"을 사용합니다.

function - 필수입니다. 이벤트가 발생했을 때 실행할 함수를 지정합니다.

이벤트 객체가 첫 번째 매개변수로 함수에 전달될 때. 이벤트 개체의 유형은 특정 이벤트에 따라 다릅니다. 예를 들어 "click" 이벤트는 MouseEvent 객체에 속합니다.
useCapture - 선택 사항입니다. 이벤트가 캡처 단계에서 실행되는지 아니면 버블링 단계에서 실행되는지를 지정하는 부울 값입니다.

가능한 값:
true - 캡처 단계 중에 이벤트 핸들러가 실행됩니다.
false- false- 기본값. 이벤트 핸들러는 버블링 단계에서 실행됩니다.

이벤트 전파를 방지하는 두 가지 방법

방법 1: 이벤트 개체의 stopPropagation() 함수를 사용합니다. 이 접근 방식은 JavaScript와 일치합니다.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

방법 2: 이벤트 처리 함수의 반환 값이 false입니다. JavaScript의 addEventListener에는 이 함수가 없습니다.

$("#outC").click(function(event){  
    return false;  
});

权 저작권 표시: 이 글은 제 개인방송인 Keyon Y에서 처음 발행된 글입니다. 출처를 밝혀주세요.

JQuery의 이벤트 바인딩은 모두 이벤트 버블링입니다.

JQuery에서 이벤트 처리 기능을 바인딩하는 여러 가지 방법에서는 이벤트 유형(이벤트 버블링 또는 이벤트 캡처)을 전달할 수 없습니다. 예:

.on(events [, selector ] [, data ], handler)

Parameters

events - 문자열 유형 "click", "focus click", "keydown.myPlugin"과 같이 공백과 선택적 네임스페이스로 구분된 하나 이상의 이벤트 유형입니다.
eventsMap - 개체 유형은 개체 개체이며, 각 속성은 이벤트 유형 및 선택적 네임스페이스(매개변수 이벤트)에 해당하며, 속성 값은 바인딩된 이벤트 처리 함수(매개변수 핸들러)에 해당합니다.
selector - 옵션/문자열 유형 바인딩된 이벤트를 트리거할 수 있는 하위 요소를 지정하는 데 사용되는 jQuery 선택기입니다. 이 매개변수가 null이거나 생략되면 현재 요소 자체가 이벤트에 바인딩된다는 의미입니다(이벤트 스트림이 현재 요소에 도달할 수 있는 한 실제 트리거러도 하위 요소일 수 있음).
data - 이벤트가 트리거될 때 event.data를 통해 이벤트 처리 함수에 전달되어야 하는 선택 사항/모든 유형의 데이터입니다.
handler - 함수 유형으로 지정된 이벤트 핸들러 함수입니다. 네이티브 자바스크립트에서 제공하는

addEventListener()를 사용하면 이벤트 유형을 설정할 수 있습니다.

element.addEventListener(event, function, useCapture)

매개변수

event - 필수입니다. 이벤트 이름을 지정하는 문자열입니다.

참고: "on" 접두사를 사용하지 마세요. 예를 들어 "onclick" 대신 "click"을 사용합니다.

function - 필수입니다. 이벤트가 발생했을 때 실행할 함수를 지정합니다.

이벤트 객체가 첫 번째 매개변수로 함수에 전달될 때. 이벤트 개체의 유형은 특정 이벤트에 따라 다릅니다. 예를 들어 "click" 이벤트는 MouseEvent 객체에 속합니다.

useCapture - 선택 사항입니다. 이벤트가 캡처 단계에서 실행되는지 아니면 버블링 단계에서 실행되는지를 지정하는 부울 값입니다.

가능한 값:

true - 캡처 단계 중에 이벤트 핸들러가 실행됩니다.
false- false- 기본값. 이벤트 핸들은 버블링 단계에서 실행됩니다.

이벤트 전파를 방지하는 두 가지 방법

방법 1: 이벤트 개체의 stopPropagation() 함수를 사용합니다. 이 접근 방식은 JavaScript와 일치합니다.

$("#outC").click(function(event){  
    event.stopPropagation();  
});

방법 2: 이벤트 처리 함수의 반환 값이 false입니다. JavaScript의 addEventListener에는 이 함수가 없습니다.

$("#outC").click(function(event){  
    return false;  
});

관련 추천:

JavaScript 이벤트 메커니즘

JQuery에 대한 첫 번째 살펴보기(2) 이벤트 메커니즘(1)_jquery

JQuery에서의 이벤트 메커니즘에 대한 간략한 분석_기본 지식

위 내용은 jq 및 js의 이벤트 메커니즘 및 차단의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!