diff options
Diffstat (limited to 'files/ja/orphaned/web/guide/events/event_handlers/index.html')
| -rw-r--r-- | files/ja/orphaned/web/guide/events/event_handlers/index.html | 173 |
1 files changed, 173 insertions, 0 deletions
diff --git a/files/ja/orphaned/web/guide/events/event_handlers/index.html b/files/ja/orphaned/web/guide/events/event_handlers/index.html new file mode 100644 index 0000000000..7cdd63d81e --- /dev/null +++ b/files/ja/orphaned/web/guide/events/event_handlers/index.html @@ -0,0 +1,173 @@ +--- +title: DOM onevent ハンドラー +slug: orphaned/Web/Guide/Events/Event_handlers +tags: + - Beginner + - DOM + - DOM Beginner + - NeedsBeginnerUpdate + - NeedsUpdate +translation_of: Web/Guide/Events/Event_handlers +original_slug: Web/Guide/Events/Event_handlers +--- +<p><span class="seoSummary">ウェブプラットフォームでは、<a href="/ja/docs/Web/Events">DOM イベント</a>の通知を受け取るための方法をいくつか提供しています。よく使われる方法は2つあり、 {{domxref("EventTarget.addEventListener", "addEventListener()")}} と、特定の <code>on<em>event</em></code> ハンドラーです。</span>このページでは、後者がどのように機能するのかについて注目します。</p> + +<h2 id="Registering_onevent_handlers" name="Registering_onevent_handlers">onevent ハンドラーの登録</h2> + +<p><strong><code>on<em>event</em></code></strong> ハンドラーは特定の DOM 要素のプロパティで、その要素がイベントに対してどのように反応するかを管理します。要素には、対話的なもの (リンク、ボタン、画像、フォームなど) と対話的ではないもの (基本の <code><body></code> 要素など) があります。イベントとは、以下のようなアクションのことです。</p> + +<ul> + <li>クリックされた</li> + <li>キーの押下が検出された</li> + <li>フォーカスを受け取った</li> +</ul> + +<p><code>on<em>event</em></code> ハンドラーは通常、<code>on<em>click</em></code>, <code>on<em>keypress</em></code>, <code>on<em>focus</em></code> など、反応するイベントに従って名前が付けられています。</p> + +<p><code>on<em><…></em></code> イベントハンドラーを指定することで、指定されたオブジェクトの特定のイベント ({{event("click")}} など) に対してさまざまな方法で指定することができます。</p> + +<ul> + <li>要素に <code>on<em><eventtype></em></code> という名前の HTML {{Glossary("attribute", "属性")}}を追加する方法。<br> + <code><button <strong>onclick="handleClick()"</strong>></code>,</li> + <li>または、JavaScript から対応する {{Glossary("property/JavaScript", "property")}} を設定する方法。<br> + <code>document.querySelector("button")<strong>.onclick = function(event) { … }</strong></code>.</li> +</ul> + +<p><code>on<em>event</em></code> イベントハンドラープロパティは、1 つのイベントハンドラーを割り当てることができる一種のプレースホルダーとして機能します。与えられたオブジェクト上の同じイベントに対して複数のハンドラーをインストールできるようにするには、その addEventListener() メソッドを呼び出して、オブジェクト上の与えられたイベントに対するハンドラーのリストを管理することができます。ハンドラーは、その {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} 関数を呼び出すことで、オブジェクトから削除することができます。</p> + +<p>要素に適用されるイベントが発生すると、そのイベントハンドラーが次々と呼び出され、イベントを処理できるようになります。自分で呼び出す必要はありませんが、多くの場合、イベントの発生を簡単にシミュレートするために呼び出すことができます。例えば、ボタンオブジェクト <code>myButton</code> を指定した場合、 <code>myButton.onclick(myEventObject)</code> を実行することでイベントハンドラーを直接呼び出すことができます。イベントハンドラーがイベントオブジェクトからデータにアクセスしない場合は、 <code>onclick()</code> を呼び出すときにイベントを省略することができます。</p> + +<p>これは、イベントハンドラーのいずれかがイベントオブジェクト自身に対して {{domxref("Event.stopPropagation", "stopPropagation()")}} を呼び出すことでイベントの処理を明示的に停止しない限り、すべてのハンドラーが呼び出されるまで続きます。</p> + +<h3 id="Non-element_objects" name="Non-element_objects">要素以外のオブジェクト</h3> + +<p>イベントハンドラーはまた、 {{ domxref("window") }}, {{ domxref("document") }}, {{ domxref("XMLHttpRequest") }} などを含む、イベントを生成する多くの要素以外のオブジェクトのプロパティを使用して設定することもできます。例えば、 <code>progress</code> イベントが <code>XMLHttpRequest</code> のインスタンスで発生した場合は次のようになります。</p> + +<pre class="brush: js notranslate">const xhr = new XMLHttpRequest(); +xhr.onprogress = function() { … };</pre> + +<h2 id="HTML_onevent_attributes" name="HTML_onevent_attributes">HTML の onevent 属性</h2> + +<p>HTML 要素には <code>on<em>event</em></code> という名前の属性があり、これを利用して HTML コード内に直接イベントのハンドラーを登録することができます。要素が HTML から構築されると、その <code>on<em>event</em></code> 属性の値がその要素を表す DOM オブジェクトにコピーされるので、JavaScript を使って属性の値にアクセスすると、HTML で設定された値が得られます。</p> + + + +<p>HTML の属性値への更なる変更は {{domxref("Element/setAttribute", "setAttribute")}} メソッドで行うことができます。 JavaScript プロパティを変更しても効果あありません。</p> + +<h3 id="HTML">HTML</h3> + +<p>このような HTML 文書があったとします。</p> + +<pre class="brush: html notranslate"><p>Demonstrating quirks of <code>on<em>event</em></code> HTML attributes on + <a onclick="log('Click!')">these three words</a>. +</p> + +<div></div></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>この JavaScript は、 HTML 属性の値が JavaScript オブジェクトのプロパティの変更によって影響を受けないことを示しています。</p> + +<pre class="brush: js notranslate">let logElement = document.querySelector('div'); +let el = document.querySelector("a"); + +function log(msg) { logElement.innerHTML += `${msg}<br>` }; +function anchorOnClick(event) { log("Changed onclick handler") }; + +// Original Handler +log(`Element's onclick as a JavaScript property: <code> ${el.onclick.toString()} </code>`); + +//Changing handler using .onclick +log('<br>Changing onclick handler using <strong> onclick property </strong> '); + +el.onclick = anchorOnClick; + +log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); +log(`But the HTML attribute is unchanged: <code> ${el.getAttribute("onclick")} </code><br>`); + +//Changing handler using .setAttribute +log('<hr/><br> Changing onclick handler using <strong> setAttribute method </strong> '); +el.setAttribute("onclick", 'anchorOnClick(event)'); + +log(`Changed the property to: <code> ${el.onclick.toString()} </code>`); +log(`Now even the HTML attribute has changed: <code> ${el.getAttribute("onclick")} </code><br>`);</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{ EmbedLiveSample('HTML_onevent_attributes', '', '', '', 'Web/Guide/Events/Event_handlers') }}</p> + +<p>歴史的な理由から、{{HTMLElement("body")}} および {{HTMLElement("frameset")}} 要素の一部の属性/プロパティは、実際にはその親 {{domxref("Window")}} オブジェクトにイベントハンドラーを設定します。(HTML 仕様はこれらを {{domxref("GlobalEventHandlers/onblur", "onblur")}}, {{domxref("GlobalEventHandlers/onerror", "onerror")}}, {{domxref("GlobalEventHandlers/onfocus", "onfocus")}}, {{domxref("GlobalEventHandlers/onload", "onload")}}, {{domxref("GlobalEventHandlers/onscroll", "onscroll")}} と命名しています。)</p> + +<h3 id="Event_handlers_parameters_this_binding_and_the_return_value" name="Event_handlers_parameters_this_binding_and_the_return_value">イベントハンドラーの引数、this の結びつけ、および返値</h3> + +<p>イベントハンドラーが <strong>HTML 属性</strong>として指定されている場合、指定されたコードは<strong>次の引数</strong>を持つ関数にラップされます。</p> + +<ul> + <li><code>event</code> - {domxref("GlobalEventHandlers.onerror", "onerror")}} を除くすべてのイベントハンドラー。</li> + <li><code>event</code>, <code>source</code>, <code>lineno</code>, <code>colno</code>, <code>error</code> - {{domxref("GlobalEventHandlers.onerror", "onerror")}} のイベントハンドラー。なお、 <code>event</code> 引数には、実際にはエラーメッセージが文字列として含まれています。</li> +</ul> + +<p>イベントハンドラーが呼び出されると、ハンドラー内の <code>this</code> キーワードは、ハンドラーが登録されている DOM 要素に設定されます。詳しくは、<a href="/ja/docs/Web/JavaScript/Reference/Operators/this#In_an_inline_event_handler"><code>this</code> キーワードのドキュメント</a>を参照してください。</p> + +<p>ハンドラーからの返値は、イベントが取り消されるかどうかを決定します。返値値の具体的な処理はイベントの種類によって異なります。詳細については、<a href="https://html.spec.whatwg.org/multipage/webappapis.html#the-event-handler-processing-algorithm">HTML 仕様の「イベントハンドラー処理アルゴリズム」</a>を参照してください。</p> + +<h3 id="When_the_event_handler_is_invoked" name="When_the_event_handler_is_invoked">イベントハンドラーが呼び出されたとき</h3> + +<div class="blockIndicator note"> +<p>作成中 (非捕獲リスナー)</p> +</div> + +<h3 id="Terminology" name="Terminology">用語集</h3> + +<p><strong>イベントハンドラー</strong>という用語は、次のように使用されます。</p> + +<ul> + <li>イベントの通知を受けるように登録されている関数またはオブジェクト</li> + <li>または、より具体的には、<code><button onclick="alert(this)"></code> や <code>window.onload = function() { … }</code>など、HTML の <code>on…</code> 属性または Web API のプロパティを介してイベントリスナーを登録するメカニズム。</li> +</ul> + +<p>イベントを待ち受けするためのさまざまな方法を議論するときは、</p> + +<ul> + <li><strong>イベントリスナー</strong>は、{{domxref("EventTarget.addEventListener()")}} によって登録された関数またはオブジェクトを参照します。</li> + <li>一方、<strong>イベントハンドラー</strong>は <code>on...</code> 属性またはプロパティを介して登録された関数を指します。</li> +</ul> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('HTML5 W3C', 'webappapis.html#event-handler-attributes', 'event handlers')}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザーの互換性</h2> + +<h4 id="イベントハンドラープロパティが存在することの検出">イベントハンドラープロパティが存在することの検出</h4> + +<p>JavaScript の {{jsxref("Operators/in", "in")}} 演算子でイベントハンドラープロパティの存在を検出することができます。例えば、以下のようになります。</p> + +<pre class="brush: js notranslate">if ("onsomenewfeature" in window) { + /* do something amazing */ +} +</pre> + +<h4 id="Event_handlers_and_prototypes" name="Event_handlers_and_prototypes">イベントハンドラーとプロトタイプ</h4> + +<p>DOM プロトタイプオブジェクトには、IDL で定義された属性の値を設定したり、アクセスしたりすることはできません。つまり、例えば <code>Window.prototype.onload</code> を変更することはできません。以前は、 Gecko では イベントハンドラー (<code>onload</code> など) が IDL 属性として実装されていなかったので可能だったのですが、現在はできなくなりました。これにより互換性が向上します。</p> |