제이쿼리 .on() 메소드

제이쿼리 .on() 메소드

제이쿼리는 특정 요소에 이벤트를 연결(event binding)하기 위해 .on() 메소드를 사용한다.

제이쿼리 1.7부터 소개된 .on() 메소드는 다음과 같은 특징을 가진다.

1. 선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있다.

2. 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.

3. 선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있다.

4. 사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있다.

5. 차후에 다루게 될 요소를 이벤트에 연결할 수 있다.

.on() 메소드를 사용하면 하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있다.

$(function() {
​
    // 모든 <button>요소에 mouseenter와 mouseleave 이벤트를 설정함.
​
    $("button").on("mouseenter mouseleave", function() {
​
        $("#text").append("마우스가 버튼 위로 진입하거나 빠져나갔어요!<br>");
​
    });
​
});

$(function() {
​
    $("button").on({             // 모든 <button>요소에
​
        mouseenter: function() { // mouseenter 이벤트를 설정함.
​
            $("#text").append("마우스가 버튼 위로 진입했어요!<br>");
​
        },
​
        click: function() {      // click 이벤트를 설정함.
​
            $("#text").append("마우스가 버튼을 클릭했어요!<br>");
​
        },
​
        mouseleave: function() { // mouseleave 이벤트를 설정함.
​
            $("#text").append("마우스가 버튼 위에서 빠져나갔어요!<br>");
​
        }
​
    });
​
});

Reference

http://tcpschool.com/