When using :
document.onmouseover = function(e) {}
Is there a property which gives me the element in the dom tree ?
For example, I can set a style to e.srcElement
But, how can I later access this element to (for example) reset its style ?
And how can I know at which place in the dom tree it is ?
I want to be able to situate it in the whole page dump.
Many thanks.
To solve the problem about reaccessing the element later, I tried this but it doesn't work :
var lastelem;
document.onmouseover = function(e) {
if (lastelem != null){
lastelem.style.border = "0px";
}
if (e===undefined) e= window.event;
var target= 'target' in event? event.target : event.srcElement;
document.getElementById('display').value = target.tagName;
target.style.border = "1px";
lastelem = target;
};
Thanks
When using :
document.onmouseover = function(e) {}
Is there a property which gives me the element in the dom tree ?
For example, I can set a style to e.srcElement
But, how can I later access this element to (for example) reset its style ?
And how can I know at which place in the dom tree it is ?
I want to be able to situate it in the whole page dump.
Many thanks.
To solve the problem about reaccessing the element later, I tried this but it doesn't work :
var lastelem;
document.onmouseover = function(e) {
if (lastelem != null){
lastelem.style.border = "0px";
}
if (e===undefined) e= window.event;
var target= 'target' in event? event.target : event.srcElement;
document.getElementById('display').value = target.tagName;
target.style.border = "1px";
lastelem = target;
};
Thanks
Share Improve this question edited Apr 25, 2010 at 21:48 Jimmy 37.2k13 gold badges85 silver badges100 bronze badges asked Apr 25, 2010 at 21:11 oimoimoimoim 4492 gold badges9 silver badges21 bronze badges 8-
4
It's an ordinary DOM element. You can treat it normally - e.g. saving it for later in a variable that's in an outer scope, or using
parentElement
and the like to locate it in the tree. – Max Shawabkeh Commented Apr 25, 2010 at 21:15 - 1 (window.event.srcElement is IE-only. For all other browsers it's event.target.) – bobince Commented Apr 25, 2010 at 21:24
- Yes, you're right about srcElement. However, if I want to set a style to this element or target. But later from another function. For example, I tried this but it doesn't work... pastebin./qrSjsY4C thanks ! – oimoim Commented Apr 25, 2010 at 21:32
- 1 Please post your code in the original question (and use code formatting). – Marcel Korpel Commented Apr 25, 2010 at 21:33
- To Max Shawabekh : Is there any documentation you know about that gives more information about locating the element in the tree ? Thanks – oimoim Commented Apr 25, 2010 at 21:33
1 Answer
Reset to default 5Which HTML element is the target of the event? (on Quirksmode, by Peter-Paul Koch). Also have a look at the target
attribute of the Event object in W3C DOM Level 2 Event Model.
<!DOCTYPE html>
<html>
<head>
<title>target test</title>
<style>
* { border: 1px solid #fff }
.trigger { background: lightgreen }
</style>
</head>
<body>
<p class="trigger">Trigger testCase().</p>
<p class="trigger">Trigger testCase().</p>
<p class="trigger">Trigger testCase().</p>
<p id="display"></p>
<script>
var lastelem;
document.onmouseover = function (e) {
var event = e || window.event;
if (lastelem) {
lastelem.style.border = "1px solid #fff";
}
var target = event.target || event.srcElement;
document.getElementById('display').innerHTML = target.previousSibling.tagName +
" | " + target.tagName + " | " + (target.nextSibling ? target.nextSibling.tagName : "X");
target.style.border = "1px solid";
lastelem = target;
};
</script>
</body>
</html>