目次
1. イベントとは何ですか?
イベントは、プログラミングしているシステム内で発生するものです。システムは、イベントが発生すると何らかのシグナルを生成 (または「トリガー」) し、イベントの発生時に自動的に何らかのアクションを実行する (つまり、何らかのコードを実行する) メカニズムを提供します。イベントはブラウザ ウィンドウ内で発生し、ブラウザ ウィンドウ内に存在する特定のアイテムに関連付けられる傾向があります。これは、単一の要素、要素のグループ、現在のタブに読み込まれた HTML ドキュメント、またはブラウザ ウィンドウ全体である可能性があります。さまざまな種類のイベントが発生する可能性があります。
例えば：
- ユーザーは要素を選択、クリック、または要素の上にマウスを置きます。
- ユーザーがキーボードのキーを押します。
- ユーザーがブラウザ ウィンドウのサイズを変更するか、ブラウザ ウィンドウを閉じます。
- Web ページの読み込みが完了します。
- フォームが送信されます。
- ビデオが再生、一時停止、または終了します。
- エラーが発生しました。
- ここ (および MDN イベント リファレンス ドキュメント) からわかるように、起動できるイベントはかなりの数があります。
イベントに反応するには、イベント ハンドラーをイベントにアタッチします。これは、イベントの発生時に実行されるコードのブロック (通常はプログラマーとして作成した JavaScript 関数) です。このようなコード ブロックがイベントに応答して実行されるように定義されている場合、イベント ハンドラーを登録していると言います。イベント ハンドラーはイベント リスナーと呼ばれることもあることに注意してください。厳密に言えば、このコード部分はイベントのリッスンと処理の両方を行いますが、ここでの目的では 2 つの名前は同じです。リスナーはイベントの発生を監視し、イベントが発生するとハンドラーが応答します。
注: Web イベントは JavaScript 言語の中核ではありません。Web イベントはブラウザーに組み込まれた API として定義されます。
例: クリックイベントの処理
この例では、ページにボタン要素があります。
<button>改变颜色</button>
次に、JavaScript をいくつか用意します。これについては、次のセクションで詳しく説明しますが、ここでは、イベント ハンドラーをボタンの「クリック」イベントに追加します。イベント ハンドラーは、ページの背景をランダムな色に設定することでそのイベントに反応します。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.addEventListener("click", () => {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
});
2. addEventListener() を使用する
前の例で見たように、イベントを起動できるオブジェクトには addEventListener() メソッドがあり、これがイベント ハンドラーを追加するための推奨メカニズムです。
前の例のコードを詳しく見てみましょう。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.addEventListener("click", () => {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
});
ユーザーがボタンをクリックすると、HTML ボタン要素によってイベントが発生します。したがって、ここで呼び出す addEventListener() 関数を定義します。2 つのパラメータを渡します。
文字列「click」は、クリック イベントをリッスンすることを示します。ボタンは、ユーザーがボタン上にマウスを移動したとき (「mouseover」イベント)、またはユーザーがキーを押してボタンがフォーカスされたとき (「keydown」イベント) など、他の多くのイベントをトリガーできます。
イベントの発生時に呼び出される関数。この例では、関数はランダムな RGB カラーを生成し、ページ本文の背景色をその色に設定します。
次のように、ハンドラー関数を単一の名前付き関数として持つことも可能です。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
function changeBackground() {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
}
btn.addEventListener("click", changeBackground);
他のイベントを聞く
ボタン要素によってトリガーできるさまざまなイベントが多数あります。実験をしてみましょう。
まず、random-color-addeventlistener.html のコピーをローカルに作成し、ブラウザで開きます。これは、すでに試した単純なランダム カラーの例の単なるコピーです。ここで、クリックを次の異なる値に 1 つずつ変更して、例の結果を観察してみてください。
フォーカスとブラー: ボタンにフォーカスがあるとき、またはフォーカスが外れているときに色が変わります。Tab キーを押してボタンにフォーカスし、もう一度押すとボタンのフォーカスが外れます。これらのイベントは通常、フォーカスされたときにフォーム フィールドに入力された情報を表示したり、フォーム フィールドに不正な値が入力されたときにエラー メッセージを表示したりするために使用されます。
dblclick: ボタンをダブルクリックした場合にのみ色が変わります。
Mouseover と Mouseout: マウス ポインタがボタン上にあるとき、またはポインタがボタンの外に移動すると、それぞれ色が変わります。
click (クリック イベント) などの一部のイベントは、ほぼすべての要素で使用できます。他のイベントはより具体的で、特定の状況でのみ役立ちます。たとえば、play イベントは video 要素などの特定の要素に対してのみ機能します。
リスナーを削除する
addEventListener() を使用してイベント ハンドラーを追加した場合は、removeEventListener() メソッドを使用して再度削除できます。たとえば、これにより、changeBackground() イベント ハンドラーが削除されます。
btn.removeEventListener("click", changeBackground);
イベント ハンドラーは、AbortSignal を addEventListener() に渡してから、AbortSignal を所有するコントローラーで abort() を呼び出すことによっても削除できます。たとえば、AbortSignal を使用して削除できるイベント ハンドラーを追加するには、次の手順を実行します。
const controller = new AbortController();
btn.addEventListener("click",
() => {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
},
{
signal: controller.signal } // 向该处理器传递 AbortSignal
);
上記のコードで作成されたイベント ハンドラーは、次のように削除できます。
controller.abort(); // 移除任何/所有与该控制器相关的事件处理器
単純な小規模なプログラムの場合、古い未使用のイベント ハンドラーをクリーンアップする必要はありませんが、より大規模で複雑なプログラムの場合は、効率を向上させることができます。さらに、イベント ハンドラーを削除する機能により、同じボタンにさまざまな状況で異なるアクションを実行させることができます。必要なのは、ハンドラーを追加または削除することだけです。
単一のイベントに複数のリスナーを追加する
addEventListener() を複数回呼び出して、それぞれが異なるハンドラーを提供することで、イベントに複数のハンドラーを設定できます。
myElement.addEventListener("click", functionA);
myElement.addEventListener("click", functionB);
ボタンをクリックすると、すべてのハンドラー関数が実行されます。
もっと詳しく知る
addEventListener() には、さらに多くの強力な機能とオプションがあります。
これらはこの記事の範囲をやや超えています。詳細については、addEventListenerおよびRemoveEventListener のリファレンス ページを参照してください。
3. その他のイベント リスナー メカニズム
イベント ハンドラーを登録するには、addEventListener() を使用することをお勧めします。これは最も強力な方法であり、より複雑なプログラムで最適に拡張できます。ただし、イベント ハンドラーを登録するには、イベント ハンドラー属性とインライン イベント ハンドラーという 2 つの方法があることはご存知でしょう。
イベント ハンドラーのプロパティ
イベントをトリガーできるオブジェクト (ボタンなど) には、通常、名前が on の後にイベント名が続くプロパティもあります。たとえば、要素には onclick 属性があります。これをイベントハンドラ属性と呼びます。イベントをリッスンするために、このプロパティにハンドラー関数を割り当てることができます。
たとえば、ランダムな色の例を次のように書き直すことができます。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
btn.onclick = () => {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
};
ハンドラー属性を名前付き関数に割り当てることもできます。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
function bgChange() {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
}
btn.onclick = bgChange;
イベント ハンドラー プロパティの場合、1 つのイベントに複数のハンドラーを追加することはできません。たとえば、2 番目の引数に異なる関数を指定して、要素に対して addEventListener('click', handler) を複数回呼び出すことができます。
element.addEventListener("click", function1);
element.addEventListener("click", function2);
これは、イベント ハンドラー プロパティでは不可能です。後続の試行によって、以前に設定されたプロパティが上書きされるためです。
element.onclick = function1;
element.onclick = function2;
インライン イベント ハンドラー - 使用しないでください
コード内でもこのフォームが表示される場合があります。
<button onclick="bgChange()">按下我</button>
function bgChange() {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
document.body.style.backgroundColor = rndCol;
}
Web 上で見られるイベント ハンドラーを登録する最も初期の方法には、例に示すように、イベント ハンドラー HTML 属性 (またはインライン イベント ハンドラー) が含まれていました。プロパティ値は、イベントの発生時に実行する JavaScript コードです。上の例では、同じページの script 要素内で定義された関数を呼び出していますが、次のように属性内に JavaScript を直接挿入することもできます。
<button onclick="alert('你好，这是来自旧式事件处理器的一条消息');">
按下我
</button>
多くのイベント ハンドラー属性に相当する HTML 属性が見つかりますが、これらの属性は使用しないでください。これらの属性は悪い習慣と考えられています。非常に高速に何かを実行している場合、イベント ハンドラー プロパティの使用は簡単に思えるかもしれませんが、すぐに管理できなくなり非効率になる可能性があります。
まず、HTML と JavaScript を混在させるのは得策ではありません。読みにくくなるからです。JavaScript を分離することをお勧めします。JavaScript が別のファイルにある場合は、複数の HTML ドキュメントに適用できます。
単一のファイルであっても、イベント ハンドラーをインライン化することはお勧めできません。ボタンが 1 つであれば問題ありませんが、ボタンが 100 個ある場合はどうなるでしょうか。ファイルに 100 個の属性を追加する必要があるため、メンテナンスはすぐに悪夢に変わります。JavaScript を使用すると、次のような方法で、ボタンの数に関係なく、ページ上のすべてのボタンにイベント ハンドラーを簡単に追加できます。
const buttons = document.querySelectorAll("button");
for (const button of buttons) {
button.addEventListener("click", bgChange);
}
最後に、多くの一般的なサーバー構成では、セキュリティ対策としてインライン JavaScript が禁止されています。
HTML イベント ハンドラー属性は決して使用しないでください。これらは廃止されたものであり、使用することはお勧めできません。
4. イベントオブジェクト
イベント ハンドラー内で、event、evt、e などの固定名のパラメーターが表示されることがあります。これはイベント オブジェクトと呼ばれ、追加の機能と情報を提供するためにイベント ハンドラー関数に自動的に渡されます。たとえば、ランダムな色の例を少し書き直してみましょう。
const btn = document.querySelector("button");
function random(number) {
return Math.floor(Math.random() * (number + 1));
}
function bgChange(e) {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
e.target.style.backgroundColor = rndCol;
console.log(e);
}
btn.addEventListener("click", bgChange);
ここでは、関数にイベント オブジェクト e が含まれており、関数内でボタン自体を参照する e.target に背景色のスタイルを設定していることがわかります。イベント オブジェクト e の target プロパティは常に、イベントが発生したばかりの要素への参照です。したがって、この例では、ページではなくボタンにランダムな背景色を設定します。
注:event.target の使用例については、「イベント委任」を参照してください。
注: イベント オブジェクトには任意の名前を使用できます。名前を選択するだけで、イベント ハンドラーでその名前を参照できます。開発者は、シンプルで覚えやすいため、e/evt/event を最も頻繁に使用します。少なくとも自分自身に対しては、一貫性を保つことは常に良いことです。可能であれば、他の人にも同じようにしてください。
イベントオブジェクトの追加プロパティ
ほとんどのイベント オブジェクトには、プロパティとメソッドの標準セットがあります。完全なリストについては、「Event オブジェクト リファレンス」を参照してください。
一部のイベント オブジェクトには、その特定の種類のイベントに関連する追加のプロパティが追加されます。たとえば、keydown イベントは、ユーザーがキーを押したときに発生します。そのイベント オブジェクトは KeyboardEvent です。これは、どのキーが押されたかを示す key プロパティを持つ特殊な Event オブジェクトです。
<input id="textBox" type="text" />
<div id="output"></div>
const textBox = document.querySelector("#textBox");
const output = document.querySelector("#output");
textBox.addEventListener("keydown", (event) => {
output.textContent = `You pressed "${
event.key}".`;
});
5. デフォルトの動作を防止する
場合によっては、イベントがデフォルトの動作を実行しないようにしたい状況に遭遇することがあります。最も一般的な例は、カスタム登録フォームなどの Web フォームです。詳細を入力して送信ボタンを押すと、自然な動作として、処理のためにサーバー上の指定されたページにデータが送信され、ブラウザーはある種の「成功メッセージ」ページ (または、その他は指定されていません）。
問題は、ユーザーがデータを正しく送信しないときに始まります。開発者としては、サーバーへの情報の送信を停止し、何が問題で、それを修正するには何を行う必要があるかを示すエラー メッセージをユーザーに提供したいと考えます。一部のブラウザーは自動フォーム データ検証機能をサポートしていますが、多くのブラウザーはサポートしていないため、これらの機能に依存せず、独自の検証チェックを実装することをお勧めします。簡単な例を見てみましょう。
まず、姓名を入力する必要がある単純な HTML フォームを次に示します。
<form>
<div>
<label for="fname">First name: </label>
<input id="fname" type="text" />
</div>
<div>
<label for="lname">Last name: </label>
<input id="lname" type="text" />
</div>
<div>
<input id="submit" type="submit" />
</div>
</form>
<p></p>
次に JavaScript コードです。ここでは、送信イベント (フォームの送信時に発生します) のハンドラーに非常に簡単なチェックを実装して、テキスト フィールドが空かどうかをテストします。その場合は、イベント オブジェクトでPreventDefault() 関数を呼び出し、フォームの送信を停止して、フォームの下の段落にエラー メッセージを表示して、何が問題だったかをユーザーに伝えます。
const form = document.querySelector("form");
const fname = document.getElementById("fname");
const lname = document.getElementById("lname");
const para = document.querySelector("p");
form.addEventListener("submit", (e) => {
if (fname.value === "" || lname.value === "") {
e.preventDefault();
para.textContent = "You need to fill in both names!";
}
});
明らかに、これは非常に弱いフォーム検証です。たとえば、ユーザーがスペースまたは数字を入力してフォームを送信した場合、フォーム検証によってユーザーの送信は妨げられませんが、デモとしては十分です。出力は次のとおりです。
6. イベントバブリング
イベント バブリングは、ブラウザがネストされた要素のイベントを処理する方法を説明します。
親要素にリスナーを設定する
次のような Web ページについて考えてみましょう。
<div id="container">
<button>点我！</button>
</div>
<pre id="output"></pre>
ここに他の要素 div 内のボタンがあります。この div 要素が、そこに含まれる要素の親であるとします。親要素にクリック イベント ハンドラーをアタッチしてボタンをクリックするとどうなるでしょうか?
const output = document.querySelector("#output");
function handleClick(e) {
output.textContent += `你在 ${
e.currentTarget.tagName} 元素上进行了点击\n`;
}
const container = document.querySelector("#container");
container.addEventListener("click", handleClick);
ユーザーがボタンをクリックすると、親要素で click イベントが発生することがわかります。
DIV 要素をクリックしました
これは当然のことです。ボタンは
バブルの例
ボタンとその親要素の両方にイベント ハンドラーを追加するとどうなりますか?
<body>
<div id="container">
<button>点我！</button>
</div>
<pre id="output"></pre>
</body>
クリック イベント ハンドラーをボタン、その親 div、およびそれを含む body 要素に追加してみましょう。
const output = document.querySelector("#output");
function handleClick(e) {
output.textContent += `你在 ${
e.currentTarget.tagName} 元素上进行了点击\n`;
}
const container = document.querySelector("#container");
const button = document.querySelector("button");
document.body.addEventListener("click", handleClick);
container.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);
ユーザーがボタンをクリックすると、3 つの要素すべてがクリック イベントを起動することがわかります。
BUTTON 要素をクリックした
DIV 要素をクリックした
BODY 要素をクリックした
この場合：
- まずボタンのクリックイベントを発生させます
- 次にボタンの親要素（div要素）
- 次にdivの親要素（body要素）
これは次のように説明できます。イベントは、クリックされた最も内側の要素から発生します。
この動作は役立つ場合もありますが、予期しない問題を引き起こす可能性もあります。次の章では、それが引き起こす問題を確認し、解決策を見つけます。
ビデオプレーヤーの例
この例では、ページにビデオが含まれていますが、最初は非表示になっており、「ビデオを表示」というラベルのボタンもあります。次のようなやり取りをしたいと考えています。
ユーザーが「ビデオを表示」ボタンをクリックすると、ビデオを含むボックスが表示されますが、ビデオの再生は開始されません。
ユーザーがビデオをクリックすると、ビデオの再生が開始されます。
ユーザーがボックス内のビデオの外側をクリックすると、ボックスが非表示になります。
HTML コードは次のようになります。
<button>显示视频</button>
<div class="hidden">
<video>
<source
src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
type="video/webm" />
<p>
你的浏览器不支持 HTML 视频，这里有视频的<a href="rabbit320.mp4"
>替代链接</a
>。
</p>
</video>
</div>
を含む：
- ボタン要素
- 最初に class="hidden" 属性を含む div 要素
- div 要素内にネストされた video 要素
CSS を使用して、「hidden」クラスで要素を非表示にします。
JavaScript コードは次のようになります。
const btn = document.querySelector("button");
const box = document.querySelector("div");
const video = document.querySelector("video");
btn.addEventListener("click", () => box.classList.remove("hidden"));
video.addEventListener("click", () => video.play());
box.addEventListener("click", () => box.classList.add("hidden"));
3 つの「クリック」イベント ハンドラーが追加されます。
- ボタン上の 1 つはビデオを含む div を表示します
- ビデオの 1 つ、ビデオの再生を開始します
- div に 1 つ、ビデオを非表示にするために
これがどのように機能するかを見てみましょう。
ボタンをクリックすると、ボックスとそこに含まれるビデオの両方が表示されることがわかります。しかし、ビデオをクリックすると、ビデオの再生が始まりますが、ボックスは再び非表示になります。
ビデオは div 内 (の一部) にあるため、ビデオをクリックすると 2 つのイベント ハンドラーが同時に実行され、この動作が発生します。
stopPropagation() を使用して問題を解決してください
前のセクションで見たように、イベントのバブリングによって問題が発生することがありますが、これらの問題を防ぐ方法があります。イベント オブジェクトには、stopPropagation() と呼ばれる使用可能な関数があり、イベント ハンドラー内で呼び出されると、イベントが他の要素に伝播されるのを防ぎます。
JavaScript コードを変更することで、現在の問題を解決できます。
const btn = document.querySelector("button");
const box = document.querySelector("div");
const video = document.querySelector("video");
btn.addEventListener("click", () => box.classList.remove("hidden"));
video.addEventListener("click", (event) => {
event.stopPropagation();
video.play();
});
box.addEventListener("click", () => box.classList.add("hidden"));
ここで行っていることは、video 要素の「click」イベントのハンドラー内のイベント オブジェクトに対して stopPropagation() を呼び出していることです。これにより、イベントがボックスに渡されなくなります。次に、ボタンをクリックしてからビデオをクリックしてみてください。
イベントキャプチャ
イベント伝播の別の形式はイベント キャプチャです。これはイベント バブリングに似ていますが、順序が逆です。最初に最も内側のターゲット要素でイベントが発生し、次にネストされていない要素でイベントが発生するのではなく、最初に最も小さいネスト要素で発生し、ターゲットに到達するまでさらにネストされた要素でイベントが発生します。 。
イベント キャプチャはデフォルトでは無効になっています。addEventListener() のキャプチャ オプションで有効にする必要があります。
次の例は、キャプチャ オプションが使用されていることを除いて、前に示したバブリングの例に似ています。
<body>
<div id="container">
<button>点我！</button>
</div>
<pre id="output"></pre>
</body>
const output = document.querySelector("#output");
function handleClick(e) {
output.textContent += `你在 ${
e.currentTarget.tagName} 元素上进行了点击\n`;
}
const container = document.querySelector("#container");
const button = document.querySelector("button");
document.body.addEventListener("click", handleClick, {
capture: true });
container.addEventListener("click", handleClick, {
capture: true });
button.addEventListener("click", handleClick);
この場合、メッセージが表示される順序は逆になります。最初に body イベント ハンドラーが起動し、次に div が起動し、最後にボタンが起動します。
BODY 要素をクリックした
DIV 要素をクリックし
た BUTTON 要素をクリックした
キャプチャとバブリングを併用する理由は何ですか? ブラウザの相互互換性が現在よりはるかに低かった古き良き時代には、Netscape はイベント キャプチャのみを使用し、Internet Explorer はイベント バブリングのみを使用していました。W3C が動作を標準化し、合意に達することを決定したとき、両方の動作を含むこのシステムに落ち着きました。これが最新のブラウザに実装されています。
デフォルトでは、ほとんどすべてのイベント ハンドラーがバブリング フェーズ中に登録されますが、ほとんどの場合、これが理にかなっています。
7. イベントの委任
前のセクションでは、イベントのバブリングによって引き起こされる問題とその修正方法について説明しました。ただし、イベントのバブリングは煩わしいだけではなく、非常に便利な場合もあります。特に、イベントの委任が可能になります。このアプローチでは、ユーザーが多数の子要素のいずれかを操作するときにコードを実行したい場合、親要素にイベント リスナーを設定し、イベント リスナーに発生するイベントを、親要素の代わりに親要素にバブルアップさせます。各子要素にイベント リスナーを個別に設定する必要があります。
最初の例に戻りましょう。ユーザーがボタンをクリックすると、ページ全体の背景色が設定されます。代わりに、ページが 16 の領域に分割されており、ユーザーが各領域をクリックしたときに各領域をランダムな色に設定したいとします。
HTML コードは次のとおりです。
<div id="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
各領域のサイズと位置を設定するための CSS コードがいくつかあります。
.tile {
height: 100px;
width: 25%;
float: left;
}
JavaScript コードでは、クリック イベント ハンドラーを各領域に追加します。ただし、より簡単で効率的なオプションは、親ノードにクリック イベント ハンドラーを設定し、イベント バブリングを利用して、ユーザーが各領域をクリックしたときにハンドラーが確実に実行されるようにすることです。
function random(number) {
return Math.floor(Math.random() * number);
}
function bgChange() {
const rndCol = `rgb(${
random(255)}, ${
random(255)}, ${
random(255)})`;
return rndCol;
}
const container = document.querySelector("#container");
container.addEventListener("click", (event) => {
event.target.style.backgroundColor = bgChange();
});
注: この例では、event.target を使用してイベントのターゲット要素 (つまり、最も内側の要素) を取得します。このイベントを処理する要素 (この例ではコンテナ) にアクセスしたい場合は、event.currentTarget を使用できます。
8. 包括的な例
例1
次のコードは、ボタンをクリックするとボタン内のテキストを変更し、再度クリックすると元のテキストに戻します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 1</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
button {
display: block;
margin: 20px 0 20px 20px;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
</section>
<button class="off">按钮</button>
<script>
const btn = document.querySelector('.off');
btn.addEventListener("click",()=>btn.innerText = "按钮" == btn.innerText ? "这是改变文字后的按钮" : "按钮");
</script>
</body>
</html>
例 2
キーボードの 4 つの WSAD キーを押すことで、それぞれ円の上下左右の動きを制御します。円は関数drawCircle()を使用して描画されます。この関数は次のパラメータを入力として受け取ります。
- x - 円の x 座標。
- y - 円の y 座標。
- サイズ - 円の半径。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 2</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
canvas {
border: 1px solid black;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
</section>
<canvas width="480" height="320" tabindex="0">
</canvas>
<script>
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
function drawCircle(x, y, size) {
ctx.fillStyle = 'white';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.fillStyle = 'black';
ctx.arc(x, y, size, 0, 2 * Math.PI);
ctx.fill();
}
let x = 50;
let y = 50;
const size = 30;
drawCircle(x, y, size);
// Add your code here
canvas.addEventListener("keypress",(e)=>{
if(e.keyCode==65||e.keyCode==97){
//A
x=x-1;
}else if(e.keyCode==87||e.keyCode==119){
//w
y=y-1;
}else if(e.keyCode==83||e.keyCode==115){
//S
y=y+1;
}else if(e.keyCode==68||e.keyCode==100){
//D
x=x+1;
}
drawCircle(x, y, size);
});
</script>
</body>
</html>
例 3
イベント リスナーはボタンの親要素 ( div class="button-bar") に設定する必要があります。イベント リスナーは、任意のボタンをクリックして呼び出されると、div タグの背景をボタンの data-color 属性の色に設定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Events: Task 3</title>
<style>
p {
color: purple;
margin: 0.5em 0;
}
* {
box-sizing: border-box;
}
button {
display: block;
margin: 20px 0 20px 20px;
}
.button-bar {
padding: 20px 0;
}
</style>
<link rel="stylesheet" href="../styles.css" />
</head>
<body>
<section class="preview">
</section>
<div class="button-bar">
<button data-color="red">Red</button>
<button data-color="yellow">Yellow</button>
<button data-color="green">Green</button>
<button data-color="purple">Purple</button>
</div>
<script>
const buttonBar = document.querySelector('.button-bar');
buttonBar.addEventListener("click",(e)=>{
buttonBar.style.backgroundColor = e.target.getAttribute("data-color");
});
</script>
</body>
</html>
参考：