관련 판독 값 :
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. 이벤트 핸들러
앞에서 언급했듯이 이벤트는 클릭,로드 및 마우스 오버와 같은 사용자 또는 브라우저 자체가 수행하는 일부 작업이 모든 이벤트 이름입니다. 특정 이벤트에 응답하는 기능을 이벤트 핸들러 (이벤트 핸들러, 이벤트 핸들러라고도 함)라고합니다. 이벤트 핸들러의 이름은 "ON"으로 시작하므로 클릭 이벤트의 이벤트 핸들러는 ONCLICK이며로드 이벤트의 이벤트 핸들러는 ONLOAD입니다.
이벤트 핸들러를 지정하는 세 가지 주요 방법이 있습니다.
1. HTML 이벤트 핸들러
우선,이 접근법은 구식입니다. 동작 (JavaScript 코드)과 컨텐츠 (HTML 코드)가 엄격하게 연결되어 있기 때문입니다. 그러나 작은 데모를 작성할 때 여전히 사용할 수 있습니다.
이 작업을 수행하는 두 가지 방법이 있습니다. 둘 다 매우 간단합니다.
첫 번째 유형 : 이벤트 핸들러와 HTML의 포함 작업을 직접 정의합니다.
코드 사본은 다음과 같습니다. <input type = "button"value = "Click Me!"/>
두 번째 유형 : HTML에서 이벤트 핸들러를 정의하고 실행 된 작업은 다른 곳에 정의 된 스크립트를 호출합니다.
코드 사본은 다음과 같습니다. <input type = "button"value = "clost me!"/> <cript> function showmessage () {alert ( "clicked!");} </script>
메모:
1) 이벤트 변수를 통해 이벤트 자체에 직접 액세스 할 수 있습니다. 예를 들어, onclick = "alert (event.type)"가 클릭 이벤트가 나타납니다.
2)이 값은 대상 요소가 입력되는 이벤트의 대상 요소와 동일합니다. 예를 들어, onclick = "alert (this.value)"는 입력 요소의 값 값을 얻을 수 있습니다.
2. DOM0 레벨 이벤트 핸들러
이 방법은 간단하고 교차 브라우저이지만 하나의 요소에 이벤트 핸들러 만 추가 할 수 있습니다.
이 메소드는 여러 이벤트 핸들러를 요소에 추가하기 때문에 다음은 이전의 이벤트 처리기를 무시합니다.
이벤트 핸들러 추가 :
<입력 유형 = "button"value = "클릭하십시오!" onclick = "showmessage ()"/> <cript> 함수 showmessage () {alert ( "clicked!");} </script>이벤트 핸들러 삭제 :
코드 사본은 다음과 같습니다. mybtn.onclick = null;
3. DOM2 레벨 이벤트 핸들러
DOM2- 레벨 이벤트 핸들러는 여러 이벤트 핸들러를 하나의 요소에 추가 할 수 있습니다. addeventListener () 및 removeEventListener ()의 이벤트 처리기를 추가하고 제거하는 두 가지 방법을 정의합니다.
두 방법 모두 이벤트 이름, 이벤트 핸들러 기능 및 부울 값의 3 가지 매개 변수가 필요합니다.
이 부울 값은 사실이며, 이벤트는 캡처 스테이지, false에서 처리되며 이벤트는 기포 단계에서 처리되어 기본값이 거짓으로 처리됩니다.
이벤트 핸들러 추가 : 이제 버튼에 두 개의 이벤트 핸들러를 추가하고, 하나는 "Hello"를 팝업하고 다른 하나는 "World"를 팝업합니다.
<input id = "mybtn"type = "button"value = "clost me!"/> <cript> var mybtn = document.getElementById ( "mybtn"); mybtn.addeventListener ( "click", function () {alert ( "hello");}, false); mybtn.addeventListener ( "click", function () {alert ( "world");}, false); </script>삭제 이벤트 핸들러 : addeventListener를 통해 추가 된 이벤트 핸들러는 removeEventListener를 통해 삭제해야하며 매개 변수는 일관성이 있습니다.
참고 : addeventListener를 통해 추가 된 익명 기능은 삭제되지 않습니다. 다음 코드는 작동하지 않습니다!
코드 사본은 다음과 같습니다.
RemoveEventListener는 위의 AddeventListener 매개 변수와 일치하는 것으로 보이지만 실제로 두 번째 매개 변수의 익명 함수는 완전히 다릅니다.
따라서 이벤트 핸들러를 삭제하기 위해 코드는 다음과 같이 작성할 수 있습니다.
<input id = "mybtn"type = "button"value = "clost me!"/> <cript> var mybtn = document.getElementById ( "mybtn"); var handler = function () {alert ( "hello"); } mybtn.adeventListener ( "클릭", 핸들러, 거짓); mybtn.removeeventListener ( "클릭", 핸들러, 거짓); </script>2. 즉, 이벤트 핸들러
1. 실제 응용 시나리오
IE8 이하의 브라우저는 AddEventListener를 지원하지 않습니다. 실제 개발에서 IE8 이하 이하 브라우저와 호환하려는 경우. 기본 바인딩 이벤트를 사용하고 호환되는 처리가 필요한 경우 대신 jQuery 바인드를 사용할 수 있습니다.
2. IE8 이벤트 바인딩
IE8 및 다음 브라우저는 DOM과 같은 두 가지 유사한 방법을 구현합니다.
두 방법 모두 이벤트 핸들러 이름과 이벤트 핸들러 기능의 두 가지 매개 변수가 필요합니다.
메모:
IE11은 AddEventListener 만 지원합니다!
IE9 및 IE10 지원 ATTHEVENT 및 ADDEVENTLISTERON!
TE8 이하는 첨부 이벤트 만 지원합니다!
다음 코드를 사용하여 다양한 IE 버전 브라우저에서 테스트 할 수 있습니다.
<input id = "mybtn"type = "button"value = "clost me!"/> <cript> var mybtn = document.getElementById ( "mybtn"); var handlerie = function () {alert ( "helloie"); } var handlerdom = function () {alert ( "hellodom"); } mybtn.adeventListener ( "클릭", 핸들러, 거짓); mybtn.attachevent ( "onclick", handlerie); </script>이벤트 핸들러 추가 : 이제 버튼에 두 개의 이벤트 핸들러를 추가하고, 하나는 "Hello"를 팝업하고 다른 하나는 "World"를 팝업합니다.
<cript> var mybtn = document.getElementById ( "mybtn"); mybtn.attachevent ( "onclick", function () {alert ( "hello");}); mybtn.attachevent ( "onclick", function () {alert ( "world");}); </script>참고 : 여기서 작동 효과는 다음과 같습니다.
"세계"는 IE8 아래의 브라우저에서 먼저 나타납니다. DOM의 이벤트 트리거 순서는 반대입니다.
IE9 이상의 브라우저는 먼저 "Hello"를 팝업 한 다음 "World"를 나타냅니다. DOM에서 이벤트 트리거와 같은 순서.
IE 브라우저가 점차 올바른 길을 가고 있음을 알 수 있습니다. . .
이벤트 핸들러 삭제 : 첨부 이벤트를 통해 추가 된 이벤트 핸들러는 Depachevent 메소드를 통해 삭제해야하며 매개 변수는 일관성이 있습니다.
DOM 이벤트와 마찬가지로 추가 된 익명 기능은 삭제되지 않습니다.
따라서 이벤트 핸들러를 삭제하기 위해 코드는 다음과 같이 작성할 수 있습니다.
<input id = "mybtn"type = "button"value = "clost me!"/> <cript> var mybtn = document.getElementById ( "mybtn"); var handler = function () {alert ( "hello"); } mybtn.attachevent ( "onclick", handler); mybtn.detachevent ( "onclick", handler); </script>참고 : IE Event Handler : SCOPE에주의를 기울일 다른 곳이 있습니다.
첨부 이벤트 () 메소드를 사용하여 이벤트 핸들러는 글로벌 범위에서 실행되므로 창과 같습니다.
DOM2 또는 DOM0 레벨에서 메소드의 범위는 요소 내부에 있으며이 값은 대상 요소입니다.
다음 예제는 사실이 나타납니다.
<input id = "mybtn"type = "button"value = "clost me!"/> <cript> var mybtn = document.getElementById ( "mybtn"); mybtn.attachevent ( "onclick", function () {alert (this === Window);}); </script>이것은 브라우저 크로스 코드를 작성할 때 명심해야 할 사항입니다.
IE7/8 감지 :
// IE7/8 판사 호환성 감지 var isie = !! window.ActiveXobject; var isie6 = isie &&! window.xmlhttprequest; var isie8 = isie && !! document.documentMode; var isie7 = isie &&! isie6 &&! isie8; if (isie8 || isie7) {li.attachevent ( "onclick", function () {_ker.openinfowindow (_iw);})} else {li.addeventListener ( "click", function () {_marker.openinfowindow (_iw);}}위는 편집자가 소개 한 JS 이벤트 핸들러의 JavaScript 이벤트 학습 요약 (ii)에 대한 관련 지식입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!