diff options
Diffstat (limited to 'files/zh-cn/web/api/element/error_event/index.html')
| -rw-r--r-- | files/zh-cn/web/api/element/error_event/index.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/files/zh-cn/web/api/element/error_event/index.html b/files/zh-cn/web/api/element/error_event/index.html new file mode 100644 index 0000000000..3d14efef34 --- /dev/null +++ b/files/zh-cn/web/api/element/error_event/index.html @@ -0,0 +1,136 @@ +--- +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"><div class="controls"> + <button id="img-error" type="button">生成图像error</button> + <img class="bad-img" /> +</div> + +<div class="event-log"> + <label>Event log:</label> + <textarea readonly class="event-log-contents" rows="8" cols="30"></textarea> +</div></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) => { + log.textContent = log.textContent + `${event.type}: Loading image\n`; + console.log(event) +}); + +const imgError = document.querySelector('#img-error'); +imgError.addEventListener('click', () => { + 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> + +<div class="hidden">此页面上的兼容性表是根据结构化数据生成的。 如果您想贡献数据，请查看<a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>，并向我们发送请求请求。</div> + +<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> |