Alternative to event.srcElement.id

Question

Currently I have a function that works perfectly for IE, Chrome and Safari in order to get the ID name of a textbox I'm placing a focus on within a Gridview.

function onTextFocus() {
        alert(event.srcElement.id);
    }

The function is called upon during a RowDataBound for the gridview:

protected void ItemGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ((TextBox)e.Row.FindControl("txtQuantity")).Attributes.Add("onfocus", "onTextFocus();");            
    }
}

However it doesn't work for Firefox as it doesn't recognize srcElement. So I'm looking for an alternative that would work for all browsers. After scouring Google I came up with these alternatives but I either get an undefined error or ReferenceError. Any ideas why?

function onTextFocus() {
        alert(this.id);
        alert(event.currentTarget.id); 
        alert(event.target.id);    
        alert(event.currentTarget); 
        alert(event.target);                          
        alert($(this).attr('id'));
        alert($(obj).attr("id"));            
        alert($(this).id);
        alert($(this).get(0).id);            
        alert($(this).prop("id"));
    }

Answer 1

Begin Update: Now that I see the dotNet Code:

protected void ItemGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        ((TextBox)e.Row.FindControl("txtQuantity")).Attributes.Add("onfocus", "onTextFocus(event);");            
    }
}

If you add the event parameter it should pass it

But depends on what you really want to do there might be a better way.

End Update

The short answer is use event.target here is the specification on MDN https://developer.mozilla.org/en-US/docs/Web/API/Event/target it shows it is supported by the major browser. In your case you have to add the parameter eventin your event-handling function.

function onTextFocus(event) {
    alert(event.target.id);
}

if you don't declare the event Parameter, you cannot access it. (It also depends on how you are binding the event)

With standard Javascript (check out https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), short example here:

   window.onload = function(){
    
     document.getElementById("test").addEventListener('focus', onclick1);

    function onclick1(event){
        console.info(event.target.id);
    }
 };

<input type="text" id="test" />

with jQuery (check out this link http://api.jquery.com/on/) Short example here:

$( function(){
    
     $("#test1").on('focus', onclick1);

    function onclick1(event){
        console.info(event.target.id);
    }
 });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test1" />

Update:
(btw.: You could use the global window.event property, which holds the current event, BUT it is recomended to use the event which is passed to the event handler)

Answer 2

Instead event.srcElement use event.target

https://developer.mozilla.org/es/docs/Web/API/Event/target

Answer 3

try with e.target.id. you should use it instead of event.target.id, which is already deprecated. if you are trying to get properties from an html element when clicking it or similar, you can also try calling it by value with e.target.value. hope it helps someone.