Utilizing event Trigger object in JavaScript

Source: Internet
Author: User

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.