고정 헤더 영역
상세 컨텐츠
본문
이벤트 등록
앞에서는 하나의 이벤트가 발생했을 때 그에 해당되는 이벤트 메써드로 발생된 이벤트를 처리했는데,
예를 들어서 사용자가 마우스를 클릭하면 click 이벤트가 발생되고 click() 매써드로 이 이벤트를 처리했다.
비슷한 예로 mouseenter 이벤트가 발생되면 이 이벤트를 처리하는 mouseenter() 메써드로 처리할 수 있다.
제이쿼리에서는 on() 매써드를 사용해서 발생되는 이벤트를 이벤트 핸들러에 직접 등록할 수 있다.
on() 매써드로 다수의 이벤트를 처리해보자.
https://dev-jones.tistory.com/97
** 이벤트 등록자 on() 메써드
▪ 하나의 이벤트 등록 on() 매써드
$(선택자).on(“이벤트”, funcrion() {
이벤트_핸들러_코드1;
}); 구문이다.
▪ 다수의 이벤트 등록 on() 메써드
$(선택자).on( {
이벤트1 : function() {
이벤트_핸들러_코드1;
},
이벤트2 : function() {
이벤트_핸들러_코드2;
},
이벤트3 : function() {
이벤트_핸들러_코드3;
},
...
}) 구문이다.
.on("click")
<script>
$(document).ready(function(){
$("button").on("click",function(){ // click 이벤트 등록
$("p").addClass("yellow");
});
});
</script>
<style>
.yellow { background-color:yellow;}
</style>
</head>
<body>
<p>티끌모아 태산</p>
<button> 클릭 ! </button>
</body>
.on mouseenter mouseleave click dbclick
<script>
$(document).ready(function(){
$("p").on({
mouseenter:function(){
$(this).css("background-color","yellow");
},
mouseleave:function(){
$(this).css("background-color","pink");
},
click:function(){
$(this).css("background-color","skyblue");
},
dblclick:function(){
$(this).css("background-color","red");
}
});
});
</script>
<style>
</style>
</head>
<body>
<p style="border:solid 2px black;">발 없는 말이 천리간다</p>
</body>\
