Menu
For years I’ve called javascript functions from onclick events inside html elements.
[code=html].
.
<div onclick=”someFunction()”>…</div>
.
.
When I wanted to change the background color, or make some other change to the element I’d either give the element an ID and passed that in, or just pass the object reference of “this”
[code=html].
.
<div onclick=”someFunction(this);”>…</div>
.
.
<script>
function someFunction(obj) {
obj.style.backgroundColor = ‘red’;
}
</script>
Is there a way go get rid of “this” ? Can “someFunction” be made to know what element caused it to be called from an onclick, onfocus, etc. event ?
I would love to get rid of the additional paramater.
<i>
</i>var el = /* Get element somehow, it depends on the code */document.getElementById("whatever");
if (window.addEventListener) {
el.addEventListener("click",function(e){alert(e.target);}[b],false[/b]);
}
else if (window.attachEvent) {
el.attachEvent("[b]on[/b]click",function(){alert(window.event.target);});
}
If it's defined inline, you cannot. If not, you can.<i>
</i>var el = /* Get element somehow, it depends on the code */document.getElementById("whatever");
if (window.addEventListener) {
el.addEventListener("click",function(e){alert(e.target);}[b],false[/b]);
}
else if (window.attachEvent) {
el.attachEvent("[b]on[/b]click",function(){alert(window.event.target);});
}
thisMy solution would be to just keep the parameter in there, it's a single variable, not complicated to work with.[/quote]
However~~~ If you really want to get rid of, capture the HTML element from the event object which is created during that onclick creation.[/QUOTE] this
Since the question is, how can I remove the parameter, that's not a solution.
That is only created in IE when defined inline because it is global, unlike the W3C model, which does not have that as a global variable.
The Quirksmode links you were looking for were
[url=http://www.quirksmode.org/js/this.html#link3]this keyword and inline event registration[/url] and[url=http://www.quirksmode.org/js/events_early.html]inline event registration model[/url] [/QUOTE]
thisActually I think the event object is wrong, my mistake. If you read the link I posted I think it offers alternatives, being eitheror srcElement.[/QUOTE] this
<i>
</i>element.onclick = function() {
alert(this);
};
<i>
</i>element.onclick = function() {
newFunction();;
};
function newFunction() {
alert(this); // expecting this to be the element.
}
[CODE]<input onclick="hitme()" value ="hitme" />
function hitme(event){
if(!event){event=window.event}
that = even.target? event.target : event.scrElement;
alert(that.value); //shows hitme
}[/CODE][CODE]<input onclick="hitme()" value ="hitme" />
function hitme(event){
if(!event){event=window.event}
that = even.target? event.target : event.scrElement;
alert(that.value); //shows hitme
}[/CODE][/QUOTE]function hitme(event){
if(!event){event=window.event}
that = even[b][color=red]t[/color][/b].target? event.target : event.s[b][color=red]rc[/color][/b]Element;
alert(that.value); //shows hitme
}Ah shi..... because you need to pass the event as an object to get the reference... :-/
Shouldn't have ignored your quirksmode links, you were right.[/QUOTE]
Even if you don't supply a named parameter in your function definition, FF will pass the event ob to it anyway.[/QUOTE]
<i>
</i>element.onclick = function(e) {
// Event argument passed
};
<i>
</i><input onclick="var a = 'hello'; alert(a);" value ="hitme" />
<i>
</i>element.onclick = function(e) {
hitme(); // Event argument is [b]not[/b] passed to this function
}
<input onclick="anyfunction();" value ="hitme">
function anyfunction() {
anotherfunction();
}
function anotherfunction() {
alert(window.event.srcElement.value);
}<i>
</i><input onclick="hitme(arguments[0]);" value ="hitme">
That is only true when it's like this<i>
</i>element.onclick = function(e) {
// Event argument passed
};
[/QUOTE]
[CODE]
<body>
<input type='button' value='tester' onclick="clickme()" />
<script type='text/javascript'>
function clickme(event){
if(!event){ event=clickme.caller.arguments[0] || window.event ; }
var t = event.target ? event.target : event.srcElement;
alert(t.value);
}
</script>
</body>[/CODE]this does work however, and does shorten the inline code to avoid "this" :
[CODE]
<body>
<input type='button' value='tester' onclick="clickme()" />
<script type='text/javascript'>
function clickme(event){
if(!event){ event=clickme.caller.arguments[0] || window.event ; }
var t = event.target ? event.target : event.srcElement;
alert(t.value);
}
</script>
</body>[/CODE]
(tested in ff3 and ie7)[/QUOTE]
<script type='text/javascript'>
<i> </i>function clickme(){
<i> </i> var event = clickme.caller.arguments[0] || window.event ;
<i> </i> var t = event.target ? event.target : event.srcElement;
<i> </i> alert(t.value);
}
</script>I like it, but since event will always be undefined, you can shorted (or clarify it maybe) to<script type='text/javascript'>
<i> </i>function clickme(){
<i> </i> var event = clickme.caller.arguments[0] || window.event ;
<i> </i> var t = event.target ? event.target : event.srcElement;
<i> </i> alert(t.value);
}
</script><i>
</i><html>
<head>
<script type='text/javascript'>
<i> </i>function clickme(){
<i> </i>var event = (this.event) ? this.event : clickme.caller.arguments[0] || window.event;
<i> </i> var t = event.target ? event.target : event.srcElement;
<i> </i> alert(t.value);
}
</script>
</head>
<body>
<input type="button" value="Click me" onclick="clickme();" />
</body>
</html>
0.1.9 — BETA 6.16