http://www.ovaldi.org/2015/09/11/%E4%BB%A5%E5%85%A8%E5%B1%80%E7%9B%91%E5%90%AC%E7%9A%84%E6%96%B9%E5%BC%8F%E5%A4%84%E7%90%86img%E7%9A%84error%E4%BA%8B%E4%BB%B6/

在开发一些电商页面时,往往会有大量的商品图片信息,当图片加载失败时,我们希望以一种更加友好的的方式改善用户体验:比如,换成一张友好的提示图片。

img标签在加载失败时,会触发error事件,所以,我们可以这么做

$("img").on("error", function(){
this.src = "/img/hint.jpg";
});
 

无法监听到动态产生的img标签然而,这种处理方法存在两个问题:

  1. 给每一个img元素都绑定事件处理函数带来的页面性能损耗

那么,如何解决上面的问题呢?也许你会说利用事件冒泡的机制来监听,可惜error事件并不会冒泡!
(事实上,在W3C的DOM Level 2 Events中规定,error事件是会冒泡的,而在DOM Level 3 Events中规定,error事件是不会冒泡的。)

要解决上述两个问题,我们需要先了解一下DOM事件发生的三个阶段:

  1. 捕获阶段: 从根节点开始顺序而下,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定addEventListener的第三个参数useCapture为true,以使事件处理函数在该阶段运行。(低版本IE中无法指定事件处理函数在该阶段执行)
  2. 目标阶段: 触发在目标对象本身注册的事件处理函数,也称正常事件派发阶段。
  3. 冒泡阶段: 从目标节点到根节点,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定addEventListener的第三个参数useCapture为true,以使事件处理函数在该阶段运行。

通过了解以上三个阶段,我们就可以使用如下代码解决:

document.addEventListener("error", function(e){
var elem = e.target;
if(elem.tagName.toLowerCase() === 'img'){
elem.src = "/img/hint.jpg";
}
}, true /*指定事件处理函数在捕获阶段执行*/);

需要注意的是,由于低版本IE中attachEvent方法无法指定事件处理函数在捕获阶段执行,所以,该方案在低版本IE中不能适用。

以全局监听的方式处理img的error事件的更多相关文章

  1. javaweb项目的全局监听配置

    在项目中有时候会遇到全局监听的需求,而全局性的监听该如何配置,代码如下: package com.demo.listener; import javax.servlet.ServletContextE ...

  2. js添加事件监听的方式与this

    js添加事件监听与this js添加事件监听的方式与this 在标签中调用自定义函数 DOM0级事件处理程序 DOM2级事件处理程序 this 代表谁? js添加事件监听的方式与this <di ...

  3. Android 另类方法监听软键盘的弹出收起事件

    http://www.cnblogs.com/csonezp/p/5065624.html 最近做的项目碰到个问题,a界面是fragment+recyclerview,b界面带个edittext,并且 ...

  4. VUE 全局监听sessionStorage变化

    在做项目的时候,可能需要在其他模块获取推送的信息或者变量,但是数据量或者说数目少,而且项目中也没有引用VUEX,那么可以下手的方法之一也就是sessionStorage类的浏览器存储了. 首先在全局的 ...

  5. SparkListener监听使用方式及自定义的事件处理动作

    本文针对spark 2.0+版本 概述 spark 提供了一系列整个任务生命周期中各个阶段变化的事件监听机制,通过这一机制可以在任务的各个阶段做一些自定义的各种动作.SparkListener便是这些 ...

  6. OnTouchListener事件监听实现方式之GestureDetector

    当用户触摸屏幕的时候,会产生许多手势,例如down,up,scroll,filing等等. 一般情况下,我们知道View类有个View.OnTouchListener内部接口,通过重写他的onTouc ...

  7. 全局监听SCREEN_ON和SCREEN_OFF的替代方法--监听屏幕解锁事件

    在做一个程序的时候,需要时刻保持某一服务是启动的,因此想到了通过监听屏幕SCREEN_ON和SCREEN_OFF这两个action.奇怪的是,这两个action只能通过代码的形式注册,才能被监听到,使 ...

  8. angular 全局 监听路由变化

    app.run(['$rootScope', '$location', function($rootScope, $location) { /* 监听路由的状态变化 */ $rootScope.$on ...

  9. 监听文本框输入oninput和onpropertychange事件

    前端页面开发的很多情况下都需要实时监听文本框输入,比如腾讯微博编写140字的微博时输入框动态显示还可以输入的字数.过去一般都使用onchange/onkeyup/onkeypress/onkeydow ...

随机推荐

  1. 【BZOJ 2154】Crash的数字表格

    制杖了,,,求前缀和的时候$i×i$是int,然后当$i=10^7$时就喜闻乐见地爆int了,,,对拍之后查了一个下午的错才发现这个问题,,,最后枚举用的变量全都强行加上long long才A掉 #i ...

  2. python之旅3

    1 collections系列 方法如下 class Counter(dict): '''Dict subclass for counting hashable items. Sometimes ca ...

  3. 初探psutil

    系统性能信息模块psutil 1,psutil简介 psutil是一个跨平台能够轻松获取系统的进程和系统利用率,主要应用在系统监控,分析和限制系统资源以及进程管理.它实现了很多系统管理的命令,如ps, ...

  4. Entity Framework Code First (七)空间数据类型 Spatial Data Types

    声明:本文针对 EF5+, Visual Studio 2012+ 空间数据类型(Spatial Data Types)是在 EF5 中引入的,空间数据类型表现有两种: Geography (地理学上 ...

  5. 网站(logo,主机)

    logo生成网站  http://www.uugai.com/ 花生壳 http://hsk.oray.com/download/

  6. java-汉字转换拼音-pinyin4j.jar

    使用pinyin4j将汉字转成拼音,附件为pinyin4j的jar包 import net.sourceforge.pinyin4j.PinyinHelper; import net.sourcefo ...

  7. HTML基础及一般标签

    HTML        内容 Hyper Text Markup Language  超文本标记语言(包含文本.表格.图片.声音.视频等,同时也是文档) HTML 元素指的是从开始标签(start t ...

  8. 【HDU 3746】Simpsons’ Hidden Talents(KMP求循环节)

    求next数组,(一般有两种,求循环节用的见代码)求出循环节的长度. #include <cstdio> #define N 100005 int n,next[N]; char s[N] ...

  9. css 数字出现滚动条解决

    <div style="height:100px;overflow-y:auto;word-wrap:break-word;word-break:break-all;" ng ...

  10. BZOJ4548 小奇的糖果

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...