Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.90/21: Рейтинг темы: голосов - 21, средняя оценка - 4.90
2 / 2 / 0
Регистрация: 28.06.2013
Сообщений: 23

Ссылка на объект, вызвавший событие

21.08.2014, 19:53. Показов 4590. Ответов 9
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Всем доброго времени суток!
Недавно начал изучать JavaScript и пишу свой первый калькулятор. Возникла необходимость при нажатии на кнопку с цифрой добавить на дисплей ту цифру, которая, собственно и была нажата.
Выхода, собственно, вижу два:
1) Некрасивый и неудобный, и вообще "фю". Заключается в том, что бы для каждой кнопки писать отдельный обработчик события.
2) Более элегантный. Для всех кнопок-цифр зарегистрировать один обработчик события, который обращается к кнопке, что возбудила событие и дописывает на дисплей button.textContent этой кнопки. Но никак не могу додуматься, как же получить ссылку на объект, возбудивший событие.
Прошу сообщество помощи. jQuery не знаю, поэтому варианты с jQuery мне вряд ли помогут.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.08.2014, 19:53
Ответы с готовыми решениями:

Ссылка на объект
Есть код: var a= { sv:4 }; console.log(a);//{sv:4} var b=a; console.log(b);//{sv:4} b.sv=1; console.log(a);//{sv:1}

Ссылка на объект
var user1 = { name: "Вася"}; Вот эта вот часть { name: "Вася"} из выражения выше возвращает объект или ссылку на...

[ООП] Ссылка на объект в контексте этого объекта
Привет! Тут столкнулся с такой ситуацией: var obj = { a: 1024, b: "lorem", c: new...

9
Модератор
Эксперт JS
 Аватар для Eva Rosalene
5241 / 2115 / 416
Регистрация: 06.01.2013
Сообщений: 4,846
21.08.2014, 20:14
JavaScript
1
event.target.textContent
Функция должна принимать event первым параметром.
1
2 / 2 / 0
Регистрация: 28.06.2013
Сообщений: 23
21.08.2014, 20:33  [ТС]
Спасибо. Еще обнаружил интересную штуку. Код
JavaScript
1
2
3
4
            numsOnClick: function(event) {
                //this.appendDisp(event.target.textContent);
                console.log(this === event.target);
            }
возвращает true.

Добавлено через 5 минут
Еще один вопрос. Хотелось бы поместить этот обработчик прямо в объект "калькулятор". Т.к. this теперь указывает на вызвавший объект, как достучаться из обработчика до методов калькулятора?
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        Calc.prototype =
        {
            calcSect: document.createElement("section"),    //секция, содержащая калькулятор
            numTable: new Table(3,3),                       //HTML-таблица числовых кнопок
            nums: new Array(),                              //массив числовых кнопок
            constructor: Calc,                              //конструктор
            getElem: function() {                           //возвращает узловой элемент секции калькулятора
                return this.calcSect;
            },
            replaceDisp: function(str) {                     //Заменяет содержимое
                this.disp.textContent = str;                 //дисплея калькулятора строкой-параметром
            },
            appendDisp: function(str) {
                this.disp.textContent = this.disp.textContent + str;
            },
            //TODO: именно тут я и остановился. 
            numsOnClick: function(event) {
                Calc.appendDisp(event.target.textContent);
            }
        }
0
Вежливость-главное оружие
 Аватар для some_name
233 / 234 / 86
Регистрация: 19.02.2013
Сообщений: 1,446
21.08.2014, 20:54
Поробуйте так:
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
        <script type="text/javascript" src="scripts.js" ></script>
        <title>Index</title>         
    </head>
    <body>       
        <input type='button' value='1'; onClick="f(this);"/>
        <input type='button' value='2'; onClick="f(this);"/>
        <input type='button' value='3'; onClick="f(this);"/>
        <input type='button' value='4'; onClick="f(this);"/>
        <input type='button' value='5'; onClick="f(this);"/>
        <p></p>
        <div id='container'>
            
        </div>
    </body>
</html>
JavaScript
1
2
3
function f(event){
    document.getElementById('container').innerHTML += event.value;
}
Название: Capture.PNG
Просмотров: 112

Размер: 1.8 Кб
1
2 / 2 / 0
Регистрация: 28.06.2013
Сообщений: 23
21.08.2014, 21:34  [ТС]
Конечно, вариант, но немного не то, что мне нужно. Дело в том, что я хочу представить калькулятор в виде объекта и вся информация о нем должна храниться внутри в виде полей.

Добавлено через 22 минуты
Решил с помощью замыкания. Спасибо всем, кто пытался помочь. Если интересно, ниже код.
JavaScript
1
2
3
4
5
6
numsOnClick: function() {
                var calc = this;
                return function(event){
                    calc.appendDisp(event.target.textContent);
                }
            }
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
22.08.2014, 12:58
some_name, давать переменной, которая является ссылкой на объект, имя event - это оксюморон
имхо, предпочтительней так:
__________________
function f (obj)
{
document.getElementById ('container').innerHTML += obj.value;
}

__________________
и зачем у вас здесь -- <input type='button' value='1'; onClick="f(this);"/> -- точка с запятой?
и почему здесь же у значений разных атрибутов используются разные кавычки: у type и value - одинарные, а у onclick - двойные?
в этом есть какой-то скрытый смысл?
0
2 / 2 / 0
Регистрация: 28.06.2013
Сообщений: 23
23.08.2014, 00:33  [ТС]
Согласен! Это же ссылка на объект, который инициировал событие, а не на событие.
0
Модератор
Эксперт JS
 Аватар для Eva Rosalene
5241 / 2115 / 416
Регистрация: 06.01.2013
Сообщений: 4,846
23.08.2014, 00:36
Цитата Сообщение от kalabuni Посмотреть сообщение
которая является ссылкой на объект, имя event - это оксюморон
И почему же? Ссылка-то на ивент
Вот event.target - ссылка на узел DOM, да.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
23.08.2014, 16:48
FraidZZ, не тупите
event - это событие
коллега some_name передает функции в качестве параметра тег (сиречь объект), на котором произошло событие клика (тот самый this)
а внутри функции some_name именует этот объект именем event

Цитата Сообщение от FraidZZ Посмотреть сообщение
Вот event.target - ссылка на узел DOM, да.
у some_name такой конструкции в коде нет
1
23.08.2014, 16:58

Не по теме:

Цитата Сообщение от kalabuni Посмотреть сообщение
у some_name такой конструкции в коде нет
Я коды перепутал :-[

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
23.08.2014, 16:58
Помогаю со студенческими работами здесь

HTML, есть ссылка, как отменить событие перехода при нажатии?
ну чтобы если ее нажимать, то оно бы не шло по ней куда-либо, а выполняла нужную мне функцию напр. alert(&quot;link&quot;);

Как выбрать обьект вызвавший событие?
У меня есть div с объектами стиля class в нем. (Их много и каждому давать свой div не вариант.) Каждый объект вызывает событие (например...

Проблема с массивами + System.NullReferenceException: "Ссылка на объект не указывает на экземпляр объект
Ошибка выскакивает на atsakymai = new string; В первой форме //ФОРМА 2: public partial class Form2 : Form { ...

Если объект добавлять в 2 контейнера, то в них будет ссылка или новый объект?
Есть объект - obj. Последовательно добавляю его в два контейнера container1.add(obj); container2.add(obj); Если я удалю...

Есть ссылка на объект. Можно ли изменить объект, который хранится по этому адресу?
Есть ссылка на объект. Можно ли изменить объект, который хранится по этому адресу? Т.е. не меняя саму ссылку, изменить тип объекта, на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
10
Ответ Создать тему
Новые блоги и статьи
Функция установки текстового статуса в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru