jQuery 이벤트 바인딩 방법 학습 요약(권장)
- 高洛峰원래의
- 2016-12-06 11:18:481317검색
jQuery의 이벤트 바인딩 메소드로는 주로 on(), 바인딩(), Delegate(), live() 등이 있습니다. 이전에 사용해본 적이 있어서 여러 가지 방법이 있다는 것을 알고 있지만 이러한 이벤트 바인딩 방법의 차이점을 모르겠습니다. 가장 많이 사용되는 방식은 on 방식인데 오늘은 정리해 볼 생각입니다.
바인드 방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>bind事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//点击添加一个新的元素
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
//给所有的p元素绑定点击事件
$("div p").click(function(){
alert($(this).text());
});
</script>
</body>
</html>
이러한 이벤트 바인딩 방법의 단점:
페이지의 p 요소가 특별합니다. 이벤트 핸들러가 너무 많으면 페이지에 이벤트 핸들러가 많아져 페이지 성능이 저하됩니다.
동적으로 생성된 새 요소의 경우 클릭 이벤트가 없습니다.
이 두 가지 단점에 대해서는 아래에서 소개할 대리자 방식을 통해 해결할 수 있습니다.
대리자 방식
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$("#btn").click(function(){
$("div").append("<p>这是一个新的p元素</p>");
});
$("div").delegate("p", "click", function () {
alert($(this).text());
});
</script>
</body>
</html>
위의 예에서는 이벤트 위임의 원리를 사용하고 위임을 사용하여 이벤트를 바인딩했습니다.
은 이벤트를 p 요소에 직접 바인딩하지 않고 이벤트를 상위 요소(또는 상위 요소)에 바인딩합니다. div 내의 요소를 클릭하면 해당 이벤트에서 레이어별로 이벤트가 트리거됩니다. target(대상 요소)은 이 예의 div 요소와 같이 이벤트를 바인딩한 요소에 도달할 때까지 버블링됩니다. 버블링 프로세스 중에 이벤트의 currentTarget이 선택기와 일치하면 코드가 실행됩니다.
이렇게 하면 바인딩() 메서드를 사용할 때 발생하는 위의 두 가지 문제가 해결됩니다. 이벤트를 p 요소에 하나씩 바인딩할 필요가 없으므로 페이지의 이벤트 핸들러 수를 효과적으로 줄일 수 있습니다. p 요소는 이벤트를 바인딩합니다.
이 방법에도 결함이 있습니다. 바인딩이 더 쉽지만 호출 시 문제가 발생할 수도 있습니다. 이벤트 대상이 DOM 트리에서 매우 깊은 경우 선택기와 일치하는 요소를 찾기 위해 레이어별로 버블링하면 성능에 영향을 미칩니다.
바인딩 및 위임 소스 코드 구현
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
// ( namespace ) or ( selector, types [, fn] )
return arguments.length === 1 ? this.off( selector, "**" ) : this.off( types, selector || "**", fn );
}
소스 코드에서 볼 수 있듯이, 바인딩()과 위임() 모두 실제로 on() 메소드를 통해 달성되는 것은 매개변수가 다르다는 것입니다.
on 메소드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery事件绑定</title>
</head>
<body>
<div>
<button id="btn">添加新的p元素</button>
<p>第一个p元素</p>
<p>第二个p元素</p>
<p>第三个p元素</p>
<p>第四个p元素</p>
<p>第五个p元素</p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
//给每一个p元素绑定点击事件
$("div").on("click","p",function(){
alert($(this).text());
});
</script>
</body>
</html>
이벤트 제거
bind(), Delegate() 및 on() 바인딩 메서드에서 이벤트 제거 방법은 다음과 같습니다.
$( "div p" ).unbind( "click", handler ); $( "div" ).undelegate( "p", "click", handler ); $( "div" ).off( "click", "p", handler );
요약
•선택자와 일치하는 요소가 많은 경우에는 수행하지 마세요. 반복 바인딩에는 바인딩()을 사용하세요.
•id 선택기를 사용할 때는 바인딩()을 사용할 수 있습니다.
•동적으로 추가된 요소를 바인딩해야 하는 경우에는 위임() 또는 on()을 사용하세요.
•Delegate() 및 on() 메소드를 사용하고 DOM 트리는 너무 깊어서는 안 됩니다.
•on()을 최대한 사용하세요.