목차
bind() 예제 - P요소 클릭 시, 경고창 띄우기 bind() 정의 bind() 구문 bind() 예제 - 여러 이벤트 부착 bind() 예제 - 이벤트 맵 사용 (= 각 이벤트에 다른 실행 함수 지정) bind() 예제 - 이벤트 발생 시 실행 함수에 데이터 전달
bind() 예제 - P요소 클릭 시, 경고창 띄우기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("click", function(){
alert("홈짱닷컴 Homzzang.com");
});
});
</script>
<p>클릭 </p>
결과보기
bind() 정의
지정 요소에 대해 1개 이상의 이벤트 핸들러 부착 및 이벤트가 발생 시 실행할 함수를 지정.
PS.JQ 3.0 - 폐기예고. on() 메서드로 대체됨.
bind() 구문
$(selector ).bind(event,data,function,map )
[매개변수]
event
필수. 선택 요소에 연결할 하나 이상의 이벤트 지정.
※ 각각의 이벤트는 공백 으로 구분하며, 유효해야 함.
data
선택. 함수에 전달할 추가 데이터.
function
필수. 이벤트 발생 시 실행할 함수.
map
이벤트맵. (즉, 선택 요소에 연결할 하나 이상의 이벤트와 각 이벤트 발생 시 실행할 함수 지정.)
(예) ({event :function , event :function , ...})
bind() 예제 - 여러 이벤트 부착
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").bind("mouseover mouseout", function(){
$("p").toggleClass("hz");
});
});
</script>
<style>
.hz {font-size: 150%;color: red;}
</style>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
bind() 예제 - 이벤트 맵 사용 (= 각 이벤트에 다른 실행 함수 지정)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").bind({
click:function(){
$("p").slideToggle();
},
mouseover:function(){
$("body").css("background-color", "yellow");
},
mouseout:function(){
$("body").css("background-color", "white");
}
});
});
</script>
<style>
.hz {font-size: 150%;color: red;}
</style>
<p>홈짱닷컴 Homzzang.com</p>
<button>클릭</button>
결과보기
bind() 예제 - 이벤트 발생 시 실행 함수에 데이터 전달
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
function hz(e){
alert(e.data.msg);
}
$(document).ready(function(){
$("p").bind("click", {msg: "홈페이지 제작관리"}, hz)
});
</script>
<p>홈짱닷컴 Homzzang.com</p>
결과보기
