Jquery 이벤트를 모니터링하는 방법은 무엇입니까?-프런트엔드 Q&A-php.cn

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?

青灯夜游

풀어 주다： 2023-01-28 15:53:54

원래의

3657명이 탐색했습니다.

jQuery는 네 가지 이벤트 수신 방법을 제공합니다. 1. 바인딩()을 사용하여 선택한 요소에 하나 이상의 이벤트 핸들러를 추가하고 이벤트 처리 기능을 설정할 수 있습니다. 2. live()를 사용하여 하나 이상의 이벤트 핸들러를 추가할 수 있습니다. 현재 또는 향후 일치하는 요소에 하나 이상의 이벤트 핸들러를 추가하고 핸들러 함수를 설정합니다. 3. 위임()을 사용하여 지정된 요소(선택한 요소의 하위 요소)에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있습니다. . on()을 사용하면 선택한 요소와 하위 요소에 하나 이상의 이벤트 핸들러를 추가할 수 있습니다.

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?

이 튜토리얼의 운영 환경: windows7 시스템, jquery3.6 버전, Dell G3 컴퓨터.

jQuery는 이벤트를 바인딩하는 다양한 방법을 제공합니다. 각 방법에는 고유한 특성이 있습니다. 이들 사이의 유사점과 차이점을 이해하면 코드를 작성할 때 올바른 선택을 하여 우아하고 쉽게 유지 관리되는 코드를 작성할 수 있습니다. jQuery에서 이벤트를 바인딩하는 방법을 살펴보겠습니다.

jQuery는 바인딩, 라이브, 위임, 켜기 등 4가지 이벤트 모니터링 방법을 제공합니다. unlisten에 해당하는 기능은 unbind, die, undelegate, off

1, blind

정의 및 사용법: 하나 이상의 이벤트를 추가합니다. 선택한 요소에 대한 핸들러를 지정하고 이벤트가 발생할 때 실행할 함수를 지정합니다.

구문:

$(selector).blind("事件类型"，data,function(){});
//data是传入函数的参数用event.data获取（平时用的.click()等都是其简化用法）

로그인 후 복사

Features

정적 페이지에 적용 가능하며, 호출 시 이미 존재하는 요소에만 바인딩할 수 있고 나중에 추가되는 요소에는 바인딩할 수 없습니다
페이지가 로드됨, 블라인드 만들기

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").bind("click", function() {
					console.log("这个段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点我！</p>

	</body>
</html>

로그인 후 복사

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?

2, live

정의: 현재 또는 미래의 일치 요소에 하나 이상의 이벤트 핸들러를 추가합니다.

구문:

live("事件类型",data, 函数名);//data可选

로그인 후 복사

특징: live 이벤트는 자신(this)에 바인딩되지 않고 this.context

에 바인딩됩니다. 이벤트 위임 메커니즘을 사용하여 이벤트 모니터링 및 처리를 완료하고 노드 처리를 문서에 위임합니다

새로 추가된 요소 리스너를 다시 바인딩할 필요가 없으며 여러 이벤트를 처리할 수 있습니다

직접 선택한 요소 뒤에만 배치할 수 있습니다

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-1.7.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").live("click", function() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>点我!</button>
		<br><br>
	</body>
</html>

로그인 후 복사

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?

참고: live() 메서드는 jQuery 버전 1.7에서 폐기되었고 버전 1.9로 이동되었습니다. . 대신 on() 메소드를 사용하십시오.

3. Delegate

delegate() 메서드는 지정된 요소(선택한 요소의 하위 요소)에 하나 이상의 이벤트 핸들러를 추가하고 이러한 이벤트가 발생할 때 실행할 함수를 지정합니다.

Delegate() 메서드를 사용하는 이벤트 핸들러는 현재 또는 미래의 요소(예: 스크립트로 생성된 새 요소)에 적용됩니다.

구문:

delegate(selector,type,[data],fn)

로그인 후 복사

특징: 작은 범위에서 이벤트 프록시를 더 정확하게 사용하고 성능이 .live()보다 낫습니다. 동적으로 추가된 요소에 사용할 수 있습니다.

("父级选择器").delegate(".a","click",function())//表示：.a的事件通过父级元素进行委托，(this)获取的是触发事件的子元素

로그인 후 복사

예:

요소 내의

요소를 클릭하면 모든

요소의 배경색이 변경됩니다.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("div").delegate("p", "click", function() {
					$("p").css("background-color", "pink");
				});
			});
		</script>
	</head>
	<body>

		<div style="background-color:yellow">
			<p>这个段落在 div 元素内。</p>
		</div>
		<p>这是一个段落。</p>

	</body>
</html>

로그인 후 복사

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?

4, on

정의: 이벤트의 경우 가장 가까운 상위 요소에 바인딩

구문:

on(type, 选择器，方法)

로그인 후 복사

기능:

상위 요소 아래에 새로 추가된 태그에 대해 이벤트 모니터링을 사용할 수도 있습니다.
또한 다중 시간 이벤트 처리도 지원합니다

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="./js/jquery-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").on("click", function() {
					console.log("段落被点击了。");
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落。</p>

	</body>
</html>

로그인 후 복사

Jquery 이벤트를 모니터링하는 방법은 무엇입니까?