Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Метод обьекта как обработчик события 
:(
    Опции темы
solenko
Дата 5.6.2006, 13:33 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



Здравствуйте.
Есть скрипт, который на лету создает форму. Скрипт выполнен в виде класса для того, чтобы этих форм можно было создать несколько. Мне необходимо на обработку нажатия кнопки навесить выполнение метода класса.
Как это сделать?

PS. Кажется непонятно объяснил что нужно, но как это сказать подругому не представляю. 


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
vasac
Дата 5.6.2006, 13:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36



>метода класса...
объекта видимо? тогда можно так:
Код

button.addEventListener( "click", function(e) { return object.method(); }, false );
  

Это сообщение отредактировал(а) vasac - 5.6.2006, 14:09
PM WWW   Вверх
solenko
Дата 5.6.2006, 14:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



Вот начал пробовать...
Код

<HTML>
<HEAD>
<script>
function testClick(){
  alert('test');
  new test();
}

function test(){
  this.container = document.createElement('DIV');
  this.container.style.visibility = 'visible';
  this.container.style.display = 'block';
  this.container.innerHTML = '<button>clear</button>';
// по идее здесь нужно навешивать обработчик...
  document.body.appendChild(this.container);
}
</script>
</HEAD>
<BODY>
<button onclick="testClick();">test</button>
</BODY>
</HTML>

Не могу понять как мне получиить ссылку на созданный button, чтобы навесить на него обработчик.
 


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
vasac
Дата 5.6.2006, 14:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1060
Регистрация: 4.5.2006

Репутация: 13
Всего: 36



Ссылку на элемент можно получить через его id (если указать, конечно):
Код

document.getElementById( id );

А в данном случае можно просто:
Код

<button onclick="testClick(this);">test</button>

 
PM WWW   Вверх
12345c
Дата 5.6.2006, 17:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Вопрос не самый тривиальный, поэтому перенёс сюда. 
(Продолжая тему...)

В данном случае вызываете метод нужного экземпляра класса:



Код

 <button id=b1 onclick="elemClassCreateForm.testClick();">test</button> 


Обработчик:
Код

document.getElementById(b1).onclick=elemClassCreateForm.testClick;
 Но после создания документа и определения экземпляра класса, естественно.

Можно и addEventListener() /FF/ + attachEvent() / IE / , но длиннее. 
PM WWW   Вверх
Sardar
Дата 5.6.2006, 17:49 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(12345c @  5.6.2006,  16:40 Найти цитируемый пост)
document.getElementById(b1).onclick=elemClassCreateForm.testClick;

Так увы не прокатит, поле testClick содержит просто функцию не привязанную к обьекту.

Правильный метод от vasac, нужно создавать closure, который будет вызывать метод на требуемом обьекте. 


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 5.6.2006, 19:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Код
<script>ClassCreateForm=function(){
  this.testClick=function(){alert(0);}
}
elemClassCreateForm=new ClassCreateForm();
onload=function(){
document.getElementById('b1').onclick=elemClassCreateForm.testClick;
}
</script>
<div id=b1>(неважно что, лишь бы кликалось)</div>
(работает) 
PM WWW   Вверх
Sardar
Дата 5.6.2006, 19:53 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Угу, ибо функция не обращаеться к полям обьекта, попробуй то же самое, да так что бы testClick alert'ило внутреннее поле.

 


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 5.6.2006, 23:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Я понял идею, но исходно:
Цитата(solenko @  5.6.2006,  13:33 Найти цитируемый пост)
Мне необходимо на обработку нажатия кнопки навесить выполнение метода класса.
Класса, а не его экземпляра, так что я в точности ответил на вопрос.

А так конечно, вот что получается там и там:
Код
<script>ClassCreateForm=function(n){
  this.testClick=function(){alert(this.param);}
  this.param=n;
}
elemClassCreateForm2=new ClassCreateForm(2);
elemClassCreateForm3=new ClassCreateForm(3);
onload=function(){
document.getElementById('b1').onclick=elemClassCreateForm2.testClick;
document.getElementById('b2').onclick=function(){elemClassCreateForm2.testClick()};
}
</script>
<div id=b1>(показ неопределённого элемента класса)</div>
<div id=b2>(показ экземпляра c обработчиком)</div>
<div id=b3 onclick=elemClassCreateForm3.testClick()>(показ c вызовом из атрибута)</div>


 


--------------------
Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go
PM WWW   Вверх
Sardar
Дата 6.6.2006, 01:41 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Ладно, офтопим дальше!  smile 

Цитата(12345c @  5.6.2006,  22:00 Найти цитируемый пост)
Класса, а не его экземпляра

Начнём с того что классов в JS нет, он относиться к prototype-based языкам которые отвергают разделение обьектов на шаблоны (классы или "множество обьектов одного типа" если глубже). Вместо этого обьекты копируються (от прототипа) либо создаються с нуля. Отсюда чисто физически нельзя вызвать метод класса, в твоём коде человеческим языком:

вызвать замыкание определённое в функции ClassCreateForm.

Всё. Никакой связи с созданным обьектом. Есть связь с вызванной функцией, сохраняеться контекст вызова который ты не используешь, т.к. функция это замыкание.

Интересно что в ECMAScript 4 (JS2) прототипная основа JS заменяеться на привычные всем классы. Да, классы проще понять и на их основе проще поставить правила (рельсы), по которым будет сложней делать ошибки. С другой стороны код становиться более громоздким. Прототипное программирование очень гибкое, в этом и сложность, полученная софтина может выйти из под контроля, когда появяться "тайные братства" не известно откуда взявшихся обьектов smile 



M
Sardar
Eсли в теме всплывут интересные мысли, поделим на две.
 


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
12345c
Дата 6.6.2006, 04:19 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Круглый
****


Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101



Это всё споры о терминах. Я говорю в привычном ключе. Если функция используется для порождения объекта - она класс. Если для вызова функций - метод. В JS, несмотря на смешение двух функциональностей, легко прослеживается, для какой функциональности написана данная функция. Возвращаясь к теме, только автор вопроса может посмотреть и сказать, что он хотел видеть - пример с id=b1  или b2.

Что касается теории (не знаю, кому говорю smile ), то замыкание выполняется при выполнении функции, когда вызываем её с (). Тогда получаем работу её со свойством объекта elemClassCreateForm2 , elemClassCreateForm3 . При document.getElementById('b1').onclick=elemClassCreateForm2.testClick; объявлено тело функции без замыкания с контекстом. А оно есть объект, ссылка на который ведёт в ClassCreateForm . Запустив его при клике на <div id=b1> , получаем замыкание с контекстом "класса" ClassCreateForm , но не того объекта, ссылка из которого указала функцию. Таким образом, мы могли добраться до переменных класса ("вызвали метод класса"), но не имели связь с объектом elemClassCreateForm2. Возможно, это вызвало вопрос автора темы. 
PM WWW   Вверх
Sardar
Дата 6.6.2006, 13:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



Цитата(12345c @  6.6.2006,  03:19 Найти цитируемый пост)
Тогда получаем работу её со свойством объекта elemClassCreateForm2 , elemClassCreateForm3 .

В каком смысле? Никакой связи у замыкания лежащего в testClick с обьектами elemClassCreateForm2 и elemClassCreateForm3  нет. Они винды только по имени, как и в любой другой функции определённой где угодно, т.к. являються глобальными в данном случае обьектами.

Цитата(12345c @  6.6.2006,  03:19 Найти цитируемый пост)
При document.getElementById('b1').onclick=elemClassCreateForm2.testClick; объявлено тело функции без замыкания с контекстом.

Нет, ничего обьявленно не было. Замыкание уже создано с контекстом от ClassCreateForm при создании обьекта elemClassCreateForm2. В данной строке происходит простое присваивание, такое же как присваивание любого другого значения.

Цитата(12345c @  6.6.2006,  03:19 Найти цитируемый пост)
Запустив его при клике на <div id=b1> , получаем замыкание с контекстом "класса" ClassCreateForm , но не того объекта, ссылка из которого указала функцию.

Назвать конструктор классом нельзя не только из идейных соображений, ты физически не можешь вызвать какие либо другие "методы класса" из своего замыкания. Да, можно явно задать ссылку и на созданный обьект и на конструктор, после пользоваться ими. Но это именно "явно что ли бо сделать", а не фишка поддерживаемая языком. Связи у замыкания с контруктором ClassCreateForm на прямую (так что бы можно было что нибудь с этим сделать полезное) тоже нет, сохраняетсья только конктекст вызова.

Цитата(12345c @  6.6.2006,  03:19 Найти цитируемый пост)
Таким образом, мы могли добраться до переменных класса ("вызвали метод класса")

Попробуй smile  Мы говорим именно о переменных класса, т.е. статических переменных как это принято в Java или в C#. Статические переменные видимы и едины для всех экземпляров класса, т.е. в JS должны определятьйся в прототипе конструктора. Из созданного замыкания у нас нет доступа (кроме как по имени, как и в любой другой функции smile ) к функции что создала замыкание, следовательно нет доступа до прототипа. Опять же если мы не сделаем ссылку на требуемые обьекты явно в одном месте с определением замыкания.  


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
solenko
Дата 6.6.2006, 13:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



Мдя... Нужно мне учится задавать вопросы...

Мне не подходит ни один из предложенных вариантов. 
У меня в конструкторе класса создается форма. На клик по одной из кнопок этой формы мне необходимо подвесить обрадотчик, который, скажем, прятал бы форму. Пытаюсь сделать это так:
Код

function closeEditForm(){


}

function submitEditForm(){
 alert(this.dict);
}

function editForm(dict, parent){
    this.dict = dict;
    this.container = document.createElement('DIV');
    this.container.style.border= 'solid red 1pt';
    this.Close = closeEditForm();
    this.Submit = submitEditForm();

    document.body.appendChild(this.container);

    this.parent = document.getElementById(parent);
    if (this.parent == null){
        alert('Invalid parent');
        exit;
    }
    this.container.innerHTML = '<table align=center class="editForm">';
    switch (this.dict){
        case 'functions': this.container.innerHTML += createFunctionsForm(); break;

    }
    bOkId = Math.random();
    this.container.innerHTML += '<tr><td align=center><input type=button id='+bOkId+'></td>';
    bCancelId = Math.random();
    this.container.innerHTML += '<td align=center><input type=button id='+bCancelId+'></td></tr>';
    this.container.innerHTML += '</table>';
    document.getElementById(bOkId).onclick = function (){this.Submit()};
    document.getElementById(bCancelId).onclick = function(){this.Close()};
}


В результате плучаю алерт при создании объекта и тот *Андефайнед*. Подскажите что делаю не так. 


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
Sardar
Дата 6.6.2006, 13:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бегун
****


Профиль
Группа: Модератор
Сообщений: 6986
Регистрация: 19.4.2002
Где: Нидерланды, Groni ngen

Репутация: 78
Всего: 317



this.Submit() и прочие вызываешь из замыкания (функции). Как уже неоднократно говорилось this у каждой функции свой и являеться обьектом на ком вызвали функцию. В данном случае используеться "традиционная" модель событий, т.е. браузер вызывает твой_html_елемент.onclick(), в результате this указывает на твой элемент. Не веришь? smile  поставь им поля Submit и Close, как ты это пытался сделать для editForm. Только одно но, вызывать и присваивать функцию это две разные вещи. Убери скобки.  


--------------------
 Опыт - сын ошибок трудных  © А. С. Пушкин
 Процесс написания своего велосипеда повышает профессиональный уровень программиста. © Opik
 Оценить мои качества можно тут.
PM   Вверх
solenko
Дата 6.6.2006, 14:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Эксперт
***


Профиль
Группа: Завсегдатай
Сообщений: 1473
Регистрация: 15.1.2006
Где: Украина

Репутация: 9
Всего: 67



Честно говоря, ничего не понял... Я ж задавал вопрос в ветку *для начинающих* оценивая не сложность вопроса, а свой уровень.smile Скобки убрал. Алерт исчез. Сейчас при клике на кнокпу выдает сообщение о ощибке:
*Объект не поддерживает это свойство или метод.*
на строке 
document.getElementById(bCancelId).onclick = function(){this.Close()};

с вариантом 
document.getElementById(bCancelId).onclick = this.Close;
получаем undefined.

 


--------------------
Ла-ла-ла-ла
Заметьте, нет официального подтверждения, что это не просто четыре слога.
PM MAIL WWW ICQ Skype   Вверх
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0623 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.