JavaScript 크로스 브라우저 개발 경험 요약(5) js events_javascript 기술
- WBOY원래의
- 2016-05-16 18:26:56926검색
간단한 이벤트 모델과 고급 이벤트 모델
간단한 이벤트 모델과 고급 이벤트 모델 단순 이벤트는 이벤트가 다음과 같은 페이지 요소에 직관적으로 바인딩되는 형식입니다.
개별 브라우저 고유의 이벤트를 사용하지 않는 이상 일반 클릭, 마우스오버 이벤트 등은 가능합니다. 각 브라우저에서 사용할 수 있습니다. 이런 식으로 사용할 수 있습니다.
그러나 이벤트가 여러 리스너를 바인딩해야 하거나 동적으로 리스너를 등록/제거해야 하는 경우 간단한 이벤트 모델로는 충분하지 않으며 고급 이벤트 모델을 사용해야 합니다(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>
간단한 이벤트 모델과 고급 이벤트 모델 단순 이벤트는 이벤트가 다음과 같은 페이지 요소에 직관적으로 바인딩되는 형식입니다.
코드 복사 코드는 다음과 같습니다.
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>
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.