JavaScript_javascript의 이벤트 이해 팁
- WBOY원래의
- 2016-05-16 19:25:541028검색
많은 언어 학습에 있어서 '사건'은 이해하기 어려운 개념이기도 하지만, 매우 중요한 개념이기도 합니다. Ajax 드래그 효과가 발생하는 것은 바로 이벤트 처리 때문입니다. 이 기사를 읽고 나면 얼마나 많은 Ajax 프레임워크가 드래그 효과를 구현하는지 알게 될 것입니다. This 테스트입니다.테스트,테스트
1. IE 이벤트 객체
(1) IE 이벤트 객체의 주요 속성과 메소드
IE에는 이벤트 처리를 담당하는 Event라는 객체가 있습니다. 많은 속성과 메소드를 포함합니다. 이러한 메소드와 속성을 호출하면 많은 이벤트 처리가 완료될 수 있습니다.
유형: HTML 태그 속성에서 "on" 접두사 뒤에 오는 문자열인 이벤트 유형입니다. 예를 들어 "Click"은 클릭 이벤트를 나타냅니다.
srcElement: 이벤트 소스는 이벤트가 발생하는 요소입니다.
버튼: 누른 마우스 버튼을 선언하며 정수입니다. 1은 마우스 왼쪽 버튼, 2는 오른쪽 마우스 버튼, 4는 마우스 가운데 버튼을 나타냅니다. 마우스 버튼을 여러 개 누른 경우 이 값을 합산하므로 3은 왼쪽 버튼과 오른쪽 버튼을 동시에 누른 것을 나타냅니다. .
ClientX/clientY: 이벤트 발생 시 마우스의 가로, 세로 좌표를 의미하며, 해당 값은 포함된 창의 왼쪽 상단을 기준으로 생성됩니다.
OffsetX/offsetY: 소스 요소를 기준으로 한 마우스 포인터의 위치에 따라 클릭되는 이미지 개체의 픽셀이 결정될 수 있습니다.
altKey, ctrlKey, ShiftKey: 이름에서 알 수 있듯이 이 속성은 마우스 이벤트가 발생할 때 Alt, Ctrl 또는 Shift 키를 동시에 눌렀는지 여부를 나타내며 Boolean 값을 반환합니다.
KeyCode: keydown 및 keyup 이벤트가 발생할 때 키 코드와 keypress 이벤트의 유니코드 문자를 반환합니다.
fromElement와 toElement 전자는 mouseover 이벤트로 이동한 문서 요소를 나타내고, 후자는 mouseout 이벤트에서 마우스로 이동한 문서 요소를 나타냅니다.
CancelBubble: 부울 속성이 true로 설정되면 중지 이벤트가 포함된 레벨 요소에 추가로 버블링됩니다.
ReturnValue: false로 설정하면 AttachEvent() 및 detachEvent() 메소드: DOM 객체 이벤트 유형을 지정하기 위한 여러 이벤트 처리 함수를 등록하는 메소드입니다. 여기에는 두 개의 매개변수가 있는데 첫 번째는 이벤트 유형이고 두 번째는 이벤트 처리 함수입니다. AttachEvent() 이벤트가 실행되면 this 키워드는 이벤트가 발생한 요소가 아닌 창 객체를 가리킵니다.
(2) IE 이벤트 객체에 대한 몇 가지 설명
1. IE 이벤트 객체는 전역 속성입니다
IE에서는 이벤트 객체를 이벤트 핸들러에 매개변수로 전달할 수만 있습니다. Window.event 또는 이벤트를 사용하여 Event 개체를 참조합니다. IE에서 Event는 window의 속성이므로 이벤트는 전역 변수입니다. 이 변수는 이벤트의 세부 정보를 제공합니다.
2. IE의 이벤트 버블링: IE의 이벤트는 포함 수준을 따라 조금씩 상위 계층까지 버블링될 수 있습니다. 즉, 하위 계층의 DOM 노드에서 정의한 이벤트 처리 기능이 상위 계층에 도달합니다. 상위 계층의 노드에 있는 이벤트 핸들러 함수가 동일한 이벤트 유형이면 상위 이벤트 핸들러 함수도 실행됩니다. 예를 들어,
2. IE에서 DOM 요소 드래그 예시
/*
이 함수는 mousedown 이벤트 핸들러에 의해 호출됩니다.
후속 mousemove 및 mouseup 이벤트에 대한 임시 캡처 이벤트 핸들러를 등록하고
이러한 이벤트 핸들러를 사용하여 지정된 문서 요소를 드래그합니다. 🎜> 두 번째 매개변수는 mousedown 이벤트의 이벤트 객체여야 합니다.
*/
function startDrag(elementToDrag,event)
{
//요소가 현재 위치한 위치
/ /The 이 요소의 스타일 속성에는 왼쪽 및 위쪽 CSS 속성이 있어야 합니다.
//또한 픽셀 단위라고 가정합니다.
//var x=parseInt(elementToDrag.style.left)
// var y=parseInt(elementToDrag.style.top);
//점과 마우스 클릭 사이의 거리를 계산합니다. 아래의 중첩된 moveHandler 함수에는 다음 값이 필요합니다.
var deltaX=event.clientX -parseInt( elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// mousedown 이벤트 등록 후 발생하는 mousemove 및 mouseup 이벤트 핸들러
// 문서에 대한 캡처 이벤트 핸들러로 등록됩니다.
// 이 이벤트 핸들러는 마우스 버튼을 누르고 있는 동안 활성 상태로 유지됩니다.
// 삭제 시 버튼을 놓을 때
document.attachEvent ("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//이미 이벤트를 처리했습니다. 다른 요소에서 볼 수 없도록 합니다.
이벤트. cancelBubble=true;
event.returnValue=false;
/*
요소를 드래그할 때 mousemove 이벤트를 캡처하는 핸들러입니다.
*/
function moveHandler(e)
{
//요소를 현재 마우스 위치로 이동
e=window.event
elementToDrag.style.left=(event.clientX -deltaX) "px";
elementToDrag.style.top=(event.clientY-deltaY) "px";
//다른 것은 허용하지 마세요. 요소는 이 이벤트를 봅니다.
이벤트 .cancelBubble=true;
}
/*
이 이벤트는 드래그가 종료될 때 발생하는 mouseup 이벤트를 캡처합니다.
*/
function upHandler(e)
{
//이벤트 핸들러 등록 취소
document.detachEvent("onmouseup",upHandler)
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true; 🎜> }
HTML 파일 코드 호출:
드래그하세요
3. DOM의 고급 이벤트 처리
IE 6의 이벤트 처리는 W3C DOM 표준 이벤트 처리 모델이 아니므로 위 코드를 Mozilla Firefox 브라우저에서 실행하면 그 효과가 사라집니다. IE 7은 W3C DOM 보조 표준도 지원하므로 DOM의 고급 이벤트 처리를 익히는 것이 매우 중요합니다. 왜냐하면 W3C DOM 보조 표준은 웹의 미래 개발 방향이고 W3C DOM API가 매우 일반적으로 사용되기 때문입니다. 향후 더욱 복잡한 웹 개발을 위한 좋은 기반을 제공합니다.
(1) 이벤트 핸들러의 범위 및 이벤트 전파
DOM 고급 이벤트 처리를 공식적으로 논의하기 전에 이벤트 핸들러의 범위를 이해해야 합니다. 이벤트 핸들러의 범위는 일반 함수 범위보다 훨씬 더 복잡합니다. 예를 들어 일반 함수에서 변수 a를 찾으려면 JavaScript 인터프리터는 먼저 함수 호출 개체에 변수 a가 있는지 확인합니다. 범위 체인에서 발견됩니다. 다음 개체는 일반적으로 전역 개체에서 검색됩니다. 그러나 이벤트 핸들러는 HTML 속성으로 정의될 때 그렇게 간단하지 않습니다. 특히 이벤트 핸들러의 범위 체인의 헤드는 이벤트 핸들러를 호출하는 객체이고, 다음 객체는 전역 객체가 아니라 이벤트 핸들러를 트리거하는 객체입니다. 이로 인해 문제가 발생합니다. window와 document에는 open() 메서드가 있으며, 이전에 open()을 수정하지 않은 경우 일반적으로 사용되는 open 대신 document.open() 메서드가 호출됩니다. () 메소드이므로 사용시에는 window.open()으로 명확히 지정해 주어야 합니다.
(2) 이벤트 전파 및 등록된 이벤트 핸들러
1. 이벤트 전파
보조 DOM 표준에서는 이벤트 핸들러가 더 복잡합니다. 이벤트가 발생하면 대상 노드의 이벤트 핸들러가 트리거됩니다. 실행할 수 있지만 대상 노드의 상위 노드에도 이 이벤트를 처리할 기회가 있습니다. 이벤트 전파는 세 단계로 나누어집니다. 첫 번째는 캡처 단계입니다. 이벤트는 DOM 트리를 따라 대상 노드로 전파됩니다. 전파 프로세스 중에 이벤트가 전파됩니다. 이 프로그램이 먼저 실행됩니다. 다음 단계는 대상 노드 자체에서 발생하며 대상 노드에 등록된 해당 이벤트 핸들러가 실행됩니다. 마지막 단계는 버블링 단계로 이벤트가 대상 노드에서 상위 노드로 다시 업로드됩니다. 상위 노드에 해당 이벤트 핸들러가 있으면 이를 처리합니다. IE에는 캡처 단계가 없지만 버블링 단계가 있습니다. stopPropagating() 메서드를 사용하면 이벤트 전파를 중지할 수 있습니다. 즉, IE 6에서는 cancelBubble을 true로 설정합니다.
2. 이벤트 핸들러 등록
IE와 마찬가지로 DOM 표준에도 자체 이벤트 핸들러가 있지만 DOM 보조 표준의 이벤트 핸들러는 addEventListner 메소드를 사용하여 등록됩니다. 메서드에는 세 가지 매개 변수가 있습니다. 첫 번째는 이벤트 유형이고, 두 번째는 처리 기능이며, 세 번째는 부울 값입니다. true는 지정된 이벤트 핸들러가 이벤트 전파 단계에서 이벤트를 캡처하는 데 사용됨을 의미합니다. , 이 이벤트 처리를 실행하는 함수는 객체에 이벤트가 발생할 때 트리거되거나, 객체의 바이트 포인트에서 발생하여 객체까지 버블링될 때 이 이벤트 처리를 실행하는 함수가 트리거됩니다. 예: document.addEventListener("mousemove", moveHandler, true);는 mousemove 이벤트가 발생할 때 moveHandler 함수를 호출하고 이벤트를 캡처할 수 있습니다.
addEventListener를 사용하여 하나의 이벤트에 대해 여러 이벤트 핸들러를 등록할 수 있지만 이러한 함수의 실행 순서는 불확실하며 C#처럼 등록 순서대로 실행되지 않습니다.
Mozilla Firefox에서 addEventListener를 사용하여 이벤트 핸들러를 등록할 때 this 키워드는 이벤트 핸들러를 호출하는 문서 요소를 나타냅니다. 그러나 이는 DOM 표준이 아니기 때문에 반드시 그렇지는 않습니다. 이벤트 핸들러를 호출한 문서 요소를 참조하려면 currentTarget 속성을 사용하십시오.
3. 보조 DOM 표준의 이벤트
IE와 달리 W3C DOM의 이벤트 개체는 창 전역 개체 아래의 속성이 아닙니다. 즉, 이벤트는 전역 변수가 아닙니다. 일반적으로 DOM 2차 표준에서는 이벤트가 발생하는 문서 객체의 속성으로 이벤트를 사용합니다. Event에는 UIEvent와 MutationEvent라는 두 개의 하위 인터페이스가 포함되어 있습니다. 이 두 하위 인터페이스는 Event의 모든 메서드와 속성을 구현합니다. MouseEvent 인터페이스는 UIEvent와 Event의 모든 메서드와 속성을 구현합니다. 다음으로 Event, UIEvent, MouseEvent의 주요 속성과 메서드를 살펴보겠습니다.
1.Event
유형: 이벤트 유형, IE와 유사하지만 "on" 접두어가 없으면 예를 들어 클릭 이벤트는 "클릭"입니다.
대상 : 이벤트가 발생하는 노드입니다.
CurrentTarget: 현재 처리 중인 이벤트가 발생한 노드는 Target 속성이 가리키는 노드일 수도 있고, 캡처나 버블링으로 인해 Target이 가리키는 노드의 상위 노드를 가리킬 수도 있습니다.
EventPhase: 이벤트 전파 단계를 지정합니다. 숫자입니다.
timeStamp: 이벤트가 발생한 시간입니다.
버블: 이벤트가 버블링되는지 여부를 나타냅니다.
취소 가능: 이벤트가 PreventDefault() 메서드를 사용하여 기본 작업을 취소할 수 있는지 여부를 나타냅니다.
PreventDefault() 메서드: 이벤트의 기본 동작을 취소합니다.
stopPropagation() 메서드: 이벤트 전파를 중지합니다.
2.UIEvent
View : 이벤트가 발생한 윈도우 객체.
세부정보: 이벤트에 대한 추가 정보를 제공하세요. click 이벤트, mousedown 및 mouseup 이벤트는 모두 클릭 수를 나타냅니다.
3.MouseEvent
Button: mousedown, mouseup, click 이벤트에서 마우스 버튼의 상태를 나타내는 숫자로 IE의 버튼 속성과 유사하지만 숫자 0의 의미는 다릅니다. 왼쪽 버튼, 1은 가운데 버튼, 2는 오른쪽 버튼을 나타냅니다.
altKey, ctrlKey, ShiftKey, MetaKey: IE와 동일하지만 IE에는 마지막 키가 없습니다.
ClientX, clientY: IE와 같은 의미이지만 DOM 표준에서는 이 두 속성 값이 문서의 스크롤 상황을 고려하지 않습니다. 창의 왼쪽 상단에서 이벤트가 발생하는 한 clientX와 clientY는 모두 0이므로 IE에서 문서 시작 부분을 기준으로 이벤트 좌표를 가져오려면 document.body를 추가해야 합니다. .scrollLeft 및 document.body.scrollTop.
ScreenX, screenY: 모니터의 왼쪽 상단을 기준으로 한 마우스 포인터의 위치입니다. 새 창을 열려면 이 두 가지 속성이 매우 중요합니다.
관련 타겟: IE의 fromElement 및 toElement와 유사하지만 마우스오버 및 마우스아웃을 제외하면 다른 이벤트는 의미가 없습니다.
(3) 두 개의 주류 브라우저와 호환되는 DOM 요소 드래그의 예
좋습니다. 방금 IE의 수많은 DOM 프로그래밍과 이벤트에 대해 이야기했는데, IE와 Mozilla Firefox 모두와 호환되는 브라우저를 작성하는 방법은 무엇일까요? 브라우저 드래그 앤 드롭 프로그램은 어떻습니까? 코드는 다음과 같습니다.
function startDrag(elementToDrag,event )
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top)
if (document.addEventListener)
{
document.addEventListener("mousemove",moveHandler,true)
document.addEventListener("mouseup",upHandler,true)
}
else if (document.attachEvent)
{
document.attachEvent("onmousemove",moveHandler)
document.attachEvent("onmouseup",upHandler)
}; if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault()
else event.returnValue=false;
function moveHandler( e)
{
if (!e) e=window.event; //IE 이벤트 객체라면 window.event를 사용하세요.
//그렇지 않으면 전역 속성을 사용하세요. DOM 보조 표준 이벤트 객체를 사용합니다.
elementToDrag.style.left=(event.clientX-deltaX) "px";
elementToDrag.style.top=(event.clientY-deltaY) "px"
if(event. stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else
{
document.detachEvent ("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
}
if(event.stopPropagation) event.stopPropagation()
else event.cancelBubble= 사실
}