I have a div with onclick param:
<div onclick="some_function()"></div>
How can I access the event object inside the function? I need it to get event.target
function some_function()
{
event = event || window.event;
var target = event.target || event.srcElement;
//does not work in IE and Firefox, but works in chrome
}
This way:
<div onclick="some_function(event)"></div>
function some_function(evt)
{
// do something with evt (the event passed in the function call)
}
Note that the argument name MUST be event in the function call. In the event handler you can use the name you want.
A live example: http://jsfiddle.net/davidbuzatto/KHyAb/
If we work with event listeners, then you have in 'this' the html element and in 'event' the event object.
<a id="mya" href="#">Link</a>
var myA= document.querySelector("#mya");
myA.addEventListener("click", some_function);
function some_funtion() {
//Here the html element is: this
//Here the event object is: event
//event.target is not always equal to this
}
<div id="mydiv">click here <span>then here</span></div>
var myDiv = document.querySelector("#mydiv");
myDiv.addEventListener("click", other_function);
function other_function() {
alert(this === event.target);
}
Use the event to get to the target. Beware of target vs currentTarget issues:
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
<div onclick="some_function(event)"></div>
function some_function(event)
{
// event.target is the DOM element that triggered the event
}
this is not always the same as event.targetthis will always refer to the element with the handler, but event.target will refer to the most deeply nested element clicked. <div onclick="alert(this === event.target);">click here <span>then here</span></div><div onclick="some_function(this, event)"></div>
function some_function(elem, e)
{
//You have both: html element (elem), and object event (e)
//elem is not always equal to e.target
}
<div onclick="alert(this === event.target);">click here <span>then here</span></div>
Using event and this, both
document.querySelector("div").addEventListener("click", function(event) {
some_function(event, this);
}, false);
function some_function(currentEvent, currentObject) {
alert("Object is: " + currentObject.nodeName);
alert("Event is: " + currentEvent.type);
};<div>Click Me</div>