이벤트: 웹페이지에서 발생하는 사용자의 동작들
이벤트를 주는걸 바인딩이라고 한다.
이벤트연결 : $(selector).on()
이벤트 제거 : $(selector).off()
선택된 요소와 하위요소에 한개이사이벤트바인딩
$(selector).on(event, 자식셀렉터, 데이터, function(){}, map)
이벤트랑 function만 필수임
on("click"과 .click(의 차이
$(p).click은 사용자가 뭔가 이벤트를 다른걸 해서 다른 p태그가 생겼을때 새로생기는 p태그에ㄴ는 먹히지않음
on("click"은 아직없고 앞으로 생성되는 p태그에게도 적용이되는거임
$(selctor).one(은 이벤트가 한번만 수행되고 제거됨 (off쓸필요가없다)
intro{를 스타일에 해놓고 마우스올리면 그 스타일이 적용이된다.
이벤트를 내가 정의해서 쓸수있음 (그냥 알아만두기)
$().on("myOwnEvent",funtion(event, name){
});
그런 저 이벤트는 어케발생? trigger라는 함수가 있음. 실제로 뭔가하지않앗찌만 그 이벤트를
강제로 호출하는거임
$().click(functino(){
4().trigger("myOwnEvent","Ann")
})
트리거는 기억해두기
$().trigger(event)
선택된 모든 요소에 동작. 이벤트의 기본동작을 발생시킴
$().triggerHandler(event,param1,param2..)
함수만 실행시키고, 이벤트의 기본동작은 발생시키지 않음
선택된 첫번째 요소에만 동작
버블링 되지 않음
주소찾는 셀렉박스가있따고 생각해보자.
대전광주등 지역선택(셀렉박스1)하면 대덕구중구서구 구선택하는 셀렉박스(셀렉박스2)도 바뀌어야함
셀렉박스1.change이벤트가 걸려야함
화면이 맨첨로딩이되면 대전이라고 기본선택만되어있고 셀렉2엔 대덕구등이 세팅이안됨
그후에 광주로 바꿔주면 체인지가 발생해서 광주의 구들이 나옴
사용자입장에선 기본대전이된채로 로딩외었을때 셀렉2가 대전의 구를 강제로 호출해줫으면 하는맴
이떄 트리거를 쓴다. trggerChange
sel1.change(fun(){
구를 조회해서 화면에 세팅
})
기본대전의 구를 세팅하려면 (최초로딩시 ) sel2.세팅하는 스크립트..길게짜기말구
sel1.trgger("change"만 쓰면 change이벤트를 강제로 발생시킬수있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Trigger</title>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>포커스</span>").appendTo("body").fadeOut(1000);
});
//페이지가 로딩되자마자 포커스글자가 보이게하고싶다(사용자가 클릭을안해도 클릭한것마냥)
// $("input").triggerHandler("focus");
$("input").trigger("focus");
});
</script>
</head>
<body>
<button id= "old" type="button">trigger</button>
<button id= "new" type="button">triggerHandler</button><br/><br/>
<input type="text" value="to Be Focused">
</body>
</html>
이벤트 등록 메소드 배경
bind() 는 선택된 모든 요소에 핸들러를 등록한다
그러나 스크립트에 의햇 새로 추가되는 요소에는 핸들러가 지정되지 않음
미래에 추가될 요소들에 대해서도 미리 등록하는 메서드가 필요 >> delegate
제이쿼리 효과
$().hide나show(speed,callback)
callback은 수행후 다음에 수행할 함수를 말함. 다음순서
speed 는 밀리세컨단위
fadeIn 숨겨진 요소를 불투명 효과를 주면서 보여줌
fadeOut 불투명효과를 주면서 숨김
역시 스피드줄수잇음
fadeToggle,
fadeTo 설정된 불투명도로 fadeIn 또는 fadeOut
show, hide는 왼쪽상단부터 펼쳐치고 slide는 한면에서부터 펼쳐짐
Animation
찾아보기
callback : 작업이 끝난 후에 실행되는 것
$("button:last").click(function(){
$("div").toggle(3000, function(){
alert(3);
});
});
이렇게 하면 3초동안 숨겨진 후에! alert이 뜬다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
img{
width: 250px;
}
</style>
<script src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript">
$("document").ready(function(){
$("button:nth-child(1)").click(function(){
$("img").show(2000);
});
$("button:nth-child(2)").click(function(){
$("img").hide(2000);
});
$("button:nth-child(3)").click(function(){
$("img").slideUp();
});
$("button:nth-child(4)").click(function(){
$("img").slideDown();
});
$("button:nth-child(5)").click(function(){
$("img").slideToggle();
});
$("button:nth-child(6)").click(function(){
$("img").fadeIn();
});
$("button:nth-child(7)").click(function(){
$("img").fadeOut();
});
$("button:nth-child(8)").click(function(){
$("img").fadeTo("slow",0.5);
});
$("button:nth-child(9)").click(function(){
$("img").fadeToggle();
});
});
</script>
</head>
<body>
<button type="button">Show</button>
<button type="button">Hide</button>
<button type="button">SlideUp</button>
<button type="button">SlideDown</button>
<button type="button">SlideToggle</button>
<button type="button">FadeIn</button>
<button type="button">FadeOut</button>
<button type="button">FadeTo</button>
<button type="button">FadeToggle</button><br>
<img src = "../../images/stars.jpg">
</body>
</html>
'Oracle > Html_CSS_JAVAScript' 카테고리의 다른 글
| JSON , AJAX (0) | 2020.12.17 |
|---|---|
| jquery (0) | 2020.12.14 |
| jquery (0) | 2020.12.10 |
| jQuery (0) | 2020.12.08 |
| JS HTML 이벤트 (0) | 2020.12.07 |