programmer: javascript event wrapper

아래 예제는 jquery 같은 라이블러리에서 어떻게 이벤트를 wrapping 하는지에 대한
가장 기초적인 예제이다.

순수 자바 스크립트를 사용할 경우에 이벤트에 연관된 인스턴스를 event.srcElement 에서
끄내서 써야 된다.

var test1 = document.getElementById('test1');
test1.onclick = function(event) {
      console.log(arguments);
      console.log(event.srcElement);
};

위와같은 경우 불편하다!
그럼 jquery 와 같이 제공해줄려면 어떻게 해야될까?
뤱퍼를 만들어서 해당 인스턴스를 만들고 해당 이벤트 호출시
이벤트 객체와 this 를 같이 넘겨주면 된다.

그럼 어떻게 구현해야 될까?
답은 클로저이다 클로저의 경우 정의 시점에 넘어간 파라미터를 scope chain 을 통해
참조 할수 있음으로 정의 시점과 실행 시점을 분리할수 있다
또한 내가 원하는 argement 를 실행 시점에 넘겨 줌으로 jquery 와 같은 뤱핑을 할수 있다.

var test3 = new DhtmlObject('test3');
위와 같이 DhtmlObject을 생성할 경우 해당 element 를 가져와서 이미정의된 브라우저
(여기서는) 클릭 펑션에 associateObjWithEvent 를 실행해서 할당한다.
associateObjWithEvent 의 경우 최초 아규먼트를 받아 자신의 activation obj에 할당하고
inner function 을 리턴한다.(이벤트 처리 펑션) inner function 의 scope chain 에는 outer
function 의 scope 가 들어가 있기 때문에 outerfunction 이 리턴된 후 에도 outer function 의 아규먼트에 접근 가능 하며 실제 실행될때는 리턴된 inner function 이 실행된다.

http://jibbering.com/faq/notes/closures/#clSto
상세 설명은 위의 글을 참고 바란다.

<html>
<head lang="en">

<title></title>
<script>

function associateObjWithEvent(obj, methodName){
return (function(e){
e = e|| window.event;

return obj[methodName](e, this);
});
}

function DhtmlObject(elementId){
var el = document.getElementById(elementId);
if(el){
el.onclick = associateObjWithEvent(this,'doOnClick');
el.onmouseover = associateObjWithEvent(this, "doMouseOver");
el.onmouseout = associateObjWithEvent(this, "doMouseOut");
}
}

DhtmlObject.prototype.doOnClick = function(event, element){
alert(event);
}
</script>

</head>
<body>
<button id="test1">testButton1</button>
<button id="test2">testButton2</button>
<button id="test3">testButton3</button>
<button id="test4">testButton4</button>

<script>
var test1 = document.getElementById('test1');
test1.onclick = function(event) {
console.log(arguments);
console.log(event.srcElement);
};

var test2 = document.getElementById('test2');
test2.onclick = function(event) {
console.log(arguments);
console.log(event.srcElement);
};

var test3 = new DhtmlObject('test3');
test3.doOnClick = function(event, element){
console.log(arguments);
console.log(element);
}

var test4 = new DhtmlObject('test4');
test4.doOnClick = function(event, element){
console.log(arguments);
console.log(element);
}

</script>
</body>
</html>

2014년 9월 16일 화요일

javascript event wrapper