on동작이벤트

이벤트를 받는데에는 여러가지가 있다. 

첫번째는 addEventListener를 하는 방법인데 이것은 그후에 removeEventListener을 해줘야 한다.

안그러면 한번 이벤트에 계속 누적되어서 늘어나는 리스너와 그 늘어난 만큼 반복 실행되는 것을 볼 수 있다.

그걸 컨트롤 하면 정말 잘하는 것이겠지만 쉽지않았다.

두번째는 onclick, onkeypress등의 이벤트 함수를 이용하는 것이다.

addEventListener ( '이벤트' , function... ) 을 하면  자동적으로 function 에 e.. 그러니까 이벤트를 넣어준다.

그런데 두번째 방법에서는 onclick = function.... 이렇게 되는데 여기서도 마찬가지로 이벤트를 가져올수 있다.

방법은 간단하다. 그냥 event를 써주면 된다. 즉 onclick = function(event){event .. } 이렇게 써주고 디버그 모드로 보면 죽 들어와 있는 것을 볼수 있다.

=========================================================================================

출처 : http://javascript.info/tutorial/obtaining-event-object

W3C way

Browsers which follow W3C standards always pass the event object as the first argument for the handler.

For instance:

element.onclick = function(event) {

// process data from event

}

It is also possible to use a named function:

show clean source in new windowHide/show line numbersprint highlighted code

1	function doSomething(event) {

2	// we've got the event

3

}

4

5	element.onclick = doSomething

Internet Explorer way

Internet Explorer provides a global object window.event, which references the last event. And before IE9 there are no arguments in the handler.

So, it works like this:

1	// handler without arguments

2	element.onclick = function() {

3	// window.event - is the event object

4

}

Cross-browser solution

A generic way of getting the event object is:

show clean source in new windowHide/show line numbersprint highlighted code

1	element.onclick = function(event) {

2	event = event || window.event

3

4	// Now event is the event object in all browsers.

5

}