Jquery 이벤트를 모니터링하는 방법은 무엇입니까?
- 青灯夜游원래의
- 2022-06-10 13:55:583685검색
jQuery는 네 가지 이벤트 수신 방법을 제공합니다. 1. 바인딩()을 사용하여 선택한 요소에 하나 이상의 이벤트 핸들러를 추가하고 이벤트 처리 기능을 설정할 수 있습니다. 2. live()를 사용하여 하나 이상의 이벤트 핸들러를 추가할 수 있습니다. 현재 또는 향후 일치하는 요소에 하나 이상의 이벤트 핸들러를 추가하고 핸들러 함수를 설정합니다. 3. 위임()을 사용하여 지정된 요소(선택한 요소의 하위 요소)에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있습니다. . on()을 사용하면 선택한 요소와 하위 요소에 하나 이상의 이벤트 핸들러를 추가할 수 있습니다.
이 튜토리얼의 운영 환경: 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>
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>
참고: 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>
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 이벤트를 모니터링하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!