관련 판독 값 :
JavaScript 이벤트 학습 요약 (v) JS의 마우스 이벤트 유형
//www.vevb.com/article/86259.htm
JavaScript 이벤트 학습 요약 (i) 이벤트 흐름
//www.vevb.com/article/86261.htm
JavaScript 이벤트 학습 요약 (iv) 이벤트 공개 멤버 (속성 및 방법)
//www.vevb.com/article/86262.htm
JavaScript 이벤트 학습 요약 (ii) JS 이벤트 핸들러
//www.vevb.com/article/86264.htm
JavaScript 이벤트 학습 요약 (iii) JS 이벤트 객체
1. 이벤트
이벤트는 클릭,로드 및 마우스 오버와 같은 사용자 또는 브라우저 자체가 수행하는 특정 작업입니다.
이벤트는 JavaScript와 Dom의 다리입니다.
트리거되면 이벤트를 실행하고 처리 기능을 호출하여 해당 JavaScript 코드를 실행하여 응답을 제공합니다.
일반적인 예는 다음과 같습니다. 페이지가로드 된 후로드 이벤트가 트리거됩니다. 사용자는 요소를 클릭하고 클릭 이벤트를 트리거합니다.
2. 이벤트 흐름
1. 사건의 인플루엔자에 대한 인식
질문 : 페이지 요소를 클릭하면 어떤 종류의 요소가 그러한 이벤트를 감지 할 수 있습니까?
답변 : 요소를 클릭하는 동안 요소의 컨테이너 요소 또는 전체 페이지를 클릭하십시오.
예 : 3 개의 동심원이 있으며 각 원에 해당 이벤트 처리 기능을 추가하면 해당 텍스트가 나타납니다. 가장 안쪽 원을 클릭하고 외부 원을 클릭하면 외부 원의 클릭 이벤트도 트리거됩니다.
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {위치 : 절대; 너비 : 400px; 높이 : 400px; 상단 : 0; 왼쪽 : 0; 하단 : 0; 오른쪽 : 0; 마진 : 자동; 배경색 : DeepPink; } #middle {위치 : 절대; 너비 : 300px; 높이 : 300px; 상단 : 50%; 마진 왼쪽 : -150px; 마진 -탑 : -150px; 배경색 : Deepskyblue; } #inner {위치 : 절대; 너비 : 100px; 높이 : 100px; 상단 : 50%; 왼쪽 : 50%; 마진 왼쪽 : -50px; 마진 -탑 : -50px; 배경색 : Darkgreen; 텍스트 정렬 : 센터; 라인 높이 : 100px; 색상 : 흰색; }#OUTER,#MIDDLE,#Inner {Border-Radius : 100%; } </style> <hod> <div id = "Outer"> <div id = "middle"> <div id = "Inner"> 나를 클릭하십시오! </div> </div> </div> <cript> var innercircle = document.getElementById ( "내부"); InnerCircle.onClick = function () {alert ( "InnerCircle"); }; var middlecircle = document.getElementById ( "Middle"); middlecircle.onclick = function () {alert ( "middlecircle"); } var autercircle = document.getElementById ( "외부"); Outercircle.onclick = function () {alert ( "Outercircle"); } </script> </body> </html>효과는 다음과 같습니다.
2. 이벤트 흐름
이벤트가 발생하면 요소 노드와 루트 노드 사이의 특정 순서로 전파됩니다. 경로를 통과하는 모든 노드는 이벤트를받습니다. 이 전파 프로세스는 DOM 이벤트 스트림입니다.
이벤트 전파 순서는 브라우저의 두 이벤트 스트림 모델의 두 가지 이벤트 스트림 모델에 해당합니다 : 캡처 이벤트 스트림 및 버블 이벤트 스트림.
버블 이벤트 스트림 : 이벤트 전파는 가장 구체적인 이벤트 목표에서 가장 구체적인 이벤트 목표에 이르기까지입니다. 즉, 돔 나무의 잎에서 뿌리까지.
캡처 된 이벤트 스트림 : 이벤트 전파는 가장 구체적인 이벤트 목표에서 가장 구체적인 이벤트 대상에 이르기까지입니다. 즉, 돔 나무의 뿌리에서 나뭇잎까지.
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <lody> <div id = "mydiv"> 클릭! </div> </body> </html>
위의 HTML 코드에서 페이지에서 <div> 요소를 클릭하십시오.
버블 링 이벤트 스트림에서 이벤트 전파 순서를 클릭하면 <div> - <html> -》 문서
캡처 된 이벤트 스트림에서 이벤트 전파 순서를 클릭하십시오. 문서 - <html> -》 <body> -》 <div>
메모:
1) 모든 최신 브라우저는 이벤트 버블을 지원하지만 특정 구현에는 약간의 차이가 있습니다.
IE5.5 이하에서 이벤트 버블은 <html> 요소를 건너 뜁니다 (바로 바로 바로 바로 점프).
IE9, Firefox, Chrome 및 Safari Bubble은 창 객체까지 이벤트합니다.
2) IE9, Firefox, Chrome, Opera 및 Safari는 모두 이벤트 캡처를 지원합니다. DOM 표준은 이벤트가 문서 개체에서 전파되어야하지만 이러한 브라우저는 창 객체에서 이벤트를 캡처하기 시작합니다.
3) 오래된 브라우저는이를 지원하지 않기 때문에 이벤트 캡처를 사용하는 사람은 거의 없습니다. 이벤트 버블을 사용하는 것이 좋습니다.
DOM 이벤트 스트림
DOM 표준은 캡처 + 버블 링을 사용합니다. 두 이벤트 스트림 모두 문서 개체부터 시작하여 문서 개체로 끝나는 DOM의 모든 객체를 트리거합니다.
DOM 표준은 이벤트 흐름에 세 단계의 이벤트 캡처 스테이지, 대상 단계 및 이벤트 버블 스테이지가 포함되어 있음을 규정합니다.
이벤트 캡처 단계 : 실제 대상 (<div>)은 캡처 단계에서 이벤트를받지 않습니다. 즉, 캡처 스테이지에서 이벤트는 문서에서 <html>으로 <body>로 멈 춥니 다. 위 그림에서는 1 ~ 3입니다.
대상 단계에서 : 이벤트는 <div>에서 발생하며 처리됩니다. 그러나 이벤트 처리는 버블 링 단계의 일부로 간주 될 것입니다.
버블 단계 : 이벤트는 문서로 전파됩니다.
메모:
1) : DOM 표준은 이벤트 캡처 위상 캡처가 이벤트 대상과 관련이 있다고 규정하지만 이벤트 객체의 이벤트는 IE9, Safari, Chrome, Firefox, Opera9.5 및 이후 버전에서 설정됩니다. 캡처 단계에서 이벤트 개체에서 이벤트가 시작됩니다. 결과적으로 대상 객체에서 이벤트를 운영 할 수있는 두 가지 기회가 있습니다.
2) : 모든 이벤트가 버블 스테이지를 통과하는 것은 아닙니다. 모든 이벤트는 캡처 단계를 거치고 대상 단계에 있지만 일부 이벤트는 버블 스테이지를 건너 뜁니다. 예를 들어 입력 초점을 얻는 초점 이벤트와 입력 초점을 잃는 블러 이벤트가 발생합니다.
대상 객체에서 이벤트를 작동 할 수있는 두 가지 기회의 예 :
<! docType html> <html> <Head Lang = "en"> <meta charset = "utf-8"> <title> </title> </head> <style> #outer {위치 : 절대; 너비 : 400px; 높이 : 400px; 상단 : 0; 왼쪽 : 0; 하단 : 0; 오른쪽 : 0; 마진 : 자동; 배경색 : DeepPink; } #middle {위치 : 절대; 너비 : 300px; 높이 : 300px; 상단 : 50%; 마진 왼쪽 : -150px; 마진 -탑 : -150px; 배경색 : Deepskyblue; } #inner {위치 : 절대; 너비 : 100px; 높이 : 100px; 상단 : 50%; 왼쪽 : 50%; 마진 왼쪽 : -50px; 마진 -탑 : -50px; 배경색 : Darkgreen; 텍스트 정렬 : 센터; 라인 높이 : 100px; 색상 : 흰색; }#OUTER,#MIDDLE,#Inner {Border-Radius : 100%; } </style> <hod> <div id = "Outer"> <div id = "middle"> <div id = "Inner"> 나를 클릭하십시오! </div> </div> </div> <cript> var innercircle = document.getElementById ( "내부"); InnerCircle.AddeventListener ( "Click", function () {alert ( "캡처 스테이지에서 내부 회로의 클릭 이벤트가 시작됩니다");}, true); InnerCircle.AdDeventListener ( "Click", function () {alert ( "InnerCircle의 클릭 이벤트가 버블 스테이지에서 시작됩니다");}, false); var middlecircle = document.getElementById ( "Middle"); middlecircle.addeventListener ( "click", function () {alert ( "Middlecircle의 클릭 이벤트가 캡처 스테이지에서 시작됩니다");}, true); middlecircle.addeventListener ( "click", function () {alert ( "Middlecircle의 클릭 이벤트가 기포 단계에서 시작됩니다");}, false); var autercircle = document.getElementById ( "외부"); autercircle.addeventListener ( "click", function () {alert ( "Outercircle의 클릭 이벤트가 캡처 스테이지에서 시작됩니다");}, true); autercircle.addeventListener ( "click", function () {alert ( "Outercircle의 클릭 이벤트가 버블 스테이지에서 시작되었습니다";}, false); </script> </body> </html>작동 효과는 6 개의 상자가 차례로 나타납니다. 원리를 설명하기 위해 사진에 통합했습니다.
3. 이벤트 흐름의 전형적인 적용 - 이벤트 프록시
전통적인 이벤트 처리에서는 각 요소에 이벤트 핸들러를 추가해야합니다. JS Event Proxy는 간단하고 효과적인 기술로 이벤트 프로세서를 상위 요소에 추가하여 이벤트 프로세서를 여러 자식 요소에 추가하지 않습니다.
이벤트 프록시 원칙은 이벤트 버블과 대상 요소를 사용하고, 이벤트 프로세서를 부모 요소에 추가하고, 하위 요소가 기포 이벤트까지 대기 할 때까지 대기 할 때, 부모 요소는 대상을 통해 어떤 하위 요소가 있는지 (즉, srcelement)를 결정할 수 있습니다. 따라서 해당 처리를 수행 할 수 있습니다. Target에 대한 자세한 내용은 이벤트 (IV)의 공개 회원 (속성 및 방법)에 대한 다음 예제를 참조하십시오.
기존 이벤트 처리, 각 요소에 이벤트 핸들러 추가 코드는 다음과 같습니다.
<body> <ul id = "color-list"> <li> 빨간색 </li> <li> Orange </li> <li> 옐로우 </li> <li> 녹색 </li> <li> blue </li> <li> indigo </li> <li> 보라색 </li> </ul> <cript> (function () {var colorlist = document.getelementbyid ( "컬러-문서"); colorlist.getElementsByTagName (var i = 0; i ++) {AddeventListener ( 'click', showcolor, false); Alert (TargetElement.innerHtml);) (); </script> </body>이벤트 에이전트의 처리 방법은 다음과 같습니다.
<body> <ul id = "Color-list"> <li> Red </li> <li> Orange </li> <li> 옐로우 </li> <li> 녹색 </li> <li> blue </li> <li> Indigo </li> <li> 보라색 </li> </ul> <clatr (function () {var colorlist = document.getelementbyid ( "컬러-문서); Colorlist.AddeventListener (ShowColor, False) {e = e || window.event; e.srcelement; }}) (); </script> </body>이벤트 프록시의 이점을 요약하려면 :
에이. 이벤트 프로세서가 메모리에 있어야하므로 성능을 향상시켜야하므로 여러 이벤트 프로세서를 하나로 줄입니다. 각 셀의 전통적인 바인딩 이벤트 핸들러를 이벤트 프록시 (즉, 이벤트 핸들러 추가)와 비교하여 100 열 테이블이 있다고 상상해보십시오. 이벤트 프록시가 잠재적 위험을 피하고 성능을 향상 시킨다는 결론은 어렵지 않습니다.
비. 이벤트 프록시는 다른 하위 요소에 대해 다른 처리 방법을 채택 할 수 있기 때문에 DOM 업데이트는 이벤트 프로세서를 다시 반입 할 필요가 없습니다. 다른 하위 요소 (A, SPAN, DIV 등)가 추가되면 이벤트 에이전트의 이벤트 처리기 기능을 직접 수정할 수 있습니다. 프로세서를 리딩 할 필요가 없으며 다시 반복 할 필요가 없습니다.
위는 JavaScript 이벤트 학습 요약 (i) 편집자가 소개 한 이벤트 스트리밍에 대한 관련 지식입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!