以全局监听的方式处理img的error事件
2016-09-30 11:05
204 查看
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标签然而,这种处理方法存在两个问题:
给每一个img元素都绑定事件处理函数带来的页面性能损耗
那么,如何解决上面的问题呢?也许你会说利用事件冒泡的机制来监听,可惜error事件并不会冒泡!
(事实上,在W3C的DOM Level 2 Events中规定,error事件是会冒泡的,而在DOM Level 3 Events中规定,error事件是不会冒泡的。)
要解决上述两个问题,我们需要先了解一下DOM事件发生的三个阶段:
捕获阶段: 从根节点开始顺序而下,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定addEventListener的第三个参数useCapture为true,以使事件处理函数在该阶段运行。(低版本IE中无法指定事件处理函数在该阶段执行)
目标阶段: 触发在目标对象本身注册的事件处理函数,也称正常事件派发阶段。
冒泡阶段: 从目标节点到根节点,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定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事件,所以,我们可以这么做
$("img").on("error", function(){
this.src = "/img/hint.jpg";
});
无法监听到动态产生的img标签然而,这种处理方法存在两个问题:
给每一个img元素都绑定事件处理函数带来的页面性能损耗
那么,如何解决上面的问题呢?也许你会说利用事件冒泡的机制来监听,可惜error事件并不会冒泡!
(事实上,在W3C的DOM Level 2 Events中规定,error事件是会冒泡的,而在DOM Level 3 Events中规定,error事件是不会冒泡的。)
要解决上述两个问题,我们需要先了解一下DOM事件发生的三个阶段:
捕获阶段: 从根节点开始顺序而下,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定addEventListener的第三个参数useCapture为true,以使事件处理函数在该阶段运行。(低版本IE中无法指定事件处理函数在该阶段执行)
目标阶段: 触发在目标对象本身注册的事件处理函数,也称正常事件派发阶段。
冒泡阶段: 从目标节点到根节点,检测每个节点是否注册了事件处理函数。在标准浏览器中,我们可以通过指定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中不能适用。
相关文章推荐
- ubuntu 11.10 laucher和全局菜单不见的处理方式
- 授权过期后AJAX操作跳转到登录页的一种全局处理方式
- Oracle10g监听夯的处理方式
- socket通过nginx监听443端口,跳转到其它相关端口处理方式:
- IOS系统监听返回按钮处理方式
- 不同包里的全局变量定义方式及系统配置处理
- springMVC --全局异常处理(两种方式)
- Oracle写丢失错误恢复后的全局索引和分区索引的处理方式
- .net中捕捉全局未处理异常的三种方式示例
- 监听密码忘记,处理方式
- 安卓中关于事件处理方式以Button为例实现点击事件监听
- ASP.NET Core MVC 中设置全局异常处理方式
- Spring全局异常处理的三种方式
- Spring MVC全局的异常处理方式
- web confing 处理全局编码方式
- 处理事件的方式:两种类的覆盖处理(自己管理,覆盖专用事件函数;自己统一管理,覆盖QWidget::Event通用函数),一种对象的处理(父控件统一管理,即安装过滤器),两种全局处理(QCoreApplication安装过滤器;覆盖notify方法)
- 详解Spring全局异常处理的三种方式
- springMVC --全局异常处理(两种方式)
- WebApi全局异常处理方式
- 新内核模块引用其他模块中的全局变量,编译报错处理方式