이벤트
이벤트
- 이벤트는 사용자가 무언가를 클릭했을 때 발생되는 것.
event |
function |
|
click |
=> | onclick |
Event 발생
- 운영체제에 의해서 Message(이벤트 정보)를 웹 브라우저에 보낸다.
- 웹 브라우저를 거치기 전에 메시지 큐라는 곳을 거치고 웹 브라우저에 들어간다.
error
uncaught typeerror cannot set property 'onclick' of null
- d1이라는 태그가 DOM 트리에 생성이 되어야 하는데, 찾아 내질 못해서 에러가 발생한다.
<script>
window.onload = function () {
var d1 = document.getElementById("d1");
d1.onclick = function() {
console.log("d1 눌렀다.");
};
};
</script>
</head>
<body>
<h1 id='d1'>이 문자를 클릭하면 (console.log)가 찍힙니다.</h1>
</body>
</html>
결과화면
- onload() 함수는 DOM 트리가 형성되었을 때 실행된다.
- d1이라는 아이디를 찾아서 함수를 등록한다.
- 함수 호출은 사용자가 해당 엘리먼트를 클릭할 때 발생.
오로지 자기 자신만 호출되려면 다음 코드를 작성한다.
등록된함수.onclick = function(event){
if ( event.target == this){
}
이벤트 호출에는 2가지 타입으로, 캡쳐와 버블이 있다.
캡쳐-단계는 제일 초기에 실행되는 것이다. DOM 트리의 가장 바깥 요소에서부터 시작하여,
이벤트가 일어난 요소에 도착할 때까지 안쪽으로 찾아 들어가고, 다시 바깥으로 나온다.
예를 들어, 웹 페이지에서 무언가를 클릭하면 처음에는 HTML 요소에서 onclick() 이벤트 핸들러를 찾고,
다음에는 body 요소에서 찾고, 다음에는, 다음에는, 하는 식으로 이벤트가 일어난 요소에 도착할 때까지
반복한다.
캡쳐 단계에서 호출되려면 특별한 옵션을 가지고 함수를 등록해야한다.
버블-단계는 이벤트처리하는데 있어서 마지막에 검사하는 것이다.
캡쳐-단계와는 반대로 타겟으로부터 루트를 향한다.
이 요소에 뭔가 이벤트 해늗ㄹ러가 할당되어 있는지- 를 시작해서, 그 부모 요소로, 그 부모 요소로,
하는 식으로 HTML요소까지 거슬러 올라간다.
버블 단계를 없애는 방법
- stopPropagation();
- stopImmediatePropagation();
stopPropagation()
- 해당 이벤트의 전파 자체는 정지하지만 현재의 Node의 리스너는 모두 처리하고 끝낸다.
stopImmediatePropagation()
- 전파도 정지하고 현재의 Node의 다른 리스너도 처리하지 않는다.
보통 stopPropagation()을 표준으로 사용하고 있다.
사용법
if(event.stopPropagation) {
event.stopPropagation();
}
};
html에서 태그 다룰 때 사용법
이름 <input id="name" type='text' name='name'>
id는 자바스크립트 엘리멘트를 다룰 때 사용한다.
name은 파라메터 이름이다. 서버에 보낼 때 이런 이름으로 보낼 때 사용한다.
cross browser
- IE, Safari, Opera, Fire Fox, Chrome......등 여러 브라우저 이동.
window.onload = function () {
var header = document.getElementById('myHeader');
if (header.attachEvent) {
/*
attachEvent가 있느냐 없느냐를 따지고서 실행한다.
attachEvent는 익스플로어에 있는 메서드.
그리고, IE는 onclick / 그 외 브라우저는 click.
*/
// 인터넷 익스플로러의 경우 실행합니다.
var handler = function () {
window.event.srcElement.style.color = 'red';
window.event.srcElement.detachEvent('onclick', handler);
};
header.attachEvent('onclick', handler);
} else {
// 그 이외의 브라우저에서 실행합니다.
var handler = function () {
this.style.color = 'red';
this.removeEventListener('click', handler);
};
header.addEventListener('click', handler);
header.addEventListener('click', handler);
}
};