How to assign addEventListener as ON in JavaScript?

Question

How to assign addEventListener as on in pure JavaScript? Not jQuery.

// i can do this
// assigning document as d
// assigning querySelector as $

const d = document
const $ = x => d.querySelector(x)

//but how to do this

$('button').addEventListener('click',doSomething)

//to

$('button').on('click',doSomething)

//assiging addEventListener as on

The *easy* way would be to have a function `on` which takes the element, event and handler as arguments: `on($('button'), 'click', doSomething)`. While extending DOM elements is possible, I think it may still be frowned upon? Not sure. And introducing wrapper objects around DOM elements would certainly be less "easy". — Felix Kling, Jul 05 '17 at 15:36
@FelixKling i tried this. but could not control actions while working with several elements. — user557728, Jul 05 '17 at 15:45
I mean if i use 2 buttons then what happens. when the on function is going to run on which event how do i specify that and this on funtion has same 3 arguments — user557728, Jul 05 '17 at 15:57
If you have two buttons are you going to call `on` twice: `on($('button1'), 'click', doSomething); on($('button2'), 'click', doSomething)`. — Felix Kling, Jul 05 '17 at 15:58
yes thanks...maybe i was doing something wrong while trying this method earlier — user557728, Jul 05 '17 at 16:10

score 2 · Answer 1 · answered Jul 05 '17 at 15:46

You could create your own on() function -

function on(object, event, callback) {
    object.addEventListener(event, callback);
}

Or you could look into prototyping for object functions - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

score 1 · Answer 2 · answered Jul 05 '17 at 15:36

1

Not sure what you mean by saying simple, but here is the alternative way:

document.getElementById("id").onclick = doSomething;

answered Jul 05 '17 at 15:36

Bakhtiiar Muzakparov

2,308
2
15
24

What about this do you consider "better" that you'd recommend it over `addEventListener`? – Felix Kling Jul 05 '17 at 15:46
Well, it is kind of subjective, it depends on your need. The top answer here explains it very well: https://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick – Bakhtiiar Muzakparov Jul 05 '17 at 15:50
Oh, I know what the differences are, I was just wondering whether you have a specific reason for suggesting this over any other solution that involves `addEventListener`, considering the limitations this solution has. – Felix Kling Jul 05 '17 at 15:53
yes, you definitely do I believe, no particular reason other than the OP had already used `addEventListener` along with jQuery, so I tried to show alternative way, assuming it would be simpler for the OP to use `onclick` – Bakhtiiar Muzakparov Jul 05 '17 at 15:57
I see. FWIW, the OP is not using jQuery. – Felix Kling Jul 05 '17 at 15:58
my bad, I just got accustomed to jQuery way of $ I haven't seen function declaration in the beginning, thanks for pointing it out – Bakhtiiar Muzakparov Jul 05 '17 at 16:00

How to assign addEventListener as ON in JavaScript?

2 Answers2