Объект не реагирует на события мыши ⇐ Javascript

[Anonymous]

У меня есть JS-скрипт, который заменяет внутренний текст элемента альтернативным текстом, содержащимся в атрибуте data-*:

Код: Выделить всё

old text

Я использую это, и до определенного момента оно работает нормально. Дело в том, что на странице только один своп:

Код: Выделить всё

function swapInnerText0() {
if (document.querySelectorAll('span[data-swapinnertext]').length > 0) {
var s, spans = document.querySelectorAll('span[data-swapinnertext]');
for (s = 0; s < spans.length; s++) {
var swapText = spans[s].dataset.swapinnertext, innerText = spans[s].innerText;
spans[s].onmouseover = function() {
this.innerText = swapText;
}
spans[s].onmouseout = function() {
this.innerText = innerText;
}
spans[s].onclick = function() {
this.innerText = swapText;
this.onmouseover = null;
this.onmouseout = null;
this.removeAttribute('data-swapinnertext');
}
}
}
}

Однако, если их больше одного, событие onmouseout заменяет текст значением из последнего члена span. Я понимаю, почему это так, поэтому я попытался это исправить.
Это работает, создавая временные атрибуты кэша data-* для хранения текстовых версий для каждого элемента:

Код: Выделить всё

function swapInnerText1() {
if (document.querySelectorAll('span[data-swapinnertext]').length > 0) {
var s, spans = document.querySelectorAll('span[data-swapinnertext]');
for (s = 0; s < spans.length; s++) {
spans[s].setAttribute('data-swapcache1', spans[s].dataset.swapinnertext);
spans[s].setAttribute('data-swapcache2', spans[s].innerText);
spans[s].onmouseover = function() {
this.innerText = this.dataset.swapcache1;
}
spans[s].onmouseout = function() {
this.innerText = this.dataset.swapcache2;
}
spans[s].onclick = function() {
this.innerText = this.dataset.swapcache1;
this.onmouseover = null;
this.onmouseout = null;
this.removeAttribute('data-swapinnertext');
this.removeAttribute('data-swapcache1');
this.removeAttribute('data-swapcache2');
}
}
}
}

Но это неэлегантно. Ранее я пытался создать 2D-массив элементов и использовать его, чтобы гарантировать, что текстовые версии каждого элемента будут отделены от других:

Код: Выделить всё

function swapInnerText2() {
if (document.querySelectorAll('span[data-swapinnertext]').length > 0) {
var sp, sw, spans = document.querySelectorAll('span[data-swapinnertext]'), swaps = Array();
for (sp = 0; sp < spans.length; sp++) {
var swapText = spans[sp].dataset.swapinnertext, innerText = spans[sp].innerText;
swaps.push(Array(swapText, innerText));
}
for (sw = 0; sw < swaps.length; sw++) {
var newText = swaps[sw][0], oldText = swaps[sw][1];
swaps[sw].onmouseover = function() {
this.innerText = newText;
}
swaps[sw].onmouseout = function() {
this.innerText = oldText;
}
swaps[sw].onclick = function() {
this.innerText = newText;
this.onmouseover = null;
this.onmouseout = null;
this.removeAttribute('data-swapinnertext');
}
}
}
}

И здесь дела идут странно. Ни один из объектов swap[sw] не реагирует на события мыши. Я поместил alert() вне анонимных функций, и они поняли, что swap[sw] являются объектами, индексными и текстовыми значениями для каждого из них, но внутри функций ничего не происходит.
Я ломал голову над тем, что у меня есть, и долго искал, но просто не могу понять, почему события мыши не работают в третьей версии (которую я предпочитаю второй), но работают в двух других.

Подробнее здесь: https://stackoverflow.com/questions/798 ... use-events