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

Posted by Find my true self Fimtrus
2014.10.31 15:22 Programming/Web

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를 사용하면 편리하다!ㅎ




이 댓글을 비밀 댓글로
    • ㅁㅎㅁ
    • 2015.10.07 02:00
    예제가 없어서 불편

[jQuery] html 동적 추가후 jQuery Default UI 적용하기.

Posted by Find my true self Fimtrus
2013.06.04 17:28 Programming/Hybrid App

이것때문에 몇일을 삽질하고....화면 만든 다음에 크롬에서 컨트롤 CV를 얼마나했는데...

아래의 코드로 간단하게 적용할 수 있다....


//이렇게만 하면 jQuery의 Default UI가 적용이 되지 않는다.
$("타겟").append("추가할 html");

//하지만 강제로 pagecreate 트리거를 발생시키면!!
$("타겟").append("추가할 html").trigger("pagecreate");
//Default UI가 짠하고 생성된다.!!


위의 코드는 오직!! data-role 이 page 인 것만 동작한다.

다른 data-role에서도 적용할 수 있는 방법을 찾아...보아야겠다.


..

.

.


잠깐의 고민으로... 위의 문제를 수정한 코드!!

정말 간단하네..참..이걸로 몇일을 고민하다니.

//트리거를 create로 변경해주면 된다.
$("타겟").append("추가할 html").trigger("create");
//
//

실제 적용화면~~!

적용전...

적용후...


이 댓글을 비밀 댓글로