07.29(이벤트)

mouseover/mouseout

자식요소에 접근할때도 이벤트 발생

 

 

mouseenter/mouseleave

자식요소 접근시는 이벤트 발생하지 않음(더 많이 사용)

<script>
// $(".outer").mouseover(function(){
//     //이벤트핸들러 콜백함수 안에서 this는 이벤트 발생객체
//     // console.log(this);
//     console.log("MOUSEOVER!");
// }).mouseout(function(){
//     console.log("MOUSEOUT!");
// });
$(".outer")
    .mouseenter(function(){
        console.log("MOUSEENTER");
        
}).mouseleave(function(){
    console.log("MOUSELEAVE");
});

//hover : mouseenter + mouseleave
$(".outer").hover(function() {
    //mouseenter
    $(this).addClass("over");
}, function() {
    //mouseleave
    $(this).removeClass("over");
});
</script>

 

 

key관련 이벤트

keydown

keypress(자주 사용)

keyup

<input type="text" id="input-test">
<script>
$("#input-test").keydown(function(e){
    console.log("keydown");
    console.log(e.keyCode + " : " + e.key);
}).keypress(function(e) {
    console.log("keypress");
    console.log(e.keyCode + " : " + e.key);
}).keyup(function(e) {
    console.log(e.keyCode + " : " + e.key);
});
</script>

 

동적으로 글자수 세기

<form action="javascript:alert('제출성공');">
<p><span id="counter">0</span>/30</p>
    <textarea id="content" cols="30" rows="10"></textarea>
    <input type="submit" value="제출">
</form>
<script>
$("#content").keyup(function() {
    let len = $(this).val().length;
    let $counter = $("#counter").html(len);  //반복사용할때는 변수선언하고 처리하는게 좋음(중복가능성)

    if(len > 30)
        $counter.css("color", "red");
    else
        $counter.css("color", "black");
});

//jquery의 유효성 검사
$("form").submit(function(e){
    let len = $("#content").val().length;
//     if(len == 0 || len > 30){
//         alert("작성내용이 유효하지 않습니다.")
//         return false;
//     }
//     return true;
    if(len == 0 || len >30){
        //이벤트 기본 작동 중지
        e.preventDefault();
    }
});
</script>

 

 

on | off

on : 이벤트 핸들러 연결 bind

off : 이벤트 핸들러 제거 unbind

<h1 id="title">10CM</h1>
<style>
.reverse {
    background-color: #000;
    color: springgreen;
}
</style>
<script>
$("#title").on("mouseenter", function(){
    $(this).addClass("reverse");
}).on("mouseleave", function() {
    $(this).removeClass("reverse");
}).on("dblclick", function(){
    $(this).off("mouseenter")
            .off("mouseleave")
            .removeClass("reverse");
});
</script>

 

 

이벤트 버블링

이벤트 버블링(자식요소에 발생한 이벤트가 부모요소로 전파)을 사용하는 on이벤트 핸들링

<div id="wrapper">
    <h2>안녕</h2>
    <h3>잘가</h3>
</div>
<script>
//코드 실행시점에 존재하는 #wrapper h2에만 적용
// $("#wrapper h2").click(foo);

//부모요소에 이벤트핸들러를 설치
$("#wrapper").on('click', "h2", foo);

function foo() {
    //이어서 추가하기
    $("#wrapper").append("<h2>안녕</h2>"); //새로 추가된 요소 클릭해도 더 추가되지 않음 
    // $("#wrapper h2").click(foo);
}
</script>

<h2 id="trg-title" style="background-color: tan;">trigger</h2>
<div id="trigger" style="background-color: tan;"><span>0</span></div>
<script>
$(()=>{
    let count = 0;
    $("#trigger").click(function(){
        $(this).children("span").html(++count);
    });

    $("#trg-title").click(function(){
        //실제 클릭이 아닌 클릭시 호출될 이벤트 핸들러 호출
        $("#trigger").trigger('click');
    });
});
</script>