간단한 이벤트 모델과 고급 이벤트 모델 단순 이벤트는 이벤트가 다음과 같은 페이지 요소에 직관적으로 바인딩되는 형식입니다.
element.onclick = function(){alert(this.innerHTML);}
개별 브라우저 고유의 이벤트를 사용하지 않는 이상 일반 클릭, 마우스오버 이벤트 등은 가능합니다. 각 브라우저에서 사용할 수 있습니다. 이런 식으로 사용할 수 있습니다.
그러나 이벤트가 여러 리스너를 바인딩해야 하거나 동적으로 리스너를 등록/제거해야 하는 경우 간단한 이벤트 모델로는 충분하지 않으며 고급 이벤트 모델을 사용해야 합니다(IE 및 기타 브라우저에서는 고급 이벤트 모델을 사용함) 차이가 있을 수 있음) :
// 등록
function addEventHandler(element, evtName, callback, useCapture) {
//DOM 표준
if (element.addEventListener) {
element.addEventListener(evtName, callback, useCapture)
} else {
//IE 모드, useCapture 매개변수 무시
element.attachEvent('on' evtName, callback)
}
}
//제거
function RemoveEventHandler( element, evtName, callback, useCapture) {
//DOM 표준
if (element.removeEventListener) {
element.removeEventListener(evtName, callback, useCapture)
} else {
/ /IE 모드, useCapture 매개변수 무시
element.dettachEvent('on' evtName, callback)
}
}
onclick 이벤트와 태그의 href 속성 간의 호출 순서 관계 a 태그가 클릭 이벤트에 응답하면 먼저 onclick 이벤트에 응답하고, 그런 다음 href 에서 점프 메소드를 실행하십시오. 예를 들어, 다음 태그를 클릭하면 "button" 및 "href"가 연속적으로 표시됩니다.
단, href에는 점프링크 주소를 정의하는 속성이므로 특정 자바스크립트 메소드를 정의하지 않는 것이 가장 좋습니다. 두 가지 자바스크립트 메소드를 차례로 작성하려면 다음과 같아야 합니다.
;/a>
그러나 위의 작성 방식에서 onclick 바인딩 응답 메서드가 다른 페이지로 이동하라는 요청을 제출하지 않으면 현재 웹 페이지가 새로 고쳐진 것을 알 수 있습니다. 위 코드에서 ="#"은 현재 페이지의 맨 위로 이동한다는 의미이지만 새로운 html 요청은 발행되지 않습니다. 때때로 우리는 onclick 이벤트에 응답한 후 페이지가 맨 위로 이동하는 것을 원하지 않습니다(특히 페이지 높이가 길고 스크롤 막대가 나타나고 링크가 페이지 하단에 있는 경우 사용자는 여전히 위로 점프한 후 스크롤 막대를 드래그하려면) 원래 위치를 검색하고 작업을 계속할 때) 다음과 같이 href에 정의된 계속 작업을 방지하려면 onclick 후 false 값을 반환해야 합니다.
< ;a href="#" onclick="alert(this.innerHTML ); return false;"> 버튼 또는 #을 빈 자바스크립트 문으로 바꾸세요. :
버튼 Onload 이벤트 호출 순서 페이지 초기화 중에 페이지 요소의 초기 상태를 설정하기 위해 일부 스크립트를 호출해야 하는 경우가 있습니다. 가장 표준적인 방법은 <를 사용하는 것입니다. ;body onload=""> 메소드 또는 document.onload 메소드. onload 이벤트의 트리거는 페이지 요소가 렌더링된 후에 호출되므로 스크립트가 실행될 때 렌더링되지 않은 페이지 요소가 발견되지 않습니다. 영역의 <script> 블록에서 스크립트를 실행하고 페이지 요소를 사용하면 요소를 찾을 수 없다는 오류가 발생할 가능성이 높습니다. <body> 영역의 <script> 블록에서 스크립트를 실행하면 <script> 블록 앞의 페이지 요소만 사용할 수 있습니다. <br><br><BR><STRONG>onchange 이벤트 <br><br><input> 요소와 <select>의 <option> 요소는 모두 onchange 이벤트를 지원합니다. 해당 요소 콘텐츠 값이 변경되었지만 onchange 이벤트가 트리거되지 않았습니다. 이는 onchange 이벤트가 트리거되는 또 다른 조건이 있기 때문입니다. 즉, 현재 요소가 포커스를 잃은 상태(onblur)에 있기 때문입니다. 따라서 onchange 이벤트는 사용자 작업 중 값 변경만 캡처할 수 있으며 JavaScript 스크립트를 사용하여 요소의 값이 동적으로 변경되는 상황은 캡처할 수 없습니다. <br><br><STRONG>이벤트 차단 <br><br>IE 이외의 브라우저에서는 window.event를 인식할 수 없으므로 현재 이벤트와 이벤트가 발생한 대상 요소를 얻기 위해서는 다음과 같은 방법을 사용해야 합니다. : <BR>var evt = e?e:(window.event?window.event:null); <BR>var el = evt.srcElement?evt.srcElement:evt.target;<br><br>여기에 몇 가지가 있습니다. 기타 관련 기사는 매우 참고할 가치가 있습니다<BR><A href="http://www.jb51.net/article/22014.htm" target=_blank>JavaScript 이벤트 학습 1장 이벤트 소개 <BR><A href="http://www.jb51.net/article/22763.htm" target=_blank>javascript 크로스 브라우저 이벤트 시스템</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
