Now basically I rarely write things in the object trigger behavior, because it feels like doing the same object code utilization is too low, easily lead to code redundancy.
Since learning the standards of the universal, I seem to have developed a quirk of code, can be unified reuse, will not write a little more things, so that the front page code will look a lot more refreshing, and the efficiency will be straight up.
Here's what's more representative of a recent project.
(instances can be viewed here http://www.pplive.com/zh-cn/view.html)
Program code
<script type= "Text/javascript" >
<!--
Define the range of mouse trigger events
function Findoutdiv (thisevent) {
Use loops to find objects that conform to CSS style names
while (Thisevent.classname!= "Piccell") {
If the object's label name is HTML, stop, and then let the event object not exist, used as a later judgment
if (Thisevent.tagname = = "HTML") {
Thisevent = false;
Break
}else{
Otherwise proceed to the next object, that is, his parent object
Thisevent = Thisevent.parentnode
}
}
Returns the event object if the event object does not exist returns a false
return thisevent;
}
Using mouse to move properties of objects as time trigger behavior
Document.onmouseover = function (e) {
This e is the way Firefox captures event-triggered objects
if (!e) e = window.event;
Defines the entity that event gives to the mouse to trigger the object, that is, the objects that conform to the criteria and can be controlled
Target is FF-specific, srcelement for IE
var Event = e.target?e.target:e.srcelement
Define the Controllable object, and invoke the mouse to trigger the object returned by the event scope
var thisevent = Findoutdiv (Event)
If the object exists, continue
if (thisevent) {
To define a CSS style for an object
ThisEvent.style.border = "2px solid #7A99D2";
ThisEvent.style.background = "#D2E4FC";
}
}
Ditto, use mouse to move object out as time trigger behavior
Document.onmouseout = function (e) {
if (!e) e = window.event;
var Event = e.target?e.target:e.srcelement
var thisevent = Findoutdiv (Event)
if (thisevent) {
ThisEvent.style.border = "2px solid #CCC";
ThisEvent.style.background = "#FFF";
}
}
-->
</script>
The advantage of this writing is obvious, you can not write trigger action in each object, greatly saving the code, and JS more readable.