요소라고
33965 단어 javascript
이벤트리스나의 登録や削除を行えmas.
EventTarget의메삭드
addEventListener - 이벤트리스나의 登録
addEventListenerの第1引数에 이벤트의 이름은,
第2引数에 이벤트発生時에実行する関数を指定する事でいベntの登録が行なえmas.
例えば、crikk의 이벤토는 以下のように登録できmas.
버튼Aを크리크스루와div要素의크리크이벤트も呼び出され마스.
<div id="outer">
<div id="inner">
<button id="buttonA">A</button>
</div>
</div>
document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner outer
第3引数としてbooleanを指定可能で、上記는 falseを指定した以下と同様입니다.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');},false);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},false);
//buttonAをクリックする => buttonA buttonA2 inner outer
第3引数としてtrueを指定すると、実行の順序が逆에 なります.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');},true);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');},true);
//buttonAをクリックする => outer inner buttonA buttonA2
이벤트리스나-が登録されていると、이벤트発生元となた要素を含む親の要素でもそのいベentが実行され마스.
そのイベントの実行順序が3つ目の引数で制御できるようになっています.
イベントの伝播은 window오브제크트로부터 イベnt発生元まで下位へ辿っていくCAPCHAFEーZ와、
イベnt発生元から上位要素へと辿ってい구바브링페즈があり마스.
つmari、「outer -> inner -> buttonA -> inner -> outer」の順序でいベントが伝播し、
前半が캐프챠페즈, 後半が바브링페즈와 ています.
引数をtrue とするとベントが実行されるため順序が逆となたというわけ입니다.
もちろん混在も可能で、次のようにすると「outer -> buttonA -> inner」と実行がされ마스.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');},true);
document.getElementById('inner').addEventListener('click',function(){console.log('inner');},false);
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => outer buttonA buttonA2 inner
イベntの伝播은 stopPropagation() 이다 止める事ができ마스.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA');});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2 inner
ただし、stopPropagation()だと同じ要素に登録したRISNA-の実行은 止められません.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA buttonA2
同じ要素のRISNAーも含め、いベntの実行を止めるには、stopImmediatePropagation()を使い마스.
document.getElementById('outer').addEventListener('click',function(){console.log('outer');});
document.getElementById('inner').addEventListener('click',function(){console.log('inner');});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.stopPropagation();});
document.getElementById('buttonA').addEventListener('click',function(){console.log('buttonA2');});
//buttonAをクリックする => buttonA
既定の動作、例えばcheckbock스크릭크시노체크を止めたい場合はpreventDefault()로 処理を停止でき마스.
<label><input id="check" type="checkbox" />Check</label>
document.getElementById('check').addEventListener('click',function(e){e.preventDefault();});
addEventListener의 第 3引数 에 는, より複雑인 OBJECKTO をOPSION として指定する事もでき 마스.
document.getElementById('outer').addEventListener('click',function(e){console.log('outer');e.preventDefault();},{
capture : true , once : true, passive :false,
});
document.getElementById('inner').addEventListener('click',function(e){console.log('inner');e.preventDefault();},{
capture : true , once : true, passive :true,
});
document.getElementById('buttonA').addEventListener('click',function(e){console.log('buttonA');e.preventDefault();},{
capture : true , once : false, passive :false,
});
//buttonAをクリックする(1回目) => outer inner (警告) buttonA
//buttonAをクリックする(2回目) => buttonA
「capture」는 第3引数에 boolean を指定したときと同じもの입니다.true의 場合に바브링 페즈로의 イベnt実行が行われmas.
「한번」은 참의 場合、이벤트의 実行を1回行うとrisna는 削除사레마스.
「passive」는trueの場合、preventDefault()がRISNA로 呼ばれるとconso-ru에 警告が出力され마스.
removeEventListener - 이벤트리스나의 削除
removeEventListenerを使うと、指定したいベntからrisnaを削除でき마스.
<div id="outer">
<div id="inner">
<button id="buttonA">A</button>
</div>
</div>
const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1);
document.getElementById('buttonA').addEventListener('click',clickListener2);
document.getElementById('buttonA').removeEventListener('click',clickListener1);
//buttonAをクリックする => buttonA2
第2引数を指定すると、CAPCHAFEーZで実行されるrisnaであるかが一致する場合にだけ削除が行われmas.
const clickListener1 = function(){console.log('buttonA1');};
const clickListener2 = function(){console.log('buttonA2');};
document.getElementById('buttonA').addEventListener('click',clickListener1,false);
document.getElementById('buttonA').addEventListener('click',clickListener2,true);
document.getElementById('buttonA').removeEventListener('click',clickListener1,false);
document.getElementById('buttonA').removeEventListener('click',clickListener2,false);
//buttonAをクリックする => buttonA2
Reference
이 문제에 관하여(요소라고), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/portaloo/element-3ooc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)