국비필기노트/jQuery
jQuery_Event
개발..너...
2022. 5. 18. 15:57
▶Event 가져오기 예시
<h1>Click event</h1>
<p>여기를 클릭해 주세요</p>
<script>
$('p').on("click",function(){
alert("문장이 클릭되었습니다")
});
</script>
▶mouseenter & mouseleave
1) 방법1: 2가지 이상의 기능에 하나의 옵션을 넣어주고 싶을 때
<body>
<h1>마우스이벤트</h1>
<p>마우스를 문장위로 움직여보세요</p>
<div></div>
</body>
<script>
$("p").on("mouseenter mouseleave",function(){
$("div").append("마우스커서가 문장위로 들어오거나 빠져나갔습니다<br>");
});
//append-> html태그를 계속 더해준다.
</script>
=> mouseenter: 마우스 커서가 문장에서 들어올 때 / mouseleave: 마우스 커서가 문장에서 빠져나갈 때
두개의 이벤트를 함께 사용하기 위해 띄어쓰기를 이용한다.
2) 방법2: 2가지 이상의 기능에 각각의 옵션을 넣어주고 싶을 때
<body>
<h1>마우스이벤트</h1>
<p>마우스를 문장위로 움직여보세요</p>
<div></div>
<script>
$("p").on({
click:function(){
$('div').append("마우스가 문장을 클릭했습니다<br>")
},
mouseenter:function(){
$('div').append("마우스가 문장위로 들어왔습니다<br>")
},
mouseleave:function(){
$('div').append("마우스가 문장을 빠져나갔습니다<br>")
}
});
</script>
</body>
▶.off( )
<body>
<h1>Off</h1>
<button id = "btn">버튼클릭가능</button>
<button id = "btnBind">버튼클릭을 가능하게 한다.</button>
<button id = "btnUnBind">버튼클릭을 불가능하게 한다.</button>
<div></div>
</body>
<script>
function action(){
$('div').append("버튼이벤트 발생<br>");
}
$("#btn").on("click",function(){
action();
});
off: 이벤트를 종료시킨다.
$('#btnUnBind').on("click",function(){
$("#btn").off("click");
$('#btn').text('버튼클릭불가능');
});
=> btnUnBind 버튼에 click이란 이벤트가 실행되면 click 이벤트가 off(중지)되고 btn아이디를 가진 버튼이 "버튼클릭불가능"이라는 text로 변경된다.
$("#btn").off("click").text("버튼클릭불가능");
=> chain기법으로 서로 이어서 써줄 수 도 있다.
$('#btnBind').on("click",function(){
$("#btn").on("click",function(){
action();
}); .text("버튼클릭가능");
})
=> btnBind버튼을 새로 만들어 거기에 해당 click기능을 넣어줌으로서 다시 기능을 가능하게 한다.
▶one( )
<body>
<h1>one()</h1>
<p>아래 버튼 한번만 실행된다.</p>
<button> 버튼을 클릭해주세요</button>
<div></div>
<script>
$("button").one("click",function(){
$("div").append("이제 클릭이 되지 않습니다.");
})
</script>
</body>
=> 핸들러가 한번만 실행되고, 더는 실행되지 않는다.
▶click(), dblclick()
<body>
<h1>jQuery click(), dblclick()</h1>
<button>버튼</button>을 클릭 or 더블클릭 하세요
<p id = "text"></p>
<script>
$("button").click(function(){
$("#text").text("클릭이 되었습니다.")
})
$("button").dblclick(function(){
$("#text").text("더블클릭이 되었습니다.")
})
</script>
</body>
=> 일반 클릭과 더블클릭을 구분한다.
▶.keypress( ), .keydown( )
<body>
<input type="text"> 입력란에 키보드로 내용을 입력하세요
<h1>jQuery .keypress()</h1>
<p id="text"></p>
<h1>jQuery .keydown()</h1>
<p id="text2"></p>
<script>
let i = 0;
$("input").keypress(function(){
$("#text").text((++i) + "번 키보드가 눌렸습니다.");
});
let j = 0;
$("input").keydown(function(){
$("#text2").text((++j) + "번 키보드가 눌렸습니다.");
});
</script>
</body>
=> shift, esc, delete와 같이 화면에 출력되지 않는 키들은 "keydown()" 이벤트는 발생시키지만, "key press" 이벤트는 발생시키지 않는다.
▶effect
<body>
<h1>hide(),show()메소드</h1>
<p>
<button id="btnHide">문장숨기기</button>
<button id="btnShow">문장표시하기</button>
</p>
<div>안녕하세요, jquery입니다.</div>
<script>
$("#btnHide").on("click",function(){
$("div").hide(1000);
});
$("#btnShow").on("click",function(){
$("div").show();
});
</script>
</body>
show( ): 선택한 요소를 나타나게 한다.
hide( ): 선택한 요소를 사라지게 한다.
( )에 1000을 넣으면 1초란 의미로 1초동안 해당 기능이 실행된다.
fast등 다른 요소를 넣는 것도 가능하다.