집 > 기사 > 웹 프론트엔드 > jQuery 이벤트 위임 인스턴스 분석_jquery

jQuery 이벤트 위임 인스턴스 분석_jquery

WBOY원래의: 2016-05-16 15:50:141459검색

이벤트 위임은 주로 이벤트 버블링 현상을 활용하여 구현됩니다. 이벤트 위임을 정확하게 숙지하면 코드 실행 효율성을 높이는 데 도움이 됩니다. 먼저 코드 예제를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
 width:300px;
 height:60px;
 background-color:green;
} 
table td{
 background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("td").bind("click",function(){
  $(this).text("哈哈");
 })
})
</script>
</head>
<body>
<table cellspacing="1">
 <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>
</body>
</html>

위 코드에서는 bin() 메서드를 사용하여 클릭 이벤트 핸들러를 각 td에 바인딩하므로 셀을 클릭하면 셀의 텍스트가 재설정됩니다. 이 방법은 원하는 효과를 얻고 매우 완벽해 보이지만 그렇지 않습니다. 셀이 너무 많으면 셀을 순회하고 각 셀에 이벤트 처리 기능을 바인딩하면 코드 성능이 크게 저하됩니다. 이벤트를 수신하기 위한 셀의 요소인 경우, 처음에 이벤트를 트리거한 DOM 요소가 td인지 확인하기만 하면 됩니다.

코드는 다음과 같이 수정됩니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>脚本之家</title>
<style type="text/css">
table{
 width:300px;
 height:60px;
 background-color:green;
} 
table td{
 background-color:white;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("table").bind("click",function(e){
  var target = e.target;
  $target=$(target);
  if ($target.is("td")){
   $target.text('哈哈');
  }
 })
})
</script>
</head>
<body>
<table cellspacing="1">
 <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>
</body>
</html>

위 코드는 동일한 기능을 구현했지만 효율성이 크게 향상되었습니다.

요약: 소위 이벤트 위임은 이벤트 대상이 이벤트 자체를 처리하지 않고 처리 작업을 상위 요소나 상위 요소 또는 루트 요소에 위임한다는 의미입니다.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.

성명：

이전 기사：드롭다운 목록 값을 정렬하는 JavaScript 방법_javascript 기술다음 기사：드롭다운 목록 값을 정렬하는 JavaScript 방법_javascript 기술

jQuery 이벤트 위임 인스턴스 분석_jquery

관련 기사