○ JavaScript DOM Event - 변화하는 이벤트

DOM 이벤트 적용방법

 

1. 평범한 이벤트

일반적으로 특정한 DOM 객체에 클릭 이벤트를 적용하는 방법은 아래와 같습니다.

// DOM 객체
var DOM = document.getElementById('sample');

// DOM 클릭 이벤트
DOM.addEventListener('click', function(){
    test();
})

 

 

2. 변화하는 이벤트

자바스크립트의 이벤트 함수 안에서 외부의 함수를 호출하는 경우, 이벤트함수는 외부의 함수를 참조하여 호출 시 외부 함수의 내용을 실행하게 됩니다. 따라서 외부의 함수를 변경한 후 클릭 이벤트가 호출되면 외부 함수의 내용에 따라서 다른 이벤트가 발생하게 됩니다.

 

// 외부 함수
var test = function(){
    alert('Click!!');
}

// DOM 객체
var DOM = document.getElementById('sample');

// DOM 클릭 이벤트
DOM.addEventListener('click', function(){
    test();
})

 

이 시점에서 <div id="sample"></div> 요소를 클릭하면 Click!! 이라는 메시지 팝업이 뜹니다.

이어서 외부 함수의 내용을 변경합니다.

 

// 외부 함수
var test = function(){
    alert('Click!!');
}

// DOM 객체
var DOM = document.getElementById('sample');

// DOM 클릭 이벤트
DOM.addEventListener('click', function(){
    test();
})

test = function(){
	alert('Wow!!');
}

 

변경 이후에 <div id="sample"></div> 요소를 클릭하면 Wow!! 라는 메시지 팝업이 뜹니다.

위와같은 방법을 이용하면, 이벤트를 추가로 설정하거나 이벤트를 없애지 않고도 이벤트 안의 로직을 변경하실 수 있습니다.