Set JavaScript 'this' to an element on click

I am looking for a way similar to jQuery's .attr() method, where when I click on an element (a li tag in this case) I can get the tags attributes.

So my question is, how can I make a function that when an li is click, the this variable in the function is equal to that DOM element. I am trying to do this without the use of jQuery.

This is what I have that I was thinking would work but it doe开发者_JS百科sn't:

function selected(){
    this.title = this.getAttribute("title");
}

Assuming there is an element li with the attribute title and an onclick with the function selected() as the choice.

In JavaScript, the value of this varies based on how a function is invoked. There are basically 3 patterns of invocation:

• Using the new operator e.g. new Foo(). In this case when Foo is being executed this refers to the new object that is being created.
• Dereferencing a method on an object e.g. foo.bar(). In this case when bar is being executed this refers to foo. When a method isn't dereferenced from another object, for example when just invoking a global method, the this refers to the global scope, or global object.
• Using apply or call e.g. foo.apply(bar). By using call or apply you can tell the interpreter what this should refer to during an invocation.
• As a somewhat special case, this refers to the node for event handlers.

In your case if you have a global function called selected that is invoked from an event handler such as the following:

<li onclick="selected()">

then during the invocation of selected, since it wasn't dereferenced from anywhere this will refer to the global object. If you want this to refer to the object whose event handler is firing then you need to invoke selected using the call or apply pattern and pass the value this (which will refer to the node) in as the context parameter.

<li onclick="selected.call(this)">

I usually try to shy away from using the call or apply since it isn't obvious from looking at the function what this will refer to. Therefore, in this case I would suggest passing in the node as a parameter.

<script>
    ...
    function selected(node) {
       node.title = node.getAttribute('title');
    }
</script>
...
<li onclick="selected(this)">

With all this being said, the implementation of your selected function doesn't make a ton of sense since it is essentially a no-op (in many cases).

This is a confusing question, but something like:

$this = event.target;
$this.title = $this.getAttribute("title") || $this['title'];

might work, but check that this is referencing the element.

May I suggest the following:

document.onclick = function(e){
    if (e.target.tagName.toLowerCase() == 'li'){
        alert(e.target.title);
    }
};

JS Fiddle demo.

<script>
    function itemSelected(listItem)
    {
        // listItem is your HTMLLIElement
        alert(listItem.title);
    }
</script>
<ul>
    <li title="test1" onclick="itemSelected(this);">Test 1</li>
    <li title="test2" onclick="itemSelected(this);">Test 2</li>
</ul>

If you assign the onclick in-line (inside the html), then you would need to handle it like this.

HTML

<li onclick="selected(this)">Click Me</li>

Javascript

function selected(element){
    alert(element.title);
}

If you assign the onclick from JavaScript then this will work:

HTML

<li id="myli">Click Me</li>

Javascript

function selected(){
    alert(this.title);
}
document.getElementById("myli").onclick = selected;