2022-11-08-제이쿼리 마무리 이벤트 리스너

이벤트 리스너란?

이벤트가 발생했을 때 그 처리 담당하는 함수

*이벤트: 윈도우창에서 일어날수있는 모든것, 앤터, 클릭, 포커스 등

 

로딩이벤트

.ready()

처음으로 브라우저가 켜질때 발생하는 이벤트

특징: 바디 콘텐츠보다 먼저 키자마자 발생하는 이벤트

즉 = 사람들한테 내용을 보여주기 전에 하는 작업을 넣는 곳

 

 

 

마우스 이벤트

click()

마우스클릭시 이벤트 발생

// 아이디가 디브1인 친구한테 마우스가 클릭되었을때 어떤 동작을 걸겟다 실행되는 부분이 함수
        // e는 다른걸로 바꿔도 상관없다.
        $("#div1").click(function(){
            console.log( "div click" );
        });

mouseover과 hover의 차이점

mouseover() 

마우스를 올렸을때 발생하는 이벤트

선택한 요소에 올렸을때만 감지!

 

hover()

올렸을때, 마우스오버라 호버가 동일하게 찍히고, 벗어나면 호버만 찍힘

올렸다가 뗏을때까지 둘다 감지!

        //마우스오버
        $("#div1").mouseover(function(){
                console.log("div mouseover");
        });

        //호버
        $("#div1").hover(function(){
                console.log("div hover");
        });

마우스를 물체에 올렷다가 해제 할 때

        $("#div1").hover(function(){
                console.log("div hover");
        }, function() {
                console.log("div hover2");
        });

마우스를 물체에 올렷다가 해제 할 때

올렷다 뗏을때를 다르게 동작하고 싶다면, 두개의 함수를 지정!

 

scroll()

 

키보드 이벤트

keydown()

keyup()

keypress 요즘 사용하지는 않지만.. 옛날에 사용하던 중간과정

        $("#input1").keydown(function(e){
            console.log("keydown : ", e.currentTarget.value);
            $("#alert").text("글자가 입력됨, "+ e.currentTarget.value);
            // 키다운이 발생햇을때 커렌트타겟
            console.log("input keydown");
            console.log(e);
            if (e.keydown == 13 ) {
            console.log("enter key");
            }
        });
        $("#input1").keyup(function(e){
            console.log("keyup : ", e.currentTarget.value);
            console.log("input keyup");
          
        });

입력창에 1을 입력하면

 

 

키 이벤트의 순서

1.'0'이라는 숫자를 입력한다 해보자

2. 사람이 손으로 키보드를 눌렀는데, 입력창에 아직 글자가 나오기 전 > keydown 이벤트 발생

3. 실제 글자가 나올 때 >  keypress 이벤트 발생

4. 키보드에서 손을 뗀다 >  keyup 이벤트 발생

down press up 순서로 이벤트가 발생한다.

* 지울때는 다운과 업 밖에 없다. 프래스는 생략이 된 상태

 

 

키보드에는 다 코드가 정해져있다. 인풋창에서 키다운이라는 이벤트가 발생할때(키를 누를때)그때 키에대한 객체가 e라는 변수로 들어온다

e에 키코드라는 속성으로 들어오는데 (키보드의 모든키들에 대한 번호가 정해져있다.)우리는 이것을 구분을 지어서 이벤트를 발생시킬것이다

앤터-전송이벤트 같은!것들을 우리가 직접 만들수있다.

우리가 누르는 키가 키코드에 반영됨

 

https://mjmjmj98.tistory.com/32

 

실습1 스케쥴러 만들기

힌트

on("click",function(){});

$('td').on('click', funchtion(){

     console.log( this );

     console.log( $(this).text() );

});