[ JavaScript ] onclick 이벤트 추가

자바스크립트에서의 여러가지 이벤트 리스너 추가방법을 소개한다.

 

1. 해당 객체에 직접 콜백 함수를 추가

var input = document.createElement("input");

input.onclick = function()
{
	// Click Event 발생 시 동작 함수를 입력한다.
	examFunc(this);
}

클릭 이벤트를 발생할 객체에 직접 이벤트 리스너를 추가하는 방식이다.

Html 코드만으로 이벤트 리스너가 등록되었는지는 확인할 수 없어 코드 분석을 조금 어렵게 할 수 있는 장점이 있다.

[ 2. 해당 객체의 속성에 콜백 함수를 추가 ] 방식과 비교해 보면 좀 더 쉽게 이해할 수 있다.

 

2. 해당 객체의 속성에 콜백 함수를 추가

var input     = document.createElement("input");

var onclick   = document.createAttribute('onclick');

onclick.value = 'examFunc(this)';

input.setAttributeNode(onclick);

[ onclick ] 이라는 속성을 생성, 속성 값에 콜백 함수를 문자열로 입력하여 주는 방식이다.

좀더 직관적이며 단일 객체가 아닌 대량의 객체에 반복 작업 시 코드 라인 수가 줄어든다는 장점이 있다.