【JavaScript】Eventオブジェクト - イベント情報をコールバック関数で受け取る
JavaScriptのEventオブジェクトを解説します。
Eventオブジェクト
Eventオブジェクトはイベントの情報を表すオブジェクトです。
イベントハンドラーのコールバック関数に第１引数として渡されます。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script>PointerEvent {isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, …}output関数はコールバック関数です。
引数のevent変数でEventオブジェクトを受け取っています。
プロパティ
Eventオブジェクトはイベントに関する様々なプロパティを所有します。
target
targetプロパティはイベントが発生した要素です。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event.target);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script><button id="btn">ボタン</button>bubbles
bubblesプロパティはバブリング可否です。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event.bubbles);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script>truecancelable
cancelableプロパティはイベントがキャンセル可能可否です。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event.cancelable);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script>truetype
typeプロパティはイベント種別です。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event.type);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script>clickisTrusted
isTrustedプロパティはイベントのユーザー操作による発生可否です。
<button id="btn">ボタン</button>
<script type="text/javascript">
function output(event) {
console.log(event.isTrusted);
}
let btn = document.getElementById('btn');
btn.addEventListener('click', output);
</script>true
