addEventListener vs things like onclick, onchange, etc. (pure javascript)

I don't think you can get away without using bind in those situation. But in cases when you don't need to change context of this and want to pass arguments, you can write:

var arg = 5;
element.addEventListener('click', myFunction.bind(null, arg));

Here you don't change a context - just passing a function that will not execute immediately. I don't know if it would count for you as thing making code less readable but I've adopted and using this solution in my own code. :)

You can use addEventListener as long as what you're listening for broadcasts an event (like a click or change event). In my experience, this is often preferred to assigning to onclick or similar, because you can add multiple listeners, instead of a single onclick function. In fact, though the rabbit hole is deeper than I'm willing to travel right now, I would bet that this is how jQuery handles it under the hood

When I'm not working in a framework that has it's own way of handling event listeners I tend to use addEventListener exclusively. Apart from, as was mentioned before, ability to assign multiple listeners, also the ease of removeEventListeners in that approach is added benefit. I can clearly see when I add one, when I remove one etc. Of course as long as you don't need IE8 and before compatibility.

Hi, I've been getting a in a bit of tangle with a project I'm working on. I was trying to exclusively use addEventListener, but have found I get a bit stuck when I need to pass arguments to the function reference. I did find that I could get around it by using the bind method to send my argument by redefining the functions' 'this' but doing so makes my code a lot less readable so I'm currently using onSomething type event handlers.

Does anyone have any information that would help, or am I making a more fundamental mistake?

Thanks!