이 글은 주로 jquery 이벤트 위임을 사용하는 방법을 소개합니다. 이제 특정 참고 가치가 있습니다. 필요한 친구들이 참고할 수 있습니다.
1. 요약
한 문장으로 요약: on 메서드(이벤트 위임)를 사용하여 이벤트가 바인딩된 요소의 조상에 이벤트를 바인딩하여 효과를 얻습니다.
1. 이벤트 위임이란 무엇인가요?
이벤트 버블링을 통해 하위 요소에 바인딩된 이벤트가 상위 요소(또는 상위 요소)까지 버블링되도록 한 다음 처리합니다.
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
2. 이벤트 위임의 장점은 무엇인가요?
동적 요소에 이벤트 추가
이벤트는 한 번만 바인딩되므로 매우 효율적입니다. 바인딩해야 하는 동일한 유형의 요소가 많은 경우 효율성이 매우 높습니다. , 2500td의 테이블과 같이 각 td는 바인딩되어야 합니다. 이벤트)
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
3. 이벤트 위임의 청취 대상은 누구입니까(이벤트 위임의 대상은 누구입니까)?
이벤트를 실행하려면(예: 이벤트를 다수의 TD에 바인딩하기 위해) 이벤트 위임의 개체는 테이블인 조상입니다.table
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
4. 코드에 의해 추가된 요소 동적으로 추가된 요소의 차이점은 무엇입니까?
코드 생성 요소에 이벤트를 추가하는 코드는 이벤트를 바인딩할 수 있도록 코드가 생성된 후에 이루어져야 합니다.
73 //如果不是动态创建的，可以直接绑定事件
74 $('<p></p>').appendTo($('body'))
75 $('<p></p>').appendTo($('body'))
76 $('<p></p>').appendTo($('body'))
77 $('p').on('click',function(){
78 $(this).css('background','orange')
79 })로그인 후 복사
5 이벤트의 사용 시나리오는 무엇입니까? 대표단?
테이블에 여러 개의 TD가 있습니다. 각 TD에 이벤트를 바인딩하는 방법을 사용하면 매우 비효율적이고 오류가 발생하기 쉽습니다. 한 단계로 이벤트 위임을 사용하세요.
91 //使用事件委托，只在table上绑定一次事件
92 //可以动态绑定事件
93 $('table').on('click','td',function(){
94 //$(this).css('background','orange')
95 alert('click_td')
96 })로그인 후 복사
로그인 후 복사
로그인 후 복사
로그인 후 복사
6. 테이블에 행과 열을 동적으로 추가하는 방법은 무엇입니까?
html 코드+추가 메소드
87 $('#btn1').click(function(){
88 $('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
89 })로그인 후 복사
2. jquery 이벤트 위임 사용 방법
1. 관련 지식
이벤트 위임
은 이벤트 버블링을 사용하여 하위 요소에 바인딩된 이벤트가 상위 요소(또는 상위 요소)에 버블링된 다음 처리되도록 허용합니다.
2, code
<!DOCTYPE html>
<html>
<style>
</style>
<head>
<meta charset="UTF-8">
<title>演示文档</title>
<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
<style type="text/css">
input{width: 100px;height: 30px;}
div{width: 50px;height: 50px;border:1px solid green;display: inline-block;margin-left: 15px}
td{width: 50px;height: 20px;background: #ccc}
</style>
</style>
</head>
<body>
<h3>jQuery事件对象</h3>
<input id="btn1" type="button" value="事件绑定"><br>
<div></div>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<script type="text/javascript">
$(function(){
/*
//使用事件委托动态绑定事件
$('#btn1').on('click',function(){
$("<div></div>").appendTo($('body'))
})
// $('div').on('click',function(){
// $(this).css('background','orange')
// })
$(document).on('click','div',function(){
$(this).css('background','orange')
})
//移出事件委托
$(document).off('click','div')
//如果不是动态创建的，可以直接绑定事件
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('<div></div>').appendTo($('body'))
$('div').on('click',function(){
$(this).css('background','orange')
})
//每一个td绑定一个事件
//不能动态的添加事件,效率低
$('td').on('click',function(){
alert('click_td')
})
*/
$('#btn1').click(function(){
$('<tr><td></td><td></td><td></td><td></td><td></td></tr>').appendTo('table')
})
//使用事件委托，只在table上绑定一次事件
//可以动态绑定事件
$('table').on('click','td',function(){
//$(this).css('background','orange')
alert('click_td')
})
})
</script>
</body>
</html>로그인 후 복사
동적 요소에 이벤트 추가
이벤트는 한 번만 바인딩되므로 효율성이 높습니다
위 내용은 전체 내용입니다. 기사 내용, 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해 주세요!
관련 권장 사항:
js는 모든 요소를 지정된 위치로 이동합니다.
#🎜🎜 #Node.js는 슈퍼에이전트를 사용하여 GET/POST 요청을 시뮬레이션합니다
위 내용은 Jquery 이벤트 위임을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
