1. 버블 이벤트
브라우저에 대한 이벤트 모델에는 두 가지 유형의 이벤트 모델이 있습니다 : 캡처 이벤트 및 버블 이벤트. IE는 캡처 이벤트를 지원하지 않기 때문에 다음은 주로 버블 이벤트를 설명으로 사용합니다.
(더빙 버블) 버블 타입은 가장 구체적인 이벤트를 의미합니다.
코드 사본은 다음과 같습니다.
<body onclick = "add ( 'body <br>')">
<div onclick = "add ( 'div <br>')">
<ponclick = "add ( 'p <br>')"> me </p>를 클릭하십시오
</div>
</body>
<div id = "display">
</div>
<script type = "text/javaScript">
함수 추가 (Stext) {
var ulo = document.getElementById ( "display");
ulo.innerhtml += Stext;
}
</스크립트>
위의 세 가지 함수가 Onclick 함수를 추가했습니다. 독립형 P 요소가 발생한 후 세 가지 기능이 발사됩니다. P 요소가 먼저 실행되고 DIV가 실행되고 마지막으로 본체가 실행됩니다.
여기에 캡처 이벤트를 상기시켜줍니다. 순서는 버블 이벤트와 정확히 반대입니다.
2. 이벤트 모니터링
이벤트에는 응답 기능이 필요합니다. 이 유형의 기능을 일반적으로 이벤트 핸들러라고합니다. 다른 관점에서 볼 때 이러한 기능은 이벤트가 발생하는지 여부에 관계없이 실시간으로 듣고 있습니다. 일반적으로 이벤트 리스너라고합니다. 이벤트 청취 기능은 브라우저에 따라 상당히 다릅니다.
나. Onclick 메소드 사용과 같은 일반적인 청취 방법은 거의 모든 태그 가이 방법을 지원합니다. 브라우저 호환성은 매우 높습니다
행동, 사건 분리를 고려합니다.
일반적으로 다음 방법을 사용하여 모니터링하십시오
코드 사본은 다음과 같습니다.
<body>
<div id = "me"> 클릭 </div>
<script type = "text/javaScript">
var opp = document.getElementById ( "me"); // 이벤트가 발견되었습니다
opp.onclick = function () {// 이벤트 함수를 설정합니다
Alert ( "클릭했습니다!")
}
</스크립트>
</body>
위에서 소개 된 두 가지 방법 모두 매우 편리하며 작은 기능을 만들고 처리 할 때 Everbright 개발자가 사랑합니다. 그러나 같은 이벤트의 경우. p로 표시된 onclick 함수와 같은 하나의 함수 만 추가 할 수 있습니다. 두 방법 모두 하나의 기능 만 가질 수 있습니다. 따라서 IE에는 고유 한 솔루션, 동료 및 표준 DOM이 있습니다.
II. IE의 모니터링 방법
모닝 브라우저에서 각 요소에는 청취를 처리하는 두 가지 방법이 있습니다.
각각 첨부 이벤트 () 및 Detachenevt ()입니다.
함수 이름에서 볼 수 있듯이 att 그들의 구문은 다음과 같습니다.
[Object] .attachevent ( "enevt_handler", "fnhandler");
[Object] .detachevent ( "enevt_handler", "fnhandler");
그중에서도 ENEVT_HANDLER는 일반적으로 사용되는 OnClick, OnLoad, OnMouseOver 등을 나타냅니다.
fnhandler는 리스너 기능의 이름입니다.
이전 섹션에서는 청취 함수를 추가하는 대신 autdevent () 메소드를 사용할 수 있습니다. 클릭하면 DetacheVent ()를 사용하여 다음 클릭 후에 실행되지 않도록 청취 기능을 삭제할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 fnclick () {
경고 ( "클릭했습니다!");
op.detachevent ( "onclick", "fnclick");
}
var op;
Window.onload = function () {
op = document.getElementById ( "OOP"); // 객체를 찾습니다
op.attachevent ( "onclick", "fnclick"); // 리스너 함수를 추가합니다
}
</스크립트>
<div>
<p id = "oop">
</p>
</div>
III. 여러 청취 이벤트 추가 (즉,)
코드 사본은 다음과 같습니다.
<script language = "javaScript">
함수 fnclick1 () {
경고 ( "나는 fnclick1에 의해 클릭되었다");
}
함수 fnclick2 () {
경고 ( "나는 fnclick2에 의해 클릭되었다");
//op.detachevent("onclick",fnclick1); // 리스너 함수 삭제 1
}
var op;
Window.onload = function () {
op = document.getElementById ( "myp"); // 객체를 찾습니다
op.attachevent ( "onclick", fnclick1); // 청취자 기능 추가 1
op.attachevent ( "onclick", fnclick2); // 리스너 함수 추가 2
}
</스크립트>
</head>
<body>
<div>
<p id = "myp"> me </p>를 클릭하십시오
</div>
3. 표준 DOM 이벤트 모니터링
IE의 두 가지 방법을 사용하면 표준 DOM은 두 가지 방법을 사용하여 리스너 기능을 각각 추가하고 삭제합니다. 즉, addeventListener () 및 removeEventListener ()
IE와는 달리이 두 함수는 3 개의 매개 변수, 즉 이벤트 이름, 할당 할 함수의 이름 및 버블 스테이지 또는 캡처 스테이지에 사용되는지 여부를 허용합니다. 캡처 스테이지의 매개 변수는 참이며, 버블 스테이지의 매개 변수는 false입니다. 구문은 다음과 같습니다.
코드 사본은 다음과 같습니다.
[Object] .AddeventListener ( "Event_Name", fnhandler, bcapture);
[Object] .removeEventListener ( "event_name", fnhandler, bcapture);
이 두 기능의 사용 방법은 기본적으로 IE와 유사하지만 event_name의 이름은 "클릭", "마우스 오버"등이 "on Click"및 "onmouseover"가 아니라 "클릭", "마우스 오버"등이라는 점에 유의해야합니다.
또한, 세 번째 파라미터 bcapture는 일반적으로 버블 링 단계에서 false로 설정됩니다.
표준 DOM 이벤트 청취 방법 :
코드 사본은 다음과 같습니다.
<script language = "javaScript">
함수 fnclick1 () {
Alert ( "1 번 클릭했습니다");
op.removeeventListener ( "클릭", fnclick1, false);
}
함수 fnclick2 () {
Alert ( "2 번 클릭했습니다");
}
Window.onload = function () {
op = document.getElementById ( "myp");
op.addeventListener ( "클릭", fnclick1, false);
op.addeventListener ( "클릭", fnclick2, false);
}
</스크립트>
<div>
<p id = "myp"> me </p>를 클릭하십시오
</div>
특정 실행 순서를 테스트 할 수 있습니다.
위의 것은이 기사에 관한 모든 것입니다. 나는 당신이 그것을 좋아하기를 바랍니다.