Javascript 감청 및 삭제 사용 설명 추가
7660 단어 Javascript감청
js에서 이벤트 감청은 add Event Listener를 이용하여 하나의 이벤트를 연결하는 것이다. 이 용법은 jquery에서 매우 자주 사용되고 간단하지만 원생 js에서는 비교적 복잡하다. 여기에서add Event Listener 사건의 각 방법의 테스트와 예를 정리하여 참고하여 학습하도록 한다.
이틀 전에 플레이어를 할 때 감청을 추가한 후 감청을 삭제하는 데 약간의 번거로움이 생겨서 삭제할 수 없었다. 나중에 보니 파라미터가 완전히 대응해야 한다는 것을 발견했다. 무엇이 완전 대응이냐는 것이다. 다시 말하면
$('.video')[0].addEventListener('timeupdate', currentTimeHandler, true);add와remove에서 세 번째 파라미터는 확실히 쓰지 않을 수 있지만, 이 때 그들의 기본 상황은 다르다!!
보통 add Event Listener는 false...
1. 사용자 정의 이벤트 감청 추가
var eventHandlesCounter=1;// ，0
function 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;
function handleEvents(){
var fns = obj.__EventHandles[evt];
for (var i=0;i<fns.length;i++)
fns[i].call(this);
}
}function delEvent(obj,evt,fn){
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
return false;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
delete obj.__EventHandles[evt][fn.__EventID];
}
}function addEvent(obj,evt,fn,useCapture){
if(obj.addEventListener){// W3C
obj.addEventListener(evt,fn,!!useCapture);
}else{
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);
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){delete fns[fn.__EventID];}
}
}function fixEvent(evt){
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if(evt.type == "mouseover"){
evt.relatedTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.relatedTarget = evt.toElement;
}
evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};addEvent.execEventHandles = function (evt) {//
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);//
// } } };
<html>
<head>
<title>test6.html</title>
<script type="text/javascript">
function test(){
window.alert(" ");
document.getElementById("1").detachEvent("onclick",test);
}
</script>
</head>
<body>
<input type="button" value=" " id="1"/>
<script type="text/javascript">
document.getElementById("1").attachEvent("onclick",test);
</script>
</body>
</html>
document.getElementById("1").detachEvent("onclick",test)다음은 키보드 이벤트를 실시간으로 감청하여 입력한 숫자가 숫자인지 아닌지를 판단하고 숫자가 직접 동적 알림이 아니면 입력을 거부하는 것을 보여 줍니다.
<html>
<head>
<title>test7.html</title>
<script type="text/javascript">
function test(event){
// ，
if(event.keyCode<48 || event.keyCode > 57){
window.alert(" ");
return false;
}
}
</script>
</head>
<body>
<input type="text" onkeypress="return test(event);" />
</body>
</html>보충: 이벤트 모니터링 호환
1. IE는attachEvent/detachEvent 방법으로 이벤트 감청기를 추가하고 삭제합니다.w3c는 addEventListener/removeEventListener 방법을 사용합니다.
2. IE는 이벤트에 대해 onevent의 명칭을 사용하고 w3c는 이벤트의 명칭을 사용합니다.
3. IE 이벤트 감청기에서 사용하는 것은 전역적인 이벤트 대상이고 w3c는 이벤트 대상을 매개 변수로 감청기에 전달한다.
4. 기본 이벤트 동작을 촉발하는 것을 피하기 위해 IE의 방법은 프로그래머에게 이벤트 대상의 returnValue 속성 값을false로 설정하도록 요구하는 것이고, w3c의 방법은preventDefault 방법을 실행하는 것이다.
5. IE는 이벤트 캡처 단계를 지원하지 않습니다.
6. 이벤트의 전달을 멈추려면 IE의 방법은 이벤트 대상의 cancelBubble를true로 설정하는 것이고 w3c의 방법은 실행stopPropagation 방법을 설정하는 것이다.
7. IE는 이벤트 감청기를 하나의 독립된 함수로 호출하고 w3c는 대상의 방법으로 호출한다. 이것은 i에서 이벤트 감청기에서this 키워드는 이벤트 발생 대상이 아니라 쓸모없는 전역 대상(window 대상)을 가리킨다.
8. IE는 이벤트 모니터를 사용하는 데 메모리 유출 문제가 있습니다.IE 브라우저에서 어떤 요소에 이벤트 감청기를 만들고 감청기에서 이 요소를 사용하려면 사용자가 다른 페이지로 들어가기 전에 이 감청기와 관련된 DOM 노드가 차지하는 메모리 공간이 방출되지 않습니다.
본고에서 기술한 것이 여러분의javascript 프로그램 설계에 도움이 되기를 바랍니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Javascript에서 Math.max와 Math.max.apply의 차이점과 용법 상세 설명최근에 작은 사례를 만들 때 Math를 만났어요.max.apply라는 용법은 이전에 보기 드물게 재미있게 느껴졌으니 기록해 보세요. 1Math.max 문법:Math.max(n1,n2,n3,...,nX)반환값:max(...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
