관련 판독 값 :
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. 이벤트 개체의 공개 멤버
1. Dom의 이벤트 공개 멤버
이벤트 객체에는 생성 된 특정 이벤트와 관련된 속성 및 메소드가 포함되어 있습니다. 트리거 된 이벤트 유형은 다르며 사용 가능한 속성과 방법은 다릅니다. 그러나 DOM의 모든 이벤트에는 다음과 같은 공개 회원이 있습니다.
에이. CurrentTarget 및 Target의 비교
이벤트 핸들러 내부에서 객체는 항상 현재 타격의 값과 같으며 대상에는 이벤트의 실제 목표 만 포함됩니다.
예를 들어, 페이지에 버튼이 있고 본문에 클릭 이벤트를 등록하십시오 (버튼의 부모 노드). 버튼이 클릭되면 클릭 이벤트가 처리를 위해 신체에 거품이됩니다.
<body> <input id = "btn"type = "button"value = "클릭"/> <cript> document.body.onclick = function (event) {console.log ( "신체에 등록 된 클릭 이벤트"); console.log ( "this === event.currentTarget?"+(this === event.currentTarget); // true console.log ( "currentTarget === document.body?"+(event.currentTarget === document.body)); // true console.log ( 'event.target === document.getElementById ( "btn")?'+(event.Target === document.getElementById ( "btn"))); // true} </script> </body>실행 결과는 다음과 같습니다.
비. 유형 속성을 통해 여러 이벤트를 함수에서 처리 할 수 있습니다.
원칙 : 이벤트를 감지하여 다른 이벤트가 다르게 처리됩니다. 타입 속성.
예를 들어 : 핸들러 기능을 정의하여 클릭, 마우스 오버, 마우스 아웃의 3 가지 유형의 이벤트를 처리합니다.
<body> <input id = "btn"type = "button"value = "클릭"/> <cript> var handler = function (event) {switch (event.type) {case "click": alert ( "clicked"); 부서지다; "마우스 오버": event.target.style.backgroundcolor = "핑크"; 부서지다; "마우스 아웃": event.target.style.backgroundcolor = ""; }}; var btn = document.getElementById ( "btn"); btn.onclick = 핸들러; btn.onmouseover = 핸들러; btn.onmouseout = handler; </script> </body>효과 실행 : 버튼을 클릭하면 상자가 나타납니다. 마우스가 버튼을 통과하면 버튼의 배경색이 분홍색이됩니다. 마우스가 버튼을 떠나면 배경색이 기본값으로 돌아갑니다.
기음. stoppropagation () 및 stopimmediatepropagation ()의 비교
동일 : stoppropagation () 및 stopimmediatepropagation ()을 사용하여 추가 캡처 또는 버블 링을 취소 할 수 있습니다.
다르게 : 두 가지의 차이점은 이벤트에 여러 이벤트 핸들러가있을 때 stopimmediatepropagation ()이 이벤트 핸들러가 나중에 호출되는 것을 방지 할 수 있다는 것입니다.
예를 들어:
<body> <입력 id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.addeventListener ( "click", function (event) {console.log ( "buttn 클릭 한 번 청취 된 클릭"); // event.stopPropagation (); // uncomment viewing event.stopimmediatepropagation (); // uncomment view effect}, false); btn.adeventListener ( "click", function () {console.log ( "버튼 클릭 된 두 번 청취");}, false); document.body.onclick = function (event) {console.log ( "body clicked"); } </script> </body>실행 효과 :
D, 이벤트 상
이벤트 계상 값은 캡처 단계에서 1, 대상 단계에서 2, 기포 단계에서 3입니다.
예:
<body> <입력 id = "btn"type = "button"value = "클릭"/> <cript> var btn = document.getElementById ( "btn"); btn.onclick = function (event) {console.log ( "버튼 dom0- 레벨 방법 추가 이벤트 핸들러 이벤트 페이스 값 is? "+event.eventPhase);} btn.addeventListener ("click ", function (event) {console.log ("버튼 dom2-level 메소드는 이벤트 핸들러를 추가하고 이벤트 값은 "+event.eventPhase);}, true); btn.addeventListener ("click ", event) 핸들러 및 이벤트 값은 "+event.eventPhase);}, false)입니다. document.body.addeventListener ( "클릭", 함수 (이벤트) {console.log ( "Body는 이벤트 핸들러를 추가하고 이벤트 값은"+event.eventPhase);}, true); document.body.addeventListener ( "click", function (event) {console.log입니다. "+event.eventPhase);}, false); </script>실행 효과 :
2. IE의 이벤트의 공개 회원
IE의 이벤트 속성과 방법은 이벤트 유형마다 다르지만 일부는 모든 객체가 가지고있는 공개 구성원이며, 대부분의 구성원은 해당 DOM 속성 또는 방법을 가지고 있습니다.
위의 것은 편집자가 귀하에게 소개 한 이벤트의 공개 회원 (속성 및 방법)에 대한 관련 지식이며 (IV), 나는 그것이 당신에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨주세요!