将Onclick转换为addEventListener

Convert Onclick to addEventListener

本文关键字：addEventListener 转换 Onclick      更新时间：2023-09-26
for(var i=1;i<=s;i++){if(e[r]<0&&n<=0)
{n=Math.abs(e[r])-1;r++}
else if(n>0){n--}else{t=e[r];r++}
var o=document.createElement("div");
o.style.height=t+"px";o.className="thumbnail";
o.id="thumb"+i;
o.setAttribute("onclick","Viewer.goToPage("+i+");");

我试图将onclick转换为addEventListener由于Firefox OS的CSP限制，但没有获得成功。

for (var i = 1; i <= s; i++) {
    if (e[r] < 0 && n <= 0) {
        n = Math.abs(e[r]) - 1;
        r++
    } else if (n > 0) {
        n--
    } else {
        t = e[r];
        r++
    }
    var o = document.createElement("div");
    o.style.height = t + "px";
    o.className = "thumbnail";
    o.id = "thumb" + i;
    (function(j, elem) {
        elem.addEventListener('click', function() {
            Viewer.goToPage(j);
        }, false);
    }(i, o));
}

您必须在IIFE中捕获迭代器的值，以使其在addEventListener

的回调中持久化。

您可以使用addEventListener来实现这一点，但是我没有看到比直接属性分配(基于adeneo的代码)有任何好处:

o.onclick = (function(pageNum) {
  return function() {
    Viewer.goToPage(pageNum);
  };
}(i));
// Presumably o is added to the document before the next iteration
这种方法的一个好处是，您可以稍后通过为元素的onclick属性赋一个新值来删除侦听器，或者使用addEventListener(或等效的)添加额外的侦听器。

如果addEventListener被用来添加一个"匿名"函数，以后就不容易删除它了。

最好避免setAttribute用于附加处理程序，因为它在不同浏览器之间不一致。从IE和NN版本3或更早的版本开始，所有浏览器都支持直接设置该属性。

相关文章：
  • 没有找到相关文章