이 기사에서는 자바 스크립트로 청취를 추가하고 삭제하는 사용에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 분석은 다음과 같습니다.
JS의 이벤트 청취는 addeventListener를 사용하여 이벤트를 바인딩하는 것입니다. 이 사용법은 jQuery에서 매우 일반적이며 간단하지만 Native JS에서는 더 복잡합니다. 여기서 우리는 참조 및 학습을위한 AddeventListener 이벤트의 다양한 방법의 테스트 및 예를 구성합니다.
이틀 전에 플레이어로 일할 때 모니터 삭제에 문제가 발생했으며 삭제할 수 없었습니다. 그것을 살펴본 후에는 매개 변수에 완전히 일치해야한다는 것을 알았습니다. 완전히 일치한다는 것은 무엇을 의미합니까? 다시 말해서:
코드 사본은 다음과 같습니다. $ ( '. video') [0] .addeventListener ( 'TimeUpdate', currentTimeHandler, true);
예를 들어, 삭제할 수 있도록이 문장으로 세 개의 매개 변수를 전달해야합니다. 필요한 이유는 무엇입니까? 예, 고통스러운 부분은 여기에 있습니다.
추가 및 제거 할 때 세 번째 매개 변수를 무시할 수 있지만 현재 기본 상황이 다릅니다! !
일반적으로 addeventlistener는 거짓입니다 ...
1. 사용자 정의 이벤트 청취를 추가하십시오
코드 사본은 다음과 같습니다. var eventHandlesCounter = 1; // 추가 이벤트 수수 수를 계산하고 0은 예약 비트로 사용됩니다.
함수 addevent (obj, evt, fn) {
if (! fn .__ eventId) {fn .__ eventId = eventHandlesCounter ++;}
if (! obj .__ eventHandles) {obj .__ eventHandles = []; }
if (! obj .__ eventHandles [evt]) {
OBJ .__ EventHandles [EVT] = [];
if (obj [ "on"+evt] instanceof function) {
obj .__ eventHandles [evt] [0] = obj [ "on"+evt];
obj [ "on"+evt] = handleEvents;
}
}
obj .__ eventHandles [evt] [fn .__ eventId] = fn;
함수 handleEvents () {
var fns = obj .__ EventHandles [EVT];
for (var i = 0; i <fns.length; i ++)
fns [i] .call (this);
}
}
2. 삭제 이벤트 청취를 사용자 정의하십시오
코드 사본은 다음과 같습니다. function delevent (obj, evt, fn) {
if (! obj .__ eventhandles ||! obj .__ eventhandles [evt] ||! fn .__ eventId) {
거짓을 반환합니다.
}
if (obj .__ eventHandles [evt] [fn .__ eventId] == fn) {
obj .__ eventhandles [evt] [fn .__ eventId];
}
}
3. 위의 방법을 수정하십시오
코드 사본은 다음과 같습니다. function addevent (obj, evt, fn, usecapture) {
if (obj.addeventListener) {// W3C 이벤트 등록을 선호합니다
obj.addeventListener (EVT, FN, !! usecapture);
}또 다른{
if (! fn .__ eventId) {fn .__ eventId = addevent .__ eventHandlesCounter ++;}
if (! obj .__ eventhandles) {obj .__ eventhandles = [];}
if (! obj .__ eventHandles [evt]) {
OBJ .__ EventHandles [EVT] = [];
if (obj [ "on"+evt]) {
(obj .__ eventHandles [evType] [0] = obj [ "on"+evType]) .__ eventId = 0;
}
obj [ "on"+evtype] = addevent.execeventhandles;
}
}
}
addevent .__ eventHandlesCounter = 1;
addevent.execeventhandles = function (evt) {
if (! this .__ eventHandles) {return true;}
EVT = EVT || Window.event;
var fns = this .__ eventHandles [evt.type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (this);
}
}
};
function delevent (OBJ, EVT, FN, USECAPTURE) {
if (obj.removeeventListener) {// w3c 메소드를 사용하여 이벤트 핸들러를 먼저 제거하십시오.
obj.removeeventListener (EVT, FN, !! usecapture);
}또 다른 {
if (obj .__ EventHandles) {
var fns = obj .__ EventHandles [EVT];
if (fns) {fns 삭제 [fn .__ eventId];}
}
}
4. 이벤트 객체를 표준화하십시오
코드 사본은 다음과 같습니다. function fixevent (evt) {
if (! evt.target) {
evt.target = evt.srcelement;
evt.preventDefault = fixEvent.preventDefault;
evt.stoppropagation = fixevent.stoppropagation;
if (evt.type == "마우스 오버") {
Evt.RelatedTarget = Evt.FromElement;
} else if (evt.type == "마우스 아웃") {
evt.RelatedTarget = evt.toelement;
}
evt.charcode = (evt.type == "keypress")? evt.keycode : 0;
evt.eventPhase = 2;
evt.timestamp = (new date ()). gettime ();
}
반환 EVT;
}
fixevent.preventDefault = function () {this.returnValue = false;}
fixevent.stopPropagation = function () {this.cancelBubble = true;};
FixEvent 함수는 별도로 실행되지 않으며 이벤트 객체 매개 변수가 있어야하며 이벤트가 발생할 때만 실행됩니다! 가장 좋은 방법은 addevent 함수의 execeventhandles에 통합하는 것입니다.
다음과 같이 코드를 복사하십시오.
if (! this .__ eventHandles) {return true;}
evt = fixEvent (evt || window.event); // 여기에서 표준화하십시오
var fns = this .__ eventHandles [evt.type];
for (var i = 0; i <fns.length; i ++) {
if (fns [i] instanceof function) {
fns [i] .call (this, evt); // 이벤트 핸들러 기능의 첫 번째 매개 변수로 사용
// 이런 식으로 통합 된 메소드를 사용하여 이벤트 핸들러 함수 내에서 이벤트 객체에 액세스 할 수 있습니다}};
위의 내용은 마스터가 작성했으며 다음은 실제 모니터링 이벤트의 몇 가지 예입니다.
다음과 같이 코드를 복사하십시오. <! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<헤드>
<title> test6.html </title>
<script type = "text/javaScript">
기능 test () {
window.alert ( "당신은 한 번 투표했다");
document.getElementById ( "1"). DetacheVent ( "Onclick", Test);
}
</스크립트>
</head>
<body>
<입력 유형 = "버튼"value = "vote"id = "1"/>
<script type = "text/javaScript">
document.getElementById ( "1"). att
</스크립트>
</body>
</html>
여기, document.getElementById ( "1"). affevent ( "onclick", test); 동적 이벤트 바인딩에 사용되며 복사 코드는 다음과 같이 사용됩니다.
depore.getElementById ( "1"). DetacheVent ( "Onclick", Test)는 동적으로 시간을 취소 하므로이 이벤트는 한 번만 해당 할 수 있으며 다음 에이 버튼을 클릭하면 효과가 없습니다.
다음으로, 입력의 숫자인지 여부를 결정하기 위해 적시에 모니터링되는 키보드 이벤트의 또 다른 데모. 숫자가 아닌 경우 동적으로 프롬프트가 발생한 다음 입력을 거부합니다.
다음과 같이 코드를 복사하십시오. <! doctype html public "-// w3c // dtd html 4.01 Transitional // en">
<html>
<헤드>
<title> test7.html </title>
<script type = "text/javaScript">
기능 테스트 (이벤트) {
// 사용자가 키를 누를 때마다 숫자인지 여부를 결정합니다.
if (event.keyCode <48 || event.keyCode> 57) {
window.alert ( "숫자가 아님을 입력하고 있습니다");
거짓을 반환합니다.
}
}
</스크립트>
</head>
<body>
<입력 유형 = "text"onkeypress = "반환 테스트 (이벤트);"; /> 번호를 입력하십시오
</body>
</html>
여기의 이벤트는 많은 정보를 반환 할 수있는 이벤트 객체입니다. 자세한 내용은 관련 문서를 참조하십시오.
보충 : 이벤트 모니터링의 호환성
1. IE는 AttachEvent/DetacheVent 메소드를 사용하여 이벤트 리스너를 추가하고 삭제합니다. W3C는 addeventListener/removeEventListener 메소드를 사용합니다.
2. IE는 이벤트에 Onevent Naming 방법을 사용하는 반면 W3C는 이벤트의 이름 지정 방법입니다.
3. IE 이벤트 리스너는 글로벌 이벤트 객체를 사용하고 W3C는 이벤트 객체를 리스너에게 매개 변수로 전달합니다.
4. 기본 이벤트 동작을 트리거하지 않기 위해 IE의 접근 방식은 프로그래머가 이벤트 객체에서 ReturnValue 속성 값을 False로 설정하도록 요구하는 반면 W3C의 접근 방식은 PreverDefault 메소드를 실행하는 것입니다.
5. IE는 이벤트 캡처 단계를 지원하지 않습니다.
6. 이벤트 전달을 중지하기 위해 IE의 접근 방식은 이벤트 객체의 CANCELBUBLE을 True로 설정하는 것이지만 W3C의 접근 방식은 Execution StopPropagation 메소드를 설정하는 것입니다.
7. IE는 이벤트 리스너를 독립적 인 기능으로 호출하고 W3C에서는 객체 메소드라고합니다. 즉, IE에서 이벤트 리스너 의이 키워드는 이벤트 발생 객체가 아니라 쓸모없는 글로벌 객체 (창 객체)를 가리 킵니다.
8. 즉, 이벤트 리스너를 사용하는 데 메모리 누출 문제가 있습니다. IE 브라우저에서, 요소에 대한 이벤트 리스너를 만들고 리스너에서 해당 요소를 사용하려면, 리스너가 차지하는 메모리 공간과 관련 DOM 노드는 사용자가 다른 페이지를 입력하기 전에 해제되지 않습니다.
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.