This question already has answers here:
Why Firefox says that window.event is undefined? (call function with added event listener)
(6 answers)
Closed 1 year ago.
Cuz if I skip it, the output is the same. Why we need it?
<p id='p'>TEXT</p>
<script>
p.onclick=function(event){ //with parameter
alert(event.target.tagName); //P
}
</script>
Now skip event, same output.
<p id='p'>TEXT</p>
<script>
p.onclick=function(){ //without parameter
alert(event.target.tagName); //P
}
</script>
Many tutorial will keep the parameter, I wonder why we need it? Why don't we make it simple? I just keep the original name of event in the function and it works out.
Because window.event is deprecated and is not supported by all browsers.
You should avoid using this property in new code, and should instead use the Event passed into the event handler function. This property is not universally supported and even when supported introduces potential fragility to your code.
Related
This question already has answers here:
addEventListener, arrow functions, and `this` [duplicate]
(1 answer)
What does "this" refer to in arrow functions in ES6?
(10 answers)
Closed last year.
So I'm dealing with a little problem..
I'm trying to modify drag-and-drop code and came across a problem, since I want to have multiple drop areas and one function for all of them.
I have this code:
dropArea.addEventListener("dragover", (event)=>{
event.preventDefault(); //preventing from default behaviour
dropArea.classList.add("activated");
dragText.textContent = "🖐 Release to Upload File";
});
And specified dropareawitth querySelector:
const dropArea = document.querySelector(".drag-area")
Now I need to modify it to work with multiple drop zones. I thought to just replace the "droparea" inside the event to "this" something like that:
this.classList.add("activated");
but it does not work. I even tried:
$(this).classList.add("activated");
Returns this error:
Uncaught TypeError: Cannot read properties of undefined (reading 'add')
Any solutions? I'm stuck...
As your event handler is an arrow function, the value of this is not influenced by the caller, so you cannot use it to get the DOM element. You can use event.target.
event.target.classList.add("activated");
As to your final attempt: $() does not return a DOM element, but an array-like "jQuery" collection object, which doesn't have such properties as classList.
This question already has answers here:
JavaScript closure inside loops – simple practical example
(44 answers)
addEventListener calls the function without me even asking it to
(5 answers)
Closed 5 years ago.
What i am trying to id attach addEventListener() to all the input fields so that every time a keyup event is activated so alert messages pop up for every input field
var inputs = document.querySelectorAll(".form-control");
for(var i=0;i<inputs.length;i++){
elem = inputs[i]
elem.addEventListener("keyup",alert(i))
}
this code does not work. it only works on page load. it only loops it one time
What actually happens in the line elem.addEventListener("keyup",alert(i)) is that the function-call alert(i) is executed and the return value of that function call is then added as an event listener. This obviously doesn't make sense, because 1. alert doesn't return anything and 2. you only want to execute it when the event happens.
What you actually seem to want to do is bind the function-call alert(i) itself to the event listener, not its return value.
You could assign the alert-function to the keyup event using elem.addEventListener("keyup",alert). But in that case you can't pass any arguments to it. If you want to do this, you can use Function.bind to create a new function from a function and a list of arguments.
elem.addEventListener("keyup", alert.bind(null, i))
If you need to support old browsers which do not support bind yet, this is an alternative syntax which generates an anonymous function as an event handler:
elem.addEventListener("keyup", function() {
alert(i);
})
There is, however, another issue with your code. Every event handler will have the same value for i. Check the question mentioned by Sterling Archer's comment on the question for a solution.
This question already has an answer here:
Javascript events: window.event vs argument reference (function)
(1 answer)
Closed 5 years ago.
While looking back over some JS I'd written in the past, I noticed that I was trying to access event.keyCode in an event handler, but my function's only parameter was e, not event. So, while I would expect to get a "Uncaught ReferenceError: event is not defined", I instead found that my script works as expected (at least in Chrome).
document.body.addEventListener('keyup', function(e) {
if (event.keyCode === 13) {
// ...
}
});
In fact, if I place a console.log(e === event) in that handler, I get true.
After a little testing (in a JS Bin) it seems like this must apply to every such event, making event another sort of "sly" local variable like arguments that appears in a function without asking for it in a parameter.
This makes me wonder:
Are these the only two "sly" local variables?
Is this behavior with event in Chrome consistent with other browsers & JS environments?
Depending on the browser, there is a global event variable that refers to the currently fired event.
This question already has answers here:
jQuery equivalent of JavaScript's addEventListener method
(7 answers)
Closed 8 years ago.
I have the below code where I successfully disable the properties
.prop("onclick", null)
.prop("onmouseover", null)
.prop("onmouseout", null);
Now if I want to rebind the click event what should I do.
For adding events back to a element use the bind function.
$("YourElement").bind("event",function(){
//Do what you want.
}
You can do it with many ways. I don't use to call the prop() method, but I think you just have to use it and set as your second parameter the name of your function.
function yourFunction()
{
// The job with onclick
}
DOMElement.prop("onclick", "yourFunction");
You can also use anonymous functions.
Use this documentation to work : http://api.jquery.com/prop/
I suggest you should use removeProp() instead of prop("yourprop", null) !
This question already has answers here:
What is the purpose of passing-in undefined?
(3 answers)
Closed 8 years ago.
I'm looking at jquery resize plugin and can't understand certain things about how it works:
usually we only pass in Jquery object into jquery plugins, like this:
(function($){
....plugin code....
})(jQuery);
In "resize" plugin there are window and undefined objects being passed in:
(function($,window,undefined){
....plugin code....
})(jQuery,this);
IMHO - window is a global object anyway - why do we need to pass it in? the logic behind passing in undefined object I understand even less. I'm sure there's gotta be some reason for it - but I cannot think of any.
Can someone explain why is it being done?
this is explained very well in this video.
basically, you can set those variables in the self invoking function to ensure they work as expected.
"the asshole effect" undefined = true; -paul irish
furthermore by passing these as arguments they can also be minified.
ie.
(function(A,B,C){
....plugin code....
})(jQuery,this);