Pass paramtes to event function - javascript

I bulid a function to event and I want to know how can I pass parameters to that function?
I use addEventListener method to add events
What I need is to pass the element variable to the function mean this object
For example if I use attribute method to add event I do like this:
<div onclick="function(this)">
And then the function will get the div element
Now my question is how can I pass the this object to the function when I use addEventListener
Is there anyway to get this thing?

Blah.addEventListener(function(event){
var element = event.target;
});
Posted from phone. Please forgive

http://www.w3schools.com/jsref/met_document_addeventlistener.asp
Define your listener with a parameter, this will be an event object.
In this object you will find the triggered element.

In an event handler, such as onclick, 'this' will automatically point to the element, where the event is triggered. You can use it inside your anonymous function.
Note: It's not a string but a HtmlElement.
Hope I have understood your question correctly.

Related

How to remove event listener from anonymous function without naming it?

I need to remove event listener from a function.
I've searched here and google but all solutions I found were about make a reference or give name to each function created, but my function is created within a loop so it doesn't work:
for(let i = 0; i < boxSelected.length; i++){
boxSelected[i].addEventListener("click", function(){
// my code here
Is there a way to add the event listener to each element created inside loop and distinguish between them later?
or
Can I remove the event listener without need to name it?
removeEventListener requires you pass reference to function not its name.
So once you save function itself into any variable(say, array or object with linking to index) you will be able to remove it later.
Also you can put single listener on common parent node and disable/enable processing for specific elements by changing some their attribute

How To Make This Refer To My Clicked Object Javascript

button.setAttribute("onClick" , "addToCart()");
I wrote this line in creation of an element to do an action, but when i click it and deal with "this" it refers to window not the object
How can i fix this to make the click refer to my element in order to get some data from the parent ?
Don't use setAttribute for event handling. Use addEventListeners instead. For now, you could make your function like this, which uses event object that gets passed when it's called on the triggering of the event, in this case click
function addToCart(e){
var that = e.target; // use that instead of this
// more code goes here
}
And then you could just set it to the onclick property
button.onclick = addToCart; // pass the function reference

Event target as a returned value in javascript

Does anyone know how can I access an event target?
i.e, say I have a function:
func(event){...}
so that parameter "event" is a string which describes the event name (such as "onclick"/"onload" etc.), how can I get the target of this?
Suppose the given parameter is "onclick" and the click that happened was on a button called "button1", how can I get button1 as a returned value?
Thanks!
Unless you edited the function context (as with $.proxy), then you can use this to get the current element (and $(this) will return the jquery object).
Regardless if you did edit the context, you can always use event.currentTarget (or $(event.currentTarget) for the jQuery object, again)

Can someone explain why this is passing in an object

I have something like the following..
$(document).ready(function() {
$('#doReport').click(doReport);
});
function doReport(type) {
if (type === undefined) {
type = 'blah';
}
alert (type);
}
If I run doReport() from the console or standalone in the javascript with nothing in it, it will return 'blah' (as expected), and obviously if I call doReport('wibble'); it returns 'wibble' as you would expect.
But if I run it by clicking the element with ID doReport (utilising the bind I set up in .ready) it returns [object Object]
I don't understand why that would be the case.
The jQuery library passes your event handlers an "event" object. It will always be there. It's a "wrapped" or "fixed" version of the native browser object, making it somewhat easier to deal with.
Here is the documentation for such objects.
Also of note is the fact that jQuery will invoke your handler functions such that this refers to the DOM element for which the handler is being invoked.
Also also, as #Ericson578 points out in a good comment, jQuery allows additional parameters to be set up, which means that your handler may be passed additional parameters. That might be useful if you've got a single event handler function to be bound to different elements, but you'd like to qualify its behavior with some different flags or whatever based on the particulars of an element.
Event handlers receive an event object as a parameter.
This is because event handlers are triggered with an object (specifically, the event object) passed as the first argument.
This is the reason you see such syntax as
$('#doReport').click(function(e) {
If you want to call your function without any parameters, you'll need to create a wrapping function to do so:
$(document).ready(function() {
$('#doReport').click(function() {
doReport();
});
});
When jQuery calls the function passed as parameter to click, it passed event object as the argument hence you are getting the alert as [object Object].
Check this:
http://api.jquery.com/click/
From JQuery - .click()
.click( handler(eventObject) )
handler(eventObject)A function to execute each time the event is triggered.
Your doReport() function is getting an event object.
wrap it with another function if you need to pass an argument to your function.
$(document).ready(function() {
$('#doReport').click(function(event){
doReport('blah');
});
});

jQuery: adding change event handler with predefined function

So I have the following:
var change_handler = function(element) {
// ... do some fancy stuff ...
}
Now, I want to attach this to an element. Which is the better/best or more correct method?
$('element_selector').change(change_handler(this));
Or...
$('element_selector').change(function() { change_handler(this); });
And does it make any difference if you're passing the object to the function or not?
Neither..
$('element_selector').change(change_handler);
change_handler will be the so to speak pointer to the method and the argument of the element is already passed by jQuery
If you were to use $('element_selector').change(change_handler(this)); it wouldn't actually assign the method as the handler but rather run the method and attempt to assign the result as the handler, the other option is superfluous because you can use the method name as described above instead of re-wrapping the method.
This is another way to approach the problem given by the OP... partial function application a la another SO Q. Bind the change handler with the arg of interest and pass the resulting partial as the arg to the change handler:
var myChangeHandler = partial(change_handler, this);
$('element_selector').change(myChangeHandler);

Categories