イベントの設定について
プロパティに設定する方法
*イベント登録は一つのみ
button.onclick = () => {
alert('clicked!');
}
イベントを無効にしたければnullを入れる
button.onclick = null;
HTMLタグに属性をつけて設定する
*コードの可読性が悪くなるのであまり使用しない方が良い
関数を入れるのではなく処理の内容を書く
<button onclick="alert('clicked!')">click me</button>
setAttributeでも設定できる
button.setAttribute('onclick', 'console.log("clicked")');
addEventListenerメソッドで設定
*複数のイベントが登録可能
button.addEventListener('click', () => {
console.log('clicked!');
});
removeEventListenerでイベントを無効にする
登録した関数オブジェクトを指定する必要がある
const eventFunc = () => {
console.log('clicked');
}
button.addEventListener('click',eventFunc);
button.removeEventListener('click',eventFunc);
どれを使ったらいいの？
基本的にはどちらでも良いが統一させた方が良い
イベントオブジェクトとは
イベントに対して関数を呼び出すのはブラウザであり、 ブラウザがイベントに対する情報をオブジェクトにして渡してくれる。 これをイベントオブジェクトという。
イベントオブジェクトの受け取り方
プロパティ(第一引数で受け取る)
button.onclick = (event) => {console.log(event)}
HTMLタグ埋め込み(eventというプロパティで受け取る)
<button onclick="console.log(event)">click me!</button>
addEventListener(第一引数で受け取る)
button.addEventListener('click',(event)=>{console.log(event)});
イベントハンドラー内のthis
イベントハンドラーとは addEventListenerなどに渡す関数の事
thisはイベントハンドラーが登録されている要素を指し示す
<例>↓以下のthisはbuttonを指し示す
button.addEventListener('click',function(){console.log(this)});
button.onclick = function(){console.log(this)};
イベントハンドラーのthisとcurrentTargetプロパティは同じ
アロー関数はcurrentTargetで取れば良い
button.addEventListener('click',(event)=>{console.log(event.currentTarget)});
button.onclick = (event)=>{console.log(event.currentTarget)};
イベントハンドラーのthisを固定したい時、引数を渡したいときはbindを使う
button.addEventListener('click',function(a,b,event){
hogehoge....
}.bind({},'a','b'));
バブリングとは
イベントが発火したタイミングでそのターゲットエレメントからwindowエレメントまでについているイベントを実行すること
<例>↓AだけでなくABCD全てが出力される
input.addEventListener('input',()=>{console.log('A')});
document.body.addEventListener('input',()=>{console.log('B')});
document.addEventListener('input',()=>{console.log('C')});
window.addEventListener('input',()=>{console.log('D')});
キャプチャリングとは
バブリングの逆であり、ターゲットのイベントハンドラーが実行される前にwindowからイベントを実行する
キャプチャリングの設定方法
- addEventListenerを使う
- 第３引数のオプションにcapture:trueを設定
<例>↓windowから下がってくるのでDCBAとなる
input.addEventListener(
'input',
()=>{console.log('A')},
{capture: true}
);
document.body.addEventListener(
'input',
()=>{console.log('B')},
{capture: true}
);
document.addEventListener(
'input',
()=>{console.log('C')},
{capture: true}
);
window.addEventListener(
'input',
()=>{console.log('D')},
{capture: true}
);
バブリングとキャプチャリングを止める
stopPropagationメソッド
バブリングとキャプチャリングは止めるが同一要素に設定されたイベントは止めない
<例>↓A,Eで終わる
input.addEventListener('input',(event)=>{
event.stopPropagation();
console.log('A')
});
input.addEventListener('input',()=>{console.log('E')})
document.body.addEventListener('input',()=>{console.log('B')});
document.addEventListener('input',()=>{console.log('C')});
window.addEventListener('input',()=>{console.log('D')});
stopImmediatePropagationメソッド
同一要素に設定されたイベントもとめる
<例>↓Aで終わる
input.addEventListener('input',(event)=>{
event.stopImmediatePropagation();
console.log('A')
});
input.addEventListener('input',()=>{console.log('E')})
document.body.addEventListener('input',()=>{console.log('B')});
document.addEventListener('input',()=>{console.log('C')});
window.addEventListener('input',()=>{console.log('D')});
デフォルトの処理を止める
「aタグをクリックすると指定されたURLに遷移する」 「inputタグ内でキーダウンすると文字が入力される」などの処理の事
preventDefaultメソッド
<例>↓クリックで遷移しなくなる
html
<a href="<https://google.com>">google</a>
js