Mozilla 한국 커뮤니티

왜 도대체 img 태그에서 x()라는 펑션을 실행시킬수 없게 하는 것인가?

아래 소스를 보면 div태그는 x()가 불려지지만 img태그는 x()가 불려지지 않는다.

익스에서는 둘다 되지만 넷스와 모질라에서는 안된다.

<script>
function x(){
alert(1);
}
</script>

<div onclick="x()">눌러봐</div>
<img src="암거나" onclick="x()">

난 이 이유를 찾기 위해서 몇시간동안 각종 사이트를 다 뒤지며 조사했지만
밝혀낼 수 없었다. 그래서 나는 img태그에 onclick이벤트가 안먹는줄 알았다.
하지만 원인은 너무나 허무했다.

함수명x()는 안먹지만 xx(), xa(), 기타 아무거나 로 바꿀경우 아주 잘된다.
처음부터 div태그도 x()가 안되게 하던지 왜 다른 태그들에서는 x()가 되는데
img태그만 x()가 안되게 만든것인가?
이유가 있는가? 이유를 밝혀라. 내 몇시간동안의 삽질을 보상하라. ㅠ0ㅠ

scope 충돌 문제로 보이네요. DOM inspector로 IMG 노드의 Javascript Object 항목을 보면, IMG 노드에는 DOM에 의해 정의된 x라는 속성이 있는데, 예에 쓰신 onclick 핸들러에서 전역에 걸쳐 정의된 x() 함수를 부르지 않고 IMG 자체의 x 속성을 참조하는 듯합니다.

이와 같이 중복된 이름의 경우 가장 가까운 노드부터 찾기 시작할 터이니, onclick 핸들러의 경우에는 this인 IMG 노드 자체부터 찾기 시작하겠죠.

충돌을 없애려면 window.x()를 호출하시면 될 듯합니다.

감사합니다.