在常规网页中,这也是较差的做法)。
原因是用户脚本在沙箱(“隔离的世界”)中onclick
运行,并且在目标页面范围内运行,并且看不到脚本创建的任何功能。
始终使addEventListener()
Doc(或等效的库函数,如jQuery.on())。
因此,而不是像这样的代码:
something.outerHTML += '<input onclick="resetEmotes()" id="btnsave" ...>'
您将使用:
something.outerHTML += '<input id="btnsave" ...>'
document.getElementById ("btnsave").addEventListener ("click", resetEmotes, false);
对于循环,您无法将数据传递给类似Seedoc的事件侦听器。再加上每次您进行这样的更改innerHTML
,都将破坏以前的事件侦听器!
无需大量重构代码,就可以通过数据属性传递数据。因此,使用如下代码:
for (i = 0; i < EmoteURLLines.length; i++) {
if (checkIMG (EmoteURLLines[i])) {
localStorage.setItem ("nameEmotes", JSON.stringify (EmoteNameLines));
localStorage.setItem ("urlEmotes", JSON.stringify (EmoteURLLines));
localStorage.setItem ("usageEmotes", JSON.stringify (EmoteUsageLines));
if (i == 0) {
console.log (resetSlot ());
}
emoteTab[2].innerHTML += '<span style="cursor:pointer;" id="'
+ EmoteNameLines[i]
+ '" data-usage="' + EmoteUsageLines[i] + '">'
+ '<img src="' + EmoteURLLines[i] + '" /></span>'
;
} else {
alert ("The maximum emote (" + EmoteNameLines[i] + ") size is (36x36)");
}
}
//-- Only add events when innerHTML overwrites are done.
var targetSpans = emoteTab[2].querySelectorAll ("span[data-usage]");
for (var J in targetSpans) {
targetSpans[J].addEventListener ("click", appendEmote, false);
}
其中appendEmote像这样:
function appendEmote (zEvent) {
//-- this and the parameter are special in event handlers. see the linked doc.
var emoteUsage = this.getAttribute ("data-usage");
shoutdata.value += emoteUsage;
}