JavaScript 고급 프로그래밍 읽기 노트(Seventeen) js events_javascript 기술

1. 이벤트 흐름

IE에는 버블링 이벤트, 즉 가장 구체적인 이벤트 대상부터 가장 덜 구체적인 이벤트 대상까지 존재합니다.
Netscape Navigator는 IE에서 사용되는 버블링 이벤트와 반대되는 캡처 이벤트를 사용합니다.
DOM 이벤트 흐름은 두 가지 이벤트 모델을 모두 지원하지만 캡처 이벤트가 먼저 발생합니다.

2. 이벤트 처리 기능/청취 기능

이벤트는 사용자 또는 브라우저 자체에 의해 수행되는 특정 동작입니다. 이러한 이벤트에는 클릭, 로드, 마우스오버 등과 같은 고유한 이름이 있습니다.
이벤트 핸들러를 할당하는 방법에는 JavaScript와 HTML의 두 가지가 있습니다.
JavaScript에서 이벤트 핸들러 함수를 할당하는 경우 먼저 처리할 객체에 대한 참조를 얻은 후 다음과 같이 해당 이벤트 핸들러 함수 속성에 함수를 할당해야 합니다(이벤트 핸들러 함수 이름은 소문자여야 함). ):

코드 복사 코드는 다음과 같습니다.

var oDiv=document.getElementById( "div1");
oDiv .onclick=function(){
alert("클릭했습니다")
}

　HTML에 이벤트 처리 기능이 할당된 경우 그런 다음 HTML 태그 함수의 특성에 이벤트 처리를 추가하고 다음과 같이 적절한 스크립트를 특성 값으로 포함합니다.

코드 복사 코드는 다음과 같습니다.

　

사용 가능한 각 이벤트 함수에 여러 이벤트 핸들러를 할당하기 위해 IE와 DOM은 각각 고유한 메서드를 제공합니다.
IE의 모든 요소와 창 객체에는 두 가지 메소드가 있습니다. 이름에서 알 수 있듯이 전자는 이벤트 처리 함수를 이벤트에 연결하는 데 사용되고 후자는 이벤트를 분리하는 데 사용됩니다. 처리 기능. 각 메서드는 할당할 이벤트 핸들러의 이름과 함수라는 두 가지 매개 변수를 사용합니다. 예:

코드 복사 코드는 다음과 같습니다.

var fnClick=function() {
경고("클릭됨")
}
var fnClick2=function(){
alert("Click2")
}
var oDiv=document.getElementById(" div");
oDiv.attachEvent("onclick",fnClick);
oDiv.attachEvent("onclick",fnClick2)
oDiv.detachEvent("onclick",fnClick);
oDiv. detachEvent("onclick ",fnClick2);

DOM은 addEventListener() 및 RemoveEventListener()를 사용하여 이벤트 처리 기능을 할당하고 제거합니다. IE와의 차이점은 이러한 방법에는 세 개의 매개변수가 있고 세 번째 매개변수는 버블링 단계 또는 캡처 단계에 사용되는지 여부를 식별한다는 것입니다. 캡처 단계에서는 true이고 버블링 단계에서는 false입니다. 제거할 때 세 번째 매개변수는 추가할 때와 동일하게 유지되어야 합니다. 예:

코드 복사 코드는 다음과 같습니다.

var fnClick=function() {
경고("클릭됨")
}
var fnClick2=function(){
alert("Click2")
}
var oDiv=document.getElementById(" div");
oDiv.addEventListener("onclick",fnClick,false);
oDiv.addEventListener("onclick",fnClick2,false)
oDiv.removeEventListener("onclick",fnClick,false) ;
oDiv.removeEventListener("onclick",fnClick2,false);

3. 일반적으로 포함되는 정보 이벤트 객체는 다음과 같습니다. 이벤트의 객체, 이벤트 발생 시 마우스 정보, 이벤트 발생 시 키보드 정보입니다. 포지셔닝
IE의 이벤트 객체는 윈도우 객체의 속성 이벤트입니다. 이벤트 핸들러 함수는 다음과 같이 이벤트 객체에 액세스해야 합니다.

코드 복사 코드는 다음과 같습니다. oDiv.onclick = function(){

var oEvent=window.event;

}


DOM 표준에서는 이벤트 객체를 이벤트 처리 함수에 전달해야 한다고 규정합니다. 유일한 매개변수로. 따라서 DOM 호환 브라우저(예: Mozilla, Safair, Opera)에서 이벤트 개체에 액세스하는 방법은 다음과 같습니다.

코드 복사 코드 다음과 같습니다: oDiv.onclick=function(){

var oEvent=arguments[0]

}
//또는
oDiv.onclick=function (o이벤트) {
}


속성 메서드 유사성

1. 이벤트 유형 가져오기: oEvent.type
2. 키 코드 가져오기: oEvent.keyCode
3. Shift, Alt, Ctrl 키 감지: oEvent. ShiftKey ;oEvent.altKey;oEvent.ctrlKey;
　4. 클라이언트 마우스 좌표 가져오기: oEvent.clientX;oEvent.clientY
　5. 화면 좌표 가져오기: oEvent.screenX;oEvent.screenY;
속성 메서드의 차이점

1. 대상 가져오기: IE는 srcElement를 사용하고, DOM은 target을 사용합니다.
2. 주요 문자 코드 가져오기: IE는 keyCode를 사용하고, DOM은 charCode 및 String.fromCharCode를 사용합니다.
3. 이벤트를 방지하기 위한 기본 동작: IE는 oEvent.returnValue=false를 사용하고, DOM은 PreventDefault() 메서드를 사용합니다.
4. 이벤트 버블링 중지: IE에서는 oEvent.cancelBubble=true를 사용합니다. stopPropagation() in DOM ;


4. 이벤트 유형
1. 마우스 이벤트
마우스 이벤트에는 click, dblclick, mousedown, mouseout, mouseover, mouseup이 포함됩니다. , 그리고 마우스 이동.
이벤트 순서: dblclick 이벤트는 mousedown, mouseup, click, mousedown, mouseup, click, dblclick 이벤트를 트리거합니다.
2. 키보드 이벤트
키보드 이벤트에는 keydown, keypress, keyup이 포함됩니다.
이벤트 순서: 사용자가 문자 키를 한 번 누르면 keydown, keypress 및 keyup 이벤트가 연속적으로 트리거됩니다. 문자가 아닌 키를 한 번 누르면 keydown 및 keyup 이벤트가 연속적으로 트리거됩니다.
　3. HTML 이벤트
　HTML 이벤트에는 로드, 언로드, 중단, 오류, 선택, 변경, 제출, 재설정, 크기 조정, 스크롤, 포커스, 흐림이 포함됩니다.
4. 변경 이벤트
변경 이벤트는 이미 DOM 표준의 일부이지만 아직 이를 구현한 주류 브라우저는 없습니다. 따라서 여기에만 나열되어 있습니다.
변경 이벤트에는 DOMSubtreeModified, DOMNodeInserted, DOMNodeRemoved, DOMNodeRemovedFromDocument, DOMNodeInsteredIntoDocument가 포함됩니다.

저자: Artwl
출처: http://artwl.cnblogs.com