files/zh-cn/web/api/element/error_event/index.html


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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134

---
title: error
slug: Web/API/Element/error_event
translation_of: Web/API/Element/error_event
original_slug: Web/Events/error
---
<div>{{APIRef}}</div>

<p>当一个资源加载失败或无法使用时，会在{{domxref("Element")}}对象上触发<code>error</code>事件。例如当脚本执行错误、或图片无法找到或图片无效时。</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row">Bubbles（支持冒泡）</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Cancelable（可撤销）</th>
   <td>No</td>
  </tr>
  <tr>
   <th scope="row">Interface（接口）</th>
   <td>{{domxref("Event")}} 或{{domxref("UIEvent")}}</td>
  </tr>
  <tr>
   <th scope="row">Event handler property（事件处理程序属性）</th>
   <td>{{domxref("GlobalEventHandlers/onerror", "onerror")}}</td>
  </tr>
 </tbody>
</table>

<p>如果事件对象是从用户界面元素生成的，则它是一个{{domxref("UIEvent")}}实例;反之，它是一个{{domxref("Event")}}实例。</p>

<h2 id="示例">示例</h2>

<h3 id="在线示例"><a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Window/blur_event#%E5%9C%A8%E7%BA%BF%E7%A4%BA%E4%BE%8B">在线示例</a></h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div class="controls"&gt;
  &lt;button id="img-error" type="button"&gt;生成图像error&lt;/button&gt;
  &lt;img class="bad-img" /&gt;
&lt;/div&gt;

&lt;div class="event-log"&gt;
  &lt;label&gt;Event log:&lt;/label&gt;
  &lt;textarea readonly class="event-log-contents" rows="8" cols="30"&gt;&lt;/textarea&gt;
&lt;/div&gt;</pre>

<div class="hidden">
<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">body {
  display: grid;
  grid-template-areas: "control  log";
}

.controls {
  grid-area: control;
  display: flex;
  align-items: center;
  justify-content: center;
}

.event-log {
  grid-area: log;
}

.event-log-contents {
  resize: none;
}

label, button {
  display: block;
}

button {
  height: 2rem;
  margin: .5rem;
}

img {
  width: 0;
  height: 0;
}
</pre>
</div>

<h4 id="JS">JS</h4>

<pre class="brush: js notranslate">const log = document.querySelector('.event-log-contents');

const badImg = document.querySelector('.bad-img');
badImg.addEventListener('error', (event) =&gt; {
    log.textContent = log.textContent + `${event.type}: Loading image\n`;
    console.log(event)
});

const imgError = document.querySelector('#img-error');
imgError.addEventListener('click', () =&gt; {
    badImg.setAttribute('src', 'i-dont-exist');
});
</pre>

<h4 id="结果">结果</h4>

<p>{{ EmbedLiveSample('Live_example', '100%', '150px') }}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('UI Events', '#event-type-error')}}</td>
   <td>{{Spec2('UI Events')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{Compat("api.Element.error_event")}}</p>

<h2 id="参阅">参阅</h2>

<ul>
 <li>This event on <code>Window</code> targets: {{domxref("Window/error_event", "error")}} event</li>
</ul>