Programming/Web

[Javascript] 커스텀 이벤트 만들기.

Fimtrus 2014. 10. 31. 15:22

jQuery의 경우 trigger를 통해 간단하게  커스텀이벤트를 만들 수 있다.


하지만 실제로는 약간은...복잡한 형태로 되어 있다.


- 샘플코드

var customEvent;

if (document.createEvent) {
	
	customEvent = document.createEvent("HTMLEvents");
	customEvent.initEvent("fimtrus", true, true);
} else {
	customEvent = document.createEventObject();
	customEvent.eventType = "fimtrus";
}

if (document.createEvent) {
	mtk.now.inputObj.dispatchEvent(customEvent);
} else {
	mtk.now.inputObj.fireEvent("on" + event.eventType, event);
}


위의 코드를 보면 createEvent의 존재유무로 분기를 하고 있다.


createEvent가 존재하지 않을 경우 Internet Explorer 기반의 브라우저를 사용하고 있는 것이고,


createEvent가 존재할 경우 웹킷 기반(크롬, 사파리 등.. 오페라나 파폭은 확인못해봤음...)의 브라우저를 사용하고 있다는 것이다.


익스플로러와 다른 브라우저 간의 제공 메소드가 다르기 때문에 


모든(대부분) 브라우저를 지원하기 위해서는 위와 같이 만들어야 한다.



샘플 코드를 보면 fimtrus 라는 이벤트를 만들었고 


두번째 분기문에서 해당 dom 에 이벤트를 보내게 되면 dom에 지정되어 있는 이벤트 리스너가 동작하게 된다.



만약..jQuery를 사용한다면 그냥 간단하게 한줄로...


$(dom).trigger('fimtrus') 


결론은...jQuery를 사용하면 편리하다!ㅎ