1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
|
---
title: Event attributes
slug: Learn/JavaScript/Building_blocks/Events
translation_of: >-
Learn/JavaScript/Building_blocks/Events#Inline_event_handlers_%E2%80%94_don%27t_use_these
translation_of_original: Web/Guide/HTML/Event_attributes
original_slug: Web/Guide/HTML/Event_attributes
---
<p><span class="seoSummary">每一個 HTML 元素都可以放置事件屬性，以藉此於事件發生時能執行 JavaScripte 程式。事件屬性的名稱都有一個前綴「on」，例如當使用者點選元素時要執行指定的 JavaScript，可以使用 </span><code>onclick</code><span class="seoSummary"> 屬性並把要執行的 JavaScript 當成屬性值。</span></p>
<p>In the JavaScript code executed in response to the event, <code>this</code> is bound to the HTML element and the {{domxref("Event")}} object can be reached using the <code>event</code> variable in the scope of the attribute.</p>
<div class="warning">
<p><strong>Warning:</strong> These attributes should be avoided. This makes the markup bigger and less readable. Concerns of content/structure and behavior are not well-separated, making a bug harder to find. Furthermore, usage of event attributes almost always causes scripts to expose global functions on the {{domxref("Window")}} object, polluting the global namespace.</p>
</div>
<p>While these attributes can at times be attractively easy to use, you should avoid using them. Instead, use the {{domxref("EventTarget.addEventListener()")}} function to add a listener for the event.</p>
<p>Event attributes can be blocked by using <a href="/en-US/docs/Security/CSP/Introducing_Content_Security_Policy">Content Security Policy</a> which if used, blocks all inline scripts unless the <em>'unsafe-inline'</em> keyword is used.</p>
<h2 id="Example_using_event_attributes" name="Example_using_event_attributes">Example using event attributes</h2>
<p>This example appends text to an element each time time the {{HTMLElement("div")}} is clicked.</p>
<div class="note">
<p><strong>Note:</strong> This is an example of how not to do things, using one of these attributes.</p>
</div>
<pre class="brush: html"><!doctype html>
<html>
<head>
<title>Event Attribute Example</title>
<script>
function doSomething() {
document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>";
}
</script>
</head>
<body>
<div onclick="doSomething();">Click me!</div>
<div id="thanks"></div>
</body>
</html>
</pre>
<p>Try this example below:</p>
<p>{{ EmbedLiveSample('Example_using_event_attributes', '', '', '') }}</p>
<h2 id="Example_using_event_listeners">Example using event listeners</h2>
<p>Instead, you should use {{domxref("EventTarget.addEventListener()")}}, as shown here:</p>
<pre class="brush: html"><!doctype html>
<html>
<head>
<title>Event Attribute Example</title>
<script>
function doSomething() {
document.getElementById("thanks").innerHTML += "<p>Thanks for clicking!</p>";
}
// Called when the page is done loading; this is where we do any setup we need,
// such as creating event listeners for the elements in the page.
function setup() {
document.getElementById("click").addEventListener("click", doSomething, true);
}
// Install an event handler on the window to receive the "load" event, which
// indicates that the document has finished loading into the window.
window.addEventListener("load", setup, true);
</script>
</head>
<body>
<div id="click">Click me!</div>
<div id="thanks"></div>
</body>
</html></pre>
<p>You can see this in action below:</p>
<p>{{ EmbedLiveSample('Example_using_event_listeners', '', '', '') }}</p>
<section id="Quick_Links"><ol><li><a href="/en-US/docs/Web/API/Event" title='The Event interface represents an event which takes place in the DOM; some are user-generated (such as mouse or keyboard events), while others are generated by APIs (such as events that indicate an animation has finished running, a video has been paused, and so forth). While events are usually triggered by such "external" sources, they can also be triggered programmatically, such as by calling the HTMLElement.click() method of an element, or by defining the event, then sending it to a specified target using EventTarget.dispatchEvent(). There are many types of events, some of which use other interfaces based on the main Event interface. Event itself contains the properties and methods which are common to all events.'>Event</a></li><li><a href="/en-US/docs/Web/API/EventTarget" title="EventTarget is a DOM interface implemented by objects that can receive events and may have listeners for them.">EventTarget</a></li><li><a href="/en-US/docs/Web/API/EventTarget.addEventListener">EventTarget.addEventListener</a></li></ol></section>
|
