JavaScript counterpart to JQuery's .on( multiple mouse events)

Question

I am trying to convert an old app from JQuery to JavaScript.

What would be the JavaScript counterpart to this JQuery line of code?

  this.element = el.on('click mouseenter mouseleave', (this._handleMouse.bind(this), this));

Many Thanks

Answer 1

Do you need this one maybe

object.onclick=function(){your code on click};

Works the same with mouseenter and mouseleave. You can also give a function as value instead of making one without name.

Answer 2

Note , not certain about purpose of second this at

(this._handleMouse.bind(this), this)

?

---

Try creating an object having properties events array , element DOM element, _handleMouse event handler , utilizing Array.prototype.forEach() to iterate events array attaching event to settingas.element , with Function.prototype.bind() set to settings.element

 var settings = { events: ["click", "mouseenter", "mouseleave"], element: document.getElementsByTagName("div")[0], _handleMouse: function(e) { console.log(this.textContent, e.type) } }; settings.events.forEach(function(event) { settings.element["on" + event] = settings._handleMouse.bind(settings.element) }) 

 <div>abc</div>