I'm using a component written in JavaScript. The component is exposing some events. The problem is I can't figure out who is the sender. They don't provide an instance of the sender as a parameter (like jQuery does).
My question is: Is there any way to hook up the event using JavaScript/jQuery or any other way to get the sender?
All I know is the event name.
If I am correct in what you want: event.srcElement
http://msdn.microsoft.com/en-us/library/ms534638%28VS.85%29.aspx
Note: This does not work in Firefox.
For FF and most likely Webkit:
img.onclick = function (e) {
if (window.event) e = window.event;
var srcEl = e.srcElement? e.srcElement : e.target;
// srcEl now can be used x-browser.
// (rest of the script here)
}
Related
I don't understand the motivation behind window.event or window.event.srcElement. In what context should one use this? What exactly does it represent in the DOM?
Here what w3school says about event object:
Events are actions that can be detected by JavaScript, and the event
object gives information about the event that has occurred.
Sometimes we want to execute a JavaScript when an event occurs, such
as when a user clicks a button.
You can handle events using:
node.onclick = function(e) {
// here you can handle event. e is an object.
// It has some usefull properties like target. e.target refers to node
}
However Internet Explorer doesn't pass event to handler. Instead you can use window.event object which is being updated immediately after the event was fired. So the crossbrowser way to handle events:
node.onclick = function(e) {
e = e || window.event;
// also there is no e.target property in IE.
// instead IE uses window.event.srcElement
var target = e.target || e.srcElement;
// Now target refers to node. And you can, for example, modify node:
target.style.backgroundColor = '#f00';
}
Not sure if this difference has been changed in newer browser versions but basically, "In the Microsoft event accessing model there is a special property window.event that contains the last event that took place." (from reference)
So, to write an event handler compatible across browsers you'd need to do something like this:
function doSomething(e) {
if(!e) {
var e = window.event;
}
var ele = e.target || e.srcElement;
// get the clicked element
// srcElement for IE, target for others
}
element.onclick = doSomething;
Reference:
http://www.quirksmode.org/js/events_access.html
function IndentifyMe(){
alert("You clicked on " + window.event.srcElement.tagName);
}
<body onclick = "IndentifyMe()">
Try this code, with lots of element in body tag, and try clicking different element
Events are the lifeblood of user interaction. Without events, you
couldn't interact with the page.
Event handlers are used to invoke some JavaScript when a certain action happens. If you want some
behavior to be triggered when the user moves their cursor over an element, you use the onmouseover
event handler.
"DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition"
As given in this answer, We need to pass and $event object to the ng-click function, and access the target element using
$scope.setMaster = function(obj, $event){
console.log($event.target);
}
While event.target isn't a cross-browser property. To overcome this, quirksmode suggests the following
function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
}
Is there any other/better way of getting target element? Like when we bind using DOM/jQuery method, we can use this keyword to refer to clicked element.
Please suggest.
As a library, angularjs does this normalization so there is no need to do the browser specific code our self. it is handled within the library.
The event object passed to the click handler is normalized and will have the said properties irrespective of the browser(given the said browser is supported by the library)
I have some old code that I'm updating to work in firefox, and I've run across a problem.
In the code, there's a function that looks like this:
function tableEnter() {
myLocation = event.srcElement;
}
This doesn't work in firefox. I've researched this quite a bit, but most of the solutions I've found require an event to be passed to this function, and then act on the e parameter that was passed. ...Unfortunately in the code that I'm updating, I'm not getting any parameters passed.
What's the solution to making the event.srcElemet work in firefox, without any parameters being passed to my function?
Edit:
Okay, the question is becoming: How do i pass the event object to my tableEnter() function?
Here's what the code is currently doing:
$(document).ready(function () {
//make table rows
//for every new table row...
myRow.onmouseover = tableEnter; (this is probably a bad name. it should be like..rowEnter. But this is the way I found the code)
});
the question is now, how do i pass the event object into tableEnter() so that I can do the things suggested on the internet, and the answers below.
Thanks.
I honestly can't see why you would want to have access to the event object, without it being an argument of your handler. But, hey, that's just me. Although no parameters are specified, FF and chrome just do as they please and pass the event object to the handler anyway. So:
function tableEnter()
{
var evt = window.event || arguments[0];
var src = evt.target || evt.srcElement;
}
And that's it. Personally, I would advise you to do what the whole wide web is doing:
function handler(e)
{
e = e || window.event;
var target = e.target || e.srcElement;
}
Since you're using FF, you shouldn't try to diverge from any of the coding conventions or standards too much, however vague they might be. At least it's better than no standards or conventions at all.
In view of your update, just change your function definition to:
function tableEnter(e)
{
//though in jQuery, I suspect e is allready X-browser-proof
e = e || window.event;
//just leave ^^this^^ line out, and check in IE: alert(typeof e);
//if it alerts object, jQuery passed the event object for you
var theRow = this;//<-- this points to the row that triggered the mouseover
var jQRow = $(this);//gives you access to jQuery methods
var target = e.target || e.srcElement;//<-- mainly of importance in delegation
}
I don't understand the motivation behind window.event or window.event.srcElement. In what context should one use this? What exactly does it represent in the DOM?
Here what w3school says about event object:
Events are actions that can be detected by JavaScript, and the event
object gives information about the event that has occurred.
Sometimes we want to execute a JavaScript when an event occurs, such
as when a user clicks a button.
You can handle events using:
node.onclick = function(e) {
// here you can handle event. e is an object.
// It has some usefull properties like target. e.target refers to node
}
However Internet Explorer doesn't pass event to handler. Instead you can use window.event object which is being updated immediately after the event was fired. So the crossbrowser way to handle events:
node.onclick = function(e) {
e = e || window.event;
// also there is no e.target property in IE.
// instead IE uses window.event.srcElement
var target = e.target || e.srcElement;
// Now target refers to node. And you can, for example, modify node:
target.style.backgroundColor = '#f00';
}
Not sure if this difference has been changed in newer browser versions but basically, "In the Microsoft event accessing model there is a special property window.event that contains the last event that took place." (from reference)
So, to write an event handler compatible across browsers you'd need to do something like this:
function doSomething(e) {
if(!e) {
var e = window.event;
}
var ele = e.target || e.srcElement;
// get the clicked element
// srcElement for IE, target for others
}
element.onclick = doSomething;
Reference:
http://www.quirksmode.org/js/events_access.html
function IndentifyMe(){
alert("You clicked on " + window.event.srcElement.tagName);
}
<body onclick = "IndentifyMe()">
Try this code, with lots of element in body tag, and try clicking different element
Events are the lifeblood of user interaction. Without events, you
couldn't interact with the page.
Event handlers are used to invoke some JavaScript when a certain action happens. If you want some
behavior to be triggered when the user moves their cursor over an element, you use the onmouseover
event handler.
"DOM Scripting: Web Design with JavaScript and the Document Object Model: Second Edition"
there is an if statement on my company's website that makes one web page imcompatible with firefox
if(event.srcElement.getAttribute("onclick") == null){
...code..
document.mainForm.submit();
}
I've commented out the if statement conditions and now its working with forefox. My question is, what is event.srcElement.getAttribute("onclick"), is it important, would it cause problems in the future. also, is there something similar i can replace the condition with so that it works on firefox?
Edit:
function gotoRDManagerPT(PTId, bDDetailId) {
if(!proceed()) return false;
var target = event.target || event.srcElement;
if(event.target.getAttribute("onclick") == null) {
document.mainForm.displayRDManagerPT.value = "true";
document.mainForm.PTId.value = PTId;
document.mainForm.bDDetailId.value = bDDetailId;
document.mainForm.submit();
}
}
srcElement is proprietary property originally coming from IE. The standardized property is target:
var target = event.target || event.srcElement;
if(target.onclick == null) { // shorter than getAttribute('onclick')
//...
document.mainForm.submit();
}
Also have a look at quirksmode.org - Event properties for more cross browser information.
Regarding the question what it is doing:
event.target / event.srcElement contains a reference to the element the event was raised on. getAttribute('onclick') == null checks whether a click event handler is assigned to element via inline event handling.
Is it important? We cannot say because we don't know what the ...code.. is doing.
In IE the event object is available in the window object already; in Firefox, it's passed as a parameter in the event handler.
Example
JavaScript:
function toDoOnKeyDown(evt)
{
//if window.event is equivalent as if thie browser is IE then the event object is in window
//object and if the browser is FireFox then use the Argument evt
var myEvent = ((window.event)?(event):(evt));
//get the Element which this event is all about
var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
//To Do -->
}
HTML:
<input type="text" id="txt_Name" onkeydown="toDoOnKeyDown(event);"/>
As you notice when we called the function inside the html we have added a parameter event just in case the browser is Firefox.
I have read in an article that the event object in IE is called window.event and in Firefox we have to put it as a parameter.
In case you need it to be attached in the code:
document.getElementById('txt_Name').onkeydown = function(evt) {
var myEvent = ((window.event)?(window.event):(evt));
// get the Element which this event is all about
var Element = ((window.event)?(event.srcElement):(evt.currentTarget));
// To Do -->
};
Try quick fix as follows:
Include in code:
let target = event.target || event.srcElement;
and change
event.srcElement.XXXXX to target.XXXXX
this solves the issue with Firefox.