More than 1 year has passed since last update.

JavaScriptを初めて学ぶ6

Posted at 2023-03-26

ーイベント〜ブラウザ上でユーザーが行ういろんな動作のこと
ex) マウスをクリック、ボタンを押す、、、

ーイベントハンドラ〜イベント発生をきっかけに何らかの処理を実行する
ex)　マウスでボタンをクリック→Hello World!がconsoleに出力

・プロパティを使って、イベントとイベントハンドラを関連つける
→ オブジェクト名.onイベント名=()=>{
イベントハンドラ
};

例えば

...
<body>

    <input id="button" type="button" value="click!">
    <script src="main.js"></script>
</body>

...
const e = document.getElementById('button'); 
e.onclick=() =>{ //クリックしたらeゲットして{}内を実行
    console.log('Clicked.');
}, false;

・loadイベント
関連付けられた要素を読み終わった時に発生するイベント。画像を含む、ページが完全に読み終わったことを検知して、何らかの処理を実行したいときに使う

...
<body>

    <script src="main.js"></script>
</body>

window.onload=()=>{ //Windowのページが完全に読み終わったら実行
    console.log('loadイベント!');
}

広告とか出てくるのはこれなのかな？

・addEventListener
要素オブジェクト.addEventListener(イベントの種類, ()=>{
イベントハンドラ
}, false);

...
<body>
    <input id="button" type="button" value="クリック">
    <script src="main.js"></script>
</body>

const e=document.getElementById('button');
e.addEventListener('click', ()=>{ //('click')はイベントの種類
    console.log('Clicked!')
}, false);