[JS Apps]Странен "behaviour" на this в event функция.


2
Здравейте колеги,
решавам задачата : http://downloads.academy.telerik.com/svn/js-part2/Lectures/4.%20JavaScript%20APIs/Javascript-APIs.pptx от JS APIs (от курса javascript applications по новата програма).
Да направя едно топче, беше лесно. Когато обаче трябваше да направя много, които да се драгват стана по - различно. Проблема е, че аз имам масив от топчета. И минавам с един цикъл през всяко едно от тях. Пробвах в евента да подавам индекса (i) , и после в метода, който update-тва да взимам това i като параметър и да достъпвам елемента, който ми трябва чрез този индекс и масива от топчета.
Да, обаче всяка променлива в jаvascript е глобална. Тоест при стартирането на програмата цикъла си минава и прави евентите. И когато този евент се извика i вече е 10 (с 1 по - голямо от големината на масива) и цялото нещо се бъгва.
Реших, че ще правя обект, който да има във себе си топче и индекс и да го добавям така към масива. Това обаче също не работи защото пак имам масив и няма как да разбера кой обект трябва да достъпя.
След малко умуване разбрах, че трябва да използвам closure. Преди това обаче реших да потърся как достъпя елемента, на който се поставя event-a. Мислех, че ако в функцията на even listener-а напиша this, този this ще ми върне точно този елемент. Пробвах го и видях, че ми изкарва 6. И после 5. Казах си, че може би това ми изкарва индекса на елемента в масива. И наистина се оказа така. И цялото нещо проработи, което направо ме изуми.
Тоест когато напиша someArr[i].addEventListener("mousedown", function(){
alert(this);
}) това нещо ще ми изкара индекса i на елемента. Нямам апсолютно никаква идея защо става така. Ако някой разбира ще съм благодарен да обясни :)
Кода ми е това : http://pastebin.com/JMALvsyz , целия проект е във един файл. Тоест копирате го в един .html файл и работи.
Благодаря предварително :)



Отговори



2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
bind прави нова функция с this сетнат към определена стойност. В твоя случай this е текущата стойност на i, но провбвай с bind('Pesho').



2

Здравей,

Доколкото рабирам се опитваш да достъпиш селектнатото топче? Сори ако не съм разбрал.

За да вземеш топчето само добави: papers[i].paper.addEventListener("mousedown", function (event) {
var selectedImage = event.target;

Edit добавка:

Ако пак имаш същия проблем изнеси функцията да не е в цилъла

papers[i].paper.addEventListener("mousedown", functionName, false);

(дотук е в цикъла, след това викаш функцията)

function functionName(event) {

    var selectedImage = event.target;

}


от stanev.plamen (1143 точки)