[JS] object에 동적 이벤트 할당

아이구 머리야.... 이번에도 IE,  FF와 크롬의 차이 때문에 머리가 어질 어질 하다.

html 코딩으로 onclick = aa();  식의 이벤트 등록이 아니라

동적으로 이벤트를 등록해야 하는 일이 있었다.

보통 대상 object가 동적으로 생성됐을 경우 스타일이다 뭐다 셋팅해주면서

이벤트도 셋팅하게 되는데, 여러가지 방법이 있었지만 IE와 FF계열 양쪽 모두 되는 것을

찾기 힘들었다.

더군다나 내 경우는 <td></td> 사이에 들어갈 텍스트와 그 텍스트를 눌렀을 때 실행 될

함수명이 배열 형식으로 전달 되기 때문에 

arguments[i][0] : 텍스트

arguments[i][1] : 함수명

형식으로 써야만 했다.

그래서 처음에는 

newCell.onclick = function()

{

arguments[i][1];

}

이런식으로 했는데 arguments[i][1];을 그대로 해석해서인지 정상 동작하지 않았다.

지금 생각해보면 eval(arguments[i][1]); 식으로 해보는건 어떨까 하는데 확인은 하지 안했다.

못한게 아니다. 머리가 아파서 하기 싫은거다!!!! (지금은 쉬고 싶다구. ㅠㅠ)

그외 시도해본 케이스들은...

newCell.onclick = arguments[i][1]; // IE : x

newCell.attachEvent("onclick", arguments[i][1]); // IE : x (형식 틀리다함)

newCell.setAttribute('onclick', arguments[i][1]); //FF에선 됨

등등...그 외에 또 몇개가 있었던거 같은데, 그때 그때 써 놓질 않아서 누락된게 몇개 있다.

아무튼 결론은 아래 방법을 찾아서 해결했다.

if (newCell.addEventListener)

{

newCell.addEventListener("click", eval(arguments[i][1]), false);

}

else if ( newCell.attachEvent )

{

newCell.attachEvent("onclick", eval(arguments[i][1]));

}

else

{

newCell["onclick"] = eval(arguments[i][1]); // same as "obj.onType = fn"

}

FF인지 IE인지 그외인지 구분해서 각각에 맞게 등록시켜주는 방법이다.

[참고 사이트들]

http://junho85.tistory.com/tag/addEventListener (댓글에서 결정적 답변 얻음)

http://kr.blog.yahoo.com/hipwg/1148

기타 PHPSCHOOL의 무수히 많은 질문과 답변들.

추가.

addEventListener의 마지막 인자에 대한 자세한 설명 : http://okjungsoo.tistory.com/entry/Event-처리