JavaScript のイベント(Events)

イベントは、ユーザーやブラウザ自体によってトリガーされるブラウザ内で発生する操作です。

以下は、ウェブサイトで発生する可能性のある一般的なイベントの例です：

• ページが読み込まれました

• ユーザーがボタンをクリックしました

• ユーザーがドキュメントをスクロールしました

• ユーザーがブラウザのサイズを変更しました

• ユーザーがマウスを移動しました

• ユーザーがフォームを提出しました

• ユーザーがキーボードのキーを押しました

• HTML入力フィールドが変更されました

各イベントには、イベントハンドラそのイベントハンドラコードブロック（通常はユーザー定義のJavaScript関数）は、イベントがトリガーされたときに実行されます。

イベントについて学ぶことで、最終ユーザーによりインタラクティブなWebエクスペリエンスを提供できます。

簡単な例

イベントがトリガーされたとき、例えばユーザーがボタンをクリックしたときに、JavaScriptのコードブロックを実行できます。

以下の例では、ボタンを押すと呼び出される関数があります：showDate()関数：

<button onclick="showDate()">Click me</button>

JavaScript showDate()以下のように定義されています：

<script>
function showDate() {
　　　document.getElementById("output").innerHTML = new Date();
}
</script>

イベントの使用方法

イベントを要素に割り当てる方法は3つあります。関連するイベントがトリガーされたときに実行されるようにします：

• インラインイベントハンドラ

• 事件处理程序属性

• イベントリスナー

以下の3つの方法をすべて紹介し、イベントをトリガーする方法について熟知してもらいます。

インラインイベントハンドラ属性

イベントをHTML要素に割り当てるには、以下のように使用できます。HTMLイベント属性。

以下示例中，当用户单击<p>元素时，其内容会更改：

<p onclick="this.innerHTML = 'Hello world'">单击此处更改此文本</p>

以下示例中，当用户单击<p>元素时，将调用一个函数：

<p onclick="changeText(this)">单击此处更改此文本</p>
<script>
function changeText(self) {
　　　self.innerHTML = "Hello world";
}
</script>

以下示例中，我们有一个按钮，按下该按钮将使背景变为随机颜色：

<button onclick="bgChange()">Click me</button>
<script>
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}
</script>

内联事件处理程序是开始理解事件的简单方法，但通常不应将其用于测试和教育目的之外。

事件处理程序属性

内联事件处理程序的下一步是事件处理程序属性。这与内联处理程序非常相似，除了我们在JavaScript中设置元素的属性而不是HTML中的属性。

以下示例中，我们将为id为“para”的HTML元素分配onclick事件：

let para = document.querySelector("#para");
para.onclick = function() {
　　　this.innerHTML = "Hello world";
}

我们还可以将事件处理程序属性设置为等于命名函数名称：

let para = document.querySelector("#para");
para.onclick = changeText;
function changeText() {
　　　para.innerHTML = "Hello world";
}

在上面的示例中，将名为changeText的函数分配给具有id="para"的HTML元素。

单击该元素时将执行该功能。

以下示例中，我们有一个按钮，按下该按钮将使背景变为随机颜色：

let btn = document.querySelector("button");
btn.onclick = bgChange;
function bgChange() {
　　　let color = "rgb("　+　random(255)　+　","　+　random(255)　+　","　+　random(255)　+　")";
　　　document.body.style.backgroundColor = color;
}

注意：イベントハンドラ従いませんほとんどのJavaScriptコードが従うcamelCase（キャメルケース）命名規約です。注意、コードはonclick、onClick。

onfocusとonblurイベント

onfocus 要素がフォーカスを取得したときにこのイベントがトリガーされます。

onblur 要素がフォーカスを失ったときにこのイベントがトリガーされます。

<input　type="text"　onfocus="func1(this)"　onblur="func2(this)

onchangeイベント

onchange 要素の値が変更されたときにこのイベントがトリガーされます。

<input　type="text"　onchange="myFunc(this)"　value="Hello">

onmouseoverとonmouseoutイベント

onmouseover 指器デバイス（主にマウス）を要素またはその子要素に移動したときに、このイベントがトリガーされます。

onmouseout 指器デバイス（主にマウス）を要素またはその子要素から離れたときに、このイベントがトリガーされます。

さらに詳しく

HTML 参考：HTMLイベント属性 参考マニュアル

JavaScript 参考：HTML DOMイベントオブジェクト 参考マニュアル