[JavaScirpt]이벤트 등록

1. inline방식

태그에 이벤트를 설치하는 방식

예시

onclick="alert('Hello world')

그런데 아래 4번째 라인을 살펴보자

this.value를 호출하라고 되어있는데

여기서 this란 함수가 속해있는 객체를 의미한다.

고로 4번째 라인은 alert함수가 속해있는 <input>태그 엘리먼트, 객체의 value값을 출력하게 되어진다.

2.프로퍼티 리스너

해석

t라는 변수에 target이라는 id를 가진 태그를 리턴하고

그 t라는 객체에 onclick이라는 약속된 자바스크립트 객체 속성에 함수를 지정해서 그 함수를 실행시킨다.

다음 빨간 박스가 이벤트핸들러이다.

그리고 이 이벤트핸들러는 첫번째 파라미터로 이벤트 객체라는 것을 전달 받기로 약속되어 있음.

이 이벤트 객체는 프로퍼티로 타겟이라는것을 가지고 있는데 이는 이 이벤트가 일어날 대상에 대한 정보들을 리턴한다.

*자 더 자세히 볼 필요가 있다

여기서 event라는 객체는 변수이고 딱히 지정된건 아님 그런데 이 친구가 하는 역할은 정해져 있음.

온 클릭을 위한 함수라고 하지만 원래 함수라는 것은 우리의 호출에 의해서 실행되는 거임

근데 함수가 저절로 실행된다?

사실 아님

event라는 객체가 그 역할을 함

event를 리턴해 보면 [object MouseEvent] 라는 값이 리턴됨

객체를 마우스를 클릭하는 행위가 이벤트라는 소리!!!

타겟은 정해진 프로퍼티임

그리고 타겟은 이벤트의 목표물임

그러니까 마우스를 클릭한게 뭐냐? 라는 거고 위의 코드를 실행하면 HTMLPARAGRAHPELEMNT가 리턴되어짐

이것을 통해 value값이든 innerHTML이든 할 수 있는 거임

#꿀팁 : console.dir(event)를 하게 되면 event객체의 여러가지 프로퍼티들을 볼 수 있음

위 코드를 들고 온 이유는 두 가지인데

1. event객체는 ie8이하에선 작동하지 않는다.(크로스 브라우징 이슈) 고로 대신 전역 객체인window.event를 사용해야함 

2.target역시 srcElement를 사용해야하함.

그 문제를 해결하기 위해서

var event = event || window.event;

라는 코드가 있음

이는 event라는 변수가 있다면 변수 이벤트가 이벤트고 없다면 변수 이벤트는 윈도우.이벤트

라는 소리임