-1

Простой пример, я кликаю на некий блок на веб-странице и мне нужно, чтобы объект JS, не связанный с этим DOM-элементом (не BOM этого элемента), понял, что нам нужен именно он. Т.е.

<div class="square"></div>

Имеем DOM-элемент Теперь в JS Имеем объект:

var obj = {
    print: function() {
        console.log("Hi, I've been called!");
    }
};

$('.square').click(function() {
    ...Нужно каким то образом вызвать именно obj.print, т.к. подобных объектов и DOM-элементов имеется очень много подобных...
};

Решением служит case, но если прописывать так, то выйдет слишком много кода. Так же существует вариант написать функцию с аргументом в виде нужного объекта и на нужном событии вызывать свой объект, но это так же не слишком кратко выйдет. Есть ли какие-нибудь средства в JS, чтобы сделать это более обобщенно и кратко?

3
  • почему просто не вызвать obj.print()?
    – Grundy
    12 июн 2017 в 8:29
  • может потому что я написал, что объектов и элементов много в проекте? не только obj используется
    – Chamond
    12 июн 2017 в 10:13
  • в примере ты никак не разделяешь для какого из элемента нужно вызывать obj. Поэтому вполне подходит просто вызов obj.print()
    – Grundy
    12 июн 2017 в 12:23

2 ответа 2

1

Может я не совсем понял вас но делегирование событий должно помочь. Вот тут можно почить как это работает. https://learn.javascript.ru/event-delegation

2
  • Интересно что предложенный ответ выше тоже использует делегирование, почему ему минус не влепили? Слов нет... 12 июн 2017 в 9:05
  • а где в ответе выше делегирование?
    – Grundy
    12 июн 2017 в 12:22
0

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

const relations = new Map();

// Объекты, которые вы хотите связать
const objects = [
  {text:"button1"},
  {something:"button2"},
  ["button3","related","array"],
  45 // или не объекты, не важно)
];

// Ключом является DOM элемент
click = e => console.log(relations.get(e.target));

// Привязываем одно к другому
objects.forEach( (object, index) => 
    relations.set(document.getElementById(`b${index}`), object)
);

// навешиваем обработчики
document.querySelectorAll('button').forEach(b => b.onclick = click);
  
<button id="b0">0</button>
<button id="b1">1</button>
<button id="b2">2</button>
<button id="b3">3</button>
<button id="b4">4</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.