자바스크립트 학습노트(15)_기초지식

이벤트
이벤트는 DOM(Document Object Model)의 일부입니다. 이벤트 흐름은 이벤트가 발생하는 순서입니다. 이는 IE와 다른 브라우저 간의 이벤트 지원의 주요 차이점입니다.
1. 이벤트 흐름
1. 버블링 이벤트
IE의 솔루션은 버블링 이벤트의 기본 아이디어입니다. 문서 개체)는 순차적으로 트리거됩니다.
프로세스: DOM 계층 구조를 따라 계속해서 거품처럼 상위권으로 올라갑니다. (내부 div에서 이벤트를 트리거한 다음 본문, html, 마지막으로 문서 상단으로 이벤트를 트리거합니다.)
2. 이벤트 캡처
버블링의 정반대라고 할 수 있습니다. 가장 정확하지 않은 개체부터 가장 정확한 개체까지 이벤트가 발생합니다.
3. DOM 이벤트 흐름
DOM은 위의 두 가지 이벤트 모델을 동시에 지원합니다. 캡처 이벤트는 먼저 문서 개체에서 시작하여 마지막으로 문서 개체에서 끝납니다.
2. 이벤트 수신 기능
1. IE
각 함수와 창 객체에는 두 가지 메서드가 있습니다.
attachEvent() 메서드: 이벤트 처리 함수 연결
[Object] .attachEvent("이벤트 이름", 핸들러 함수 fnHandler)
이 메소드에는 두 개의 매개변수가 있습니다.
var fnClick = function() {
alert("ID가 div1인 DIV를 클릭했습니다.")
}
var oDiv = document.getElementById("div1")
oDiv .attachEvent("onclick", fnClick)
여러 핸들러 함수를 연결할 수 있습니다.
detachEvent() 메소드: 이벤트 핸들러 함수 분리 및 제거
2. DOM
addEventListener() 메소드: 추가 이벤트 핸들러 함수 할당
[Object].addEventListener("이벤트 이름", 핸들러 함수) fnHandler , Boolean)
이 메소드에는 3개의 매개변수("이벤트 이름", "할당된 함수", 처리 기능이 버블링 단계인지 캡처 단계인지 여부)가 있습니다.
이벤트 처리 기능이 캡처 단계, 세 번째 첫 번째 매개변수는 true이고, 버블링 단계에서 사용될 때는 false입니다.
var fnClick = function() {
alert("Clicked!")
}
var oDiv = document.getElementById("div ");
oDiv.addEventListener("click", fnClick, false)
oDiv.removeEventListener("click", fnClick, false)
다중 핸들러 기능.
removeEventListener() 메소드: 이벤트 처리 기능 제거
3. 이벤트 객체
에는 세 가지 정보 측면이 포함됩니다.
1. IE에서, window .event는 DOM에서 처리하는 함수의 유일한 매개변수입니다.
2. 이벤트 발생 시 마우스 정보
3.
IE 이벤트 객체
IE에서 이벤트 객체는 윈도우 객체의 속성 이벤트입니다. 즉, 이벤트 핸들러 함수는 다음과 같이 이벤트 객체에 액세스해야 합니다.
oDiv.onclick = function() { var oEvent = window.event }oDiv.onclick = function(){ var oEvent = window.event; ;}
window 객체의 속성이지만 이벤트 객체는 이벤트가 발생할 때만 접근할 수 있습니다. 모든 이벤트 처리 함수는 실행 후 소멸됩니다.
DOM 표준 이벤트 객체
이벤트 객체는 이벤트 처리 함수에 유일한 매개변수로 전달되어야 합니다. 따라서 DOM 호환 브라우저(예: Mozilla, Safari 및 Opera)에서 이벤트 개체에 액세스하려면 다음을 수행하세요.
oDiv.onclick = function() {
var oEvent = 인수[0]; }
//이렇게 할 수도 있습니다
oDiv.onclick = function(oEvent) {
//.....
}