Как связать событие DOM-элемента и объект JavaScript?

415

12 июня 2017, 23:43

Простой пример, я кликаю на некий блок на веб-странице и мне нужно, чтобы объект 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, чтобы сделать это более обобщенно и кратко?

Answer 1

Можно использовать 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>

Answer 2

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