jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항은 무엇입니까?-JS 튜토리얼-php.cn

jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항은 무엇입니까?

小云云

풀어 주다： 2018-01-22 11:21:08

원래의

1271명이 탐색했습니다.

jQuery 버전 업데이트로 이전 버전의 Bind(), live(), Delegate() 이벤트가 바로 on으로 대체될 수 있게 되었습니다. 본 노트에서는 클릭 이벤트만 예로 들고, 주로 사용법을 살펴보겠습니다. on 이벤트 중: 본 글에서는 주로 참고할만한 가치가 있는 jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항에 대해 설명합니다. 아래 편집기를 살펴보겠습니다. 모든 사람에게 도움이 되기를 바랍니다.

1. on을 사용하여 클릭 이벤트가 정상적으로 트리거되기 전에 추가된 DOM을 모니터링할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $(document.body).append(op);
 $("#test").on(&#39;click&#39;, function(){
 alert(&#39;这是事件前添加的DOM,可以正常触发点击事件&#39;);
 });
 } );
</script>
</head>
<body>
 <p id="wrap"></p>
</body>
</html>

로그인 후 복사

2. on을 사용하여 클릭 이벤트 이후에 추가된 DOM을 정상적으로 모니터링할 수 없습니다.

<!-- 一、正常的DOM: -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#test").on(&#39;click&#39;, function(){
 alert(&#39;这是事件后添加的DOM,无法正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $(document.body).append(op);
 } );
</script>
</head>
<body>
 <p id="wrap"></p>
</body>
</html>

로그인 후 복사

3. 해결 방법: 이벤트 위임을 사용하세요. 주의할 점은 위임된 객체가 이미 DOM에 존재하거나 이벤트 전에 동적으로 추가되어야 한다는 점입니다. 이때 이벤트는 수신 대기를 위해 사용한 후 정상적으로 트리거될 수 있습니다. 4단계:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 var oWrap = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 $("#wrap").on(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件前添加,可以正常触发点击事件&#39;);
 });
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#wrap").append(op);
 } );
</script>
</head>
<body>
</body>
</html>

로그인 후 복사

4. Delegation 이벤트 이후에 객체가 추가되며, 클릭 이벤트가 발생하지 않습니다

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
 #test {
 height: 100px;
 font-size: 50px;
 color: yellow;
 line-height: 100px;
 background-color: red;
 text-align: center;
 }
</style>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script>
 $( function(){
 $("#wrap").on(&#39;click&#39;, $(&#39;#test&#39;), function(){
 alert(&#39;委托对象在事件后添加,无法正常触发点击事件&#39;);
 });
 var oWrap = $(&#39;<p id="wrap"></p>&#39;);
 $(document.body).append(oWrap);
 var op = $(&#39;<p id="test">点我</p>&#39;);
 $("#wrap").append(op);
 } );
</script>
</head>
<body>
</body>
</html>

로그인 후 복사

5. 설명: 직장에서는 이벤트 바인딩 및 이벤트에 on 이벤트가 더 일반적으로 사용됩니다. 위임, 적어도 나는 그것을 더 많이 접했습니다. 라이브 이벤트의 사용법 주된 이유는 이전 jQuery 객체가 $(document).on()과 같은 문서가 되었기 때문입니다. 따라서 다른 예를 제시하지 않겠습니다.

루프에서 JQuery 바인딩 이벤트 문제에 대한 자세한 설명

이벤트 함수 사용에 대한 자세한 설명 자바스크립트에서 이벤트 속성을 사용하여 바인딩

위 내용은 jQuery에서 이벤트를 바인딩하기 위해 on을 사용할 때 주의해야 할 사항은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!