index.mdx

title	イベント

import handleClickVideo from "./handle-click.mp4"; import projectMovieForDom from "./project-movie-for-dom.mp4";

値としての関数

{/* prettier-ignore */} JavaScriptでは、関数も値の一種です。したがって、他の値と同じように、変数に代入したり、関数の引数や戻り値として使用したりすることができます。

function greet() {
  document.write("Hello World");
}

const func = greet;
func();

上の例では、const func = greet;の行で変数funcに関数greetを代入しています。関数を値として扱うときは、関数呼び出し式の括弧は使用しません。これにより、関数が代入された変数を経由してその関数を実行できます。

イベントハンドラ

{/* prettier-ignore */} オブジェクトのプロパティとして関数を利用することもできます。document.getElementByIdが返すオブジェクトのonclickプロパティには、要素がクリックされたときに実行される関数を指定できます。

ボタンのクリック、フォームへの入力、ページの読み込みなど、Webページ上で発生するあらゆるアクションを総称してイベントと呼びます。このようなイベントの処理を行うのがイベントハンドラで、onclick関数はその一例です。

<button id="greet-button" type="button">クリック</button>

function clicked() {
  document.write("Hello World");
}

const greetButton = document.getElementById("greet-button");
greetButton.onclick = clicked;

この例では、HTML要素のid属性にgreet-buttonが指定されている HTML要素を表すオブジェクトのonclickプロパティに対し、関数clickedを代入しています。これにより、ボタンがクリックされたとき、clicked関数が実行されるようになります。