▶ jQuery 이벤트 연결
페이지 정보
본문
메서드 | 설명 | |
on() | $("button").on("click", function(){ console.lgo("이벤트 연결"); }); | button 요소에 click 이벤트를 연결합니다. |
| $("button").on("mouseenter focus", function(){ console.lgo("이벤트 연결"); }); | button 오소에 mouseenter와 focus 이벤트를 연결합니다. | |
| $("div").on("click","button", function(){ console.lgo("이벤트 연결"); }); | div의 하위 요소 button 요소에 click 이벤트를 연결합니다. | |
| $("div").on("click", function() { $("p", this).css("background", "#ff0000"); }); | div 요소를 클릭하면 div의 하위 요소 p요소를 선택합니다. | |
off() | $("button").off("click"); | 연결된 이벤트를 제거합니다. |
one() | $("button").one("click", function(){ console.lgo("이벤트 연결"); }); | 이벤트를 한번만 연결합니다. |
ex)
<style>
*{
margin: 5px;
}
.on{
background: #ff6600;
color: #fff;
}
</style>
<script>
$(document).ready(function() {
$("#m1 button").on("click", function() {
alert("이벤트 연결1");
});
$("#m2").on("click", "button", function() {
alert("이벤트 연결2");
});
$("#m3 button").on({
mouseenter : function() {
$(this).toggleClass("on");
}, mouseleave : function() {
$(this).toggleClass("on");
}
});
function showEvnet(){
alert("이벤트 연결3");
}
$("#m4 button").on("click", showEvnet); //함수명으로 연결
$("#m5 button").on("click", function() {
alert("이벤트 제거");
}).off(); //alert() 실행되지 않는다.
$("#m6 button").one("click", function() {
alert("이벤트 한번만 연결");
});
$("#m7").on("click", function() {
$("p", this).css("background", "#ff0000"); //"p" 와 this 를 지우면서 테스트
});
});
</script>
<div id="m1">
<button>클릭1</button>
</div>
<div id="m2">
<button>클릭2_1</button>
<button>클릭2_2</button>
</div>
<div id="m3">
<button>클릭3</button>
</div>
<div id="m4">
<button>클릭4</button>
</div>
<div id="m5">
<button>클릭5</button>
</div>
<div id="m6">
<button>클릭6</button>
</div>
<div id="m7" style="padding:'20px';border:1px solid blue;width:100px;">
<p>클릭7</p>
</div>
[실행결과]
- 이전글메뉴 - 마우스오버시 메뉴 효과 21.07.21
- 다음글▼ jQuery 이벤트 종류 ( 냉무 ) 21.07.20
댓글목록
등록된 댓글이 없습니다.