event.target 와 event.srcElement의 차이.

jquery를 이용해서 함수를 작성하거나 일련의 이벤트를 작동시킬때는 id 혹은 class를 주로 이용한다.

 

$('#아이디').slideUp();

$('.클래스').slideUp();

 

근데 미리 지정되어 있지 않은 유동적인 객체에 이벤트를 바인딩하려면 this 라는 키워드를 쓴다.

 

function test( eventObject ){

-> 함수 내용 기재

}

 

onclick="test(this);"

 

여기서 윈도우의 이벤트 객체를 활용하면 이벤트가 일어난 개체를 활용해서 this를 삭제 할 수 있다.

 

function test(){

var eventObject = (event.target)?event.target:event.srcElement;

 

}

 

이렇게되면 eventObject가 이벤트가 일어난 개체 자기 자신이 된다.

삼단 문항을 쓴이유는 event.target라는 객체가 존재하면 target라는 객체를 쓰는것이고

ie 8버전 이하는 srcElement를 반환 하기때문에 크로스 브라우징을 위해선 저런식으로 둘다 조건에 주어야 나중에 오류 없이 객체를 쓸 수 있다.

 

이렇게되면 저 함 수를 가져다 쓰는 부분은

onclick="test()";

 

함수명만 기재해주면 된다.

 

난 html이 깔끔한게 좋아서 this라는 객체를 잘안쓰고 레디부분에는 함수를 바인딩해주고 그외 영역에 함수를 넣어서 html과 js는 분리시킨다.

 

$(document).ready(function(){

    $('#test').click(function(){

        action();
    });

});

 

function action(){

    alert('test');
}

 

<input type='button' id='test' />

 

이런식....