이벤트

이벤트 관련 속성

 

1. 이벤트 핸들러의 매개변수로 event 객체를 전달함

2. 인라인 방식으로 이벤트 설정 시 매개변수 키워드는 event로 고정

<button onclick="test1(event);">실행확인</button>
    <script>
        function test1(e){
            console.log(e);
            console.log(e.target)
        }
    </script>

기본적으로 콘솔창으로 event와 event의 타겟 확인

 

---

 

 

이벤트 연결 종류

요소 객체에 이벤트 발생 시 연결 될 이벤트 핸들러를 지정하는 메소드

: on(), off()

 

$('선택자').bind() : 현재 존재하는 문서 객체만 이벤트 연결

$('선택자').unbind() : bind()로 연결 된 이벤트 제거

 

bind(), unbind() 메소드는 jquery-3부터 deprecated로 설정 되어 대신 on(), off() 메소드를 사용함

$('선택자').on("이벤트명", "이벤트 핸들러") : bind() 대신에 on()으로 대체됨

$('선택자').off() : on()으로 연결 된 이벤트 제거

 

 

on()의 기본 사용법

 

ex(1).

click 이벤트를 걸어 console창에 이벤트타겟과 텍스트 출력해보기

<h1 id="test1">마우스를 올려보세요</h1>
    <script>
        // on() 기본 사용법
        $("#test1").on('click', function(){
            console.log(event.target);
            // -> <h1 id="test1">마우스를 올려보세요</h1>
            console.log($(this).text());
            // -> 마우스를 올려보세요
        });
	</script>

콘솔창 확인

on() method 이용해 click이벤트 확인

 

 

ex(2).

같은 h1태그에 mouseenter, mouseleave, click 이벤트 전달하기

여러 이벤트를 객체로 전달

#test1 에 다음과 같은 이벤트를 객체로 전달함

mouseenter시 on -> 마우스 올라감, 노란 배경

mouseleave시 on -> 마우스 내려감, 연두 배경

click시 off -> 이벤트 제거됨, 주황 배경 

 

==> 단순 '이벤트명'과 '이벤트 핸들러'만 매개변수로 전달한 event 생성 시 

현재 존재하는 문서 객체에만 이벤트 연결되고

동적으로 추가된 객체에는 이벤트 추가되지 않음

 

 

 

$('선택자').on(events, selector, handler)

: 선택자를 기준으로 매개변수로 전달 된 selector에 지정한 event 발생 시 해당 handler를 동적 적용 시켜

이벤트 처리를 할 수 있음

이건 예시를 봐야 이해가 빠름

 

ex.

h2 태그를 클릭하면 새로운 h2 태그를 생성해서 추가

 

$(document).on('click','h2',add); 에 선택자 'h2'를 전달하지 않으면

제일 윗 줄 "클릭 시 h2 태그요소 추가" 텍스트에만 이벤트가 걸려 밑에 추가 된 "클릭으로 인해 추가됨"을 클릭해도 요소 추가 안됨

 

'h2'라는 선택자를 전달했을 때 밑에 추가된 "클릭으로 인해 추가됨" 텍스트에도 이벤트가 적용되어

"클릭으로 인해 추가됨" 을 클릭했을 시에도 요소가 추가됨

==> 동적으로 추가된 객체에 이벤트 전달

 

---

 

 

one() method

: 이벤트를 딱 한번만 연결할 때 사용

<h1 id="test2">클릭하세요</h1>

    <script>
        $(function(){
            $("#test2").one('click', function(){
                alert("처음이자 마지막 이벤트 발생");
            });
        });
    </script>

 

 

 

클릭 후 alert 창 웹사이트에서 확인

이 후로 여러번 클릭해도 alert창이 더이상 뜨지 않음