jQuery.one()和jQuery.on()之间的区别

Question

我的页面上有多个图像.为了检测损坏的图像,我在SO上使用了这个.

$('.imgRot').one('error',function(){
    $(this).attr('src','broken.png');
});

这在我理解的第一张图片上工作正常.但是当我改变它

$('.imgRot').on('error',function(){
    $(this).attr('src','broken.png');
});

它不适用于任何图像.有人能告诉我为什么吗？

Answer 1

社区维基:这个通用答案对OP发布的问题没有贡献,但与标题有关.

概念one()和on()可以用下面的代码解释.

one() 第一次出现后,函数自动移动到关闭状态.

on() 与one()相同但需要手动设置为off状态,否则实例数没有限制.

var i = 1;
$('.one').one('click', function() {

  $(this).text('I am clickable only once: ' + i);
  i++;
});

var j = 1;
$('.multiple').on('click', function() {

  $(this).text('I was clicked ' + j + ' times');
  j++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">Click me</div>
<div class="multiple">Click me</div>

Answer 2

如果你看一下.one()jQuery 1.7 中的源代码,它只是.on()内部调用,除了事件触发后,它会删除事件处理程序.所以,你的情况应该没有区别,因为error无论如何每个对象只发生一次事件.

所以,你的代码中肯定会发生其他事情,比如当你运行这段代码或类似代码时,图像对象还没有被加载到DOM中.

如果您尝试使用委托事件处理来执行此操作(您的示例未显示),则可能会遇到"错误"事件未传播的问题.

也可能是您的代码因缓存而出现时序问题.尝试在已经存在于DOM中的图像上安装这些类型的错误处理程序是一种竞争条件.您试图在调用之前安装错误处理程序,但图像已经开始加载,并且在安装事件处理程序之前可能已经触发了事件.后续页面加载(在第一个之后)可能已缓存其他页面元素或DNS引用,因此它可能更快地到达错误处理程序,甚至可能在JS运行并安装错误处理程序之前.

我知道这是浏览器缓存和onload事件的问题.onload如果您在嵌入式HTML中附加事件处理程序,则只能可靠地获取事件(因此,在<img>首次解析标记时,或者在设置.src属性之前附加它(如果以编程方式创建图像)时,它就会存在).这表明您无法error像对页面HTML中的图像那样可靠地设置处理程序.

我的建议是这样的:

• 在图像在DOM中之后,不要尝试安装这样的错误处理程序.
• 如果以编程方式生成图像来分配它们,则在分配之前.src分配事件处理程序.
• 如果你需要在页面的HTML中使用这些图像,那么你必须将事件处理程序放在HTML中,<img src="xxx" onerror="yourErrorFunc(this)">因为这是确保在事件发生之前安装处理程序的唯一方法.