>  기사  >  웹 프론트엔드  >  DOM 요소와 이벤트에 관한 3가지 퍼즐_DOM

DOM 요소와 이벤트에 관한 3가지 퍼즐_DOM

WBOY
WBOY원래의
2016-05-16 18:16:371033검색
1. 배경 지식 소개
일반적으로 DOM 요소에 이벤트를 추가하는 방법은 다음과 같습니다.
1. 하드 코딩된 양식
2. by JS Framework 이벤트 바인딩
1, 하드 코딩된 형태로, 오리지널 이벤트(Original Event) 형태를 채택합니다.
코드는 다음과 유사합니다.

코드 복사 코드는 다음과 같습니다.

document.getElementById('element_id').eventName = func()

2, 이벤트 수신 메커니즘 이 형식에 채택된 접근 방식은 DOM 이벤트 메커니즘을 기반으로 하며 DOM 표준 이벤트 모델 addEventListener와 IE 이벤트 모델 attchEvent로 구분됩니다.
코드는 다음과 유사합니다.

코드 복사 코드는 다음과 같습니다.
var addEventHandler = function( ele, evt, fn){
if (ele.addEventListener) {
ele.addEventListener(evt, fn, false)
}
else
if (ele.attachEvent) {
ele.attachEvent('on' evt, fn)
}
else {
ele['on' evt] =
}
};
var ele = document.getElementById('element_id');
addEventHandler(ele, 'eventName', function(){ code... })

3 , JS 프레임워크 메커니즘에서 제공하는 이벤트 바인딩, 여기서는 jQuery 프레임워크가 사용되는 것으로 가정합니다.
코드는 다음과 유사합니다.

코드 복사 코드는 다음과 같습니다.
$('element_id' ).bind('eventName', function(event){ 코드... })
$('element_id').click(function(){ 코드... }) ;


2. 퍼즐
추가 페이지에 다음 코드가 있습니다.

... ...
<스크립트 유형 ="text/javascript" src="js/jquery -lastest.js">




위 아이디어에 따라 하이재킹 코드 03 및 하이재킹 코드 04에 대한 코드를 작성하는 데 도움을 줄 수 있는 사람이 있나요? 아니면 다른 솔루션을 제공하시겠습니까?
위 아이디어에 따라 하이재킹 코드 03 및 하이재킹 코드 04에 대한 코드를 작성하는 데 도움을 줄 수 있는 사람이 있나요? 아니면 다른 솔루션을 제공하시겠습니까?
1. 기존 코드는 수정할 수 없습니다.
2. 가능하다면 원래 js 클래스를 확장하는 것도 허용됩니다.
3. func_test와 not_existfunc는 사전에 알 수 없으며 "getting"을 통해서만 얻을 수 있습니다.
4. 궁극적인 목적을 위해서는 오류가 발생한 오류 개체, 메서드 이름, 이벤트 및 매개 변수를 알아야 합니다. 이 목적을 바탕으로 다른 해결 방법도 가능합니다.
5. Firebug와 같은 클라이언트측 디버깅 도구는 사용할 수 없습니다. 이러한 유형의 도구를 사용하면 "코드가 잘못되었습니다"라고 알 수 있습니다.
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.