BOM Basics (iii)

In my previous article on DOM , I have actually mentioned the concept of events. Before you tell an event, the first thing to know is that JavaScript is event-driven. What does event-driven mean? For example, if we click a button on the page, we will jump out of a window or a word, or, when we move the mouse wheel, there are some animations and the like, this is the event-driven. Then what is an event? An event is essentially a process of triggering and responding. Events are composed of three parts: event source, event name, and event handler function. The so-called event source is the object that triggered the event, the event name is the event that triggered it, and the event handler is the function that asks for execution after the event is triggered. such as the following code

function () {    alert ("La la la");}

Here, the event source is btn , event name click onclick Span style= "font-family: the song Body;" > can also be said to be the function anonymous function, The two of them are equivalent. Here we use on plus event name to register the event. In addition to this approach, we have another way of registering the time. is addeventlistener () This method has three parameters. The first parameter is the event name, and the second parameter is the event listener, the event handler function. The third parameter is a boolean false

function () {    alert ("Cheerleader"false);

This code works the same way as the above code does. Some people may think that the above method is so simple, why do we have the following? At first I felt the same way, the following cumbersome and difficult to remember, and feel no use, has been using the former method. However, when it comes to small projects, the previous one will be overwritten if two identical events are added to the same event source. In other words, use on The way only one event can be registered. and addeventlistener You can register multiple events with the same name for an object without overwriting. However, this approach also has his limitations, that is, the low-version browser does not support ie8 attachevent () ie11 . But there is no way to ie8

var  Eventtools = {    function  (element, type, listener) {        if( Element.addeventlistener) {            false);        } Else if (element.attachevent) {            element.attachevent ("on" + type, listener);        } Else {            element["on" + type] = listener;        }}    ;

Here, I put the compatibility code in a eventtools object, the benefit of which is to reduce the variable pollution. I mentioned the variable pollution in the previous article, but I didn't say it in detail. So-called variable pollution, this problem is rare for small projects that you practice, such as I have defined two variables of the same name in the global scope. At this time, the variables defined in the following will overwrite the previous variables, if it is a small project, this problem occurs as long as the change of one of the variable name, but in the large development, if you encounter such a problem, to find out the error of the problem is very troublesome. So, we should try to reduce the variable pollution, such as the above method, we have a similar function of the method encapsulated in an object, the method name is a property of the object, does not have global, this time reduces the pollution of the variable.

OK, say the variable pollution, it is time to say this code, this code first to determine the AddEventListener This method browser support. If supported, add an event listener to the element, otherwise, determine if the attachevent method is supported, and if so, add event listeners to the element in this way. The last method is to be compatible with some very old browser, that is, the browser both methods are not supported, the use of On the way to add events to the element, but now in the use of the browse which basically support the first two methods. So the last situation doesn't have to be considered.

After saying two ways to add events to an element, it is time to say the arguments of the event, when the event is triggered, the system automatically passes an argument to the event handler, which we can use to get some event-related data. If we don't need this data, this parameter can be omitted. But now we are thinking about the case of participation.

function (e) {    + "= = =" + e.clienty);}

In the above code, we have registered a onmousemove event with the document, and when the mouse moves through the page, print out the current mouse distance document The distance between the left and the top. As the mouse moves through the page, we can see in the console that he is constantly outputting the mouse distance from the top and bottom of the browser. The event parameter here is e, which can also be used for other names, but usually we will use the e parameter. However, this method of communication also has his limitations, is IE8 and the following version is not supported. But his compatibility code is relatively simple, we just need to use the short-circuit operation can be done.

E = e | | window.event;

Solves the compatibility problem, we can use this method to do a lot of things, such as when we move the mouse, his e.clientx value and e.clienty value to a picture, so, We can achieve the image following the mouse movement effect, such as the following code

<!DOCTYPE HTML><HTMLLang= "en"><Head>    <MetaCharSet= "UTF-8">    <title>Title</title>    <style>#i1{position:Absolute;        }    </style>    <Script>window.onload= function () {            varI1=document.getElementById ("I1"); Document.onmousemove= function(e) {i1.style.left=E.clientx-  - + "px"; I1.style.top=E.clienty- - + "px"; }} Box.onclick= function() {alert ("la la la"); }    </Script></Head><Body>    <imgID= "I1"src= "Images/tianshi.gif"alt=""></Body></HTML>

In this page, we can implement the image to follow the mouse movement, but he still has a small problem, that is, if our page has a scroll bar, the picture and mouse will be misplaced. At this time, we are going to use another method is to use pagex and Span style= "FONT-FAMILY:CALIBRI;" >pagey instead e.clientx Span style= "font-family: the song Body;" > and e.clienty pagex and pagey Gets the distance relative to the browser. There will be no previous situation, however, good things always have his limitations ...ie8

function GetPage (e) {    return  {        | | (E.clientx + Scroll (). scrollleft),        | | (E.clienty + Scroll (). scrolltop)    }} function Scroll () {    return  {        | | document.documentElement.scrollLeft,        | | Document.documentElement.scrollTop    };}

In the above code, I encapsulated two compatibility code, we analyze each one, first of all to determine whether the browser supportsPageXand thePageythese two methods, if supported, are returnedE.pagexorE.pageyOtherwise, useE.clientxand theE.clientyplus the distance to be rolled away. This time, another compatibility issue is involved, that is, the distance of the volume of the judgment, some browsers are based onBodyand some browsers are based on theHTMLto judge. That's when we're going to encapsulate the compatibility code again, if it's based onBodyto judge, it returns relative toBodythe distance being rolled away, if it was relative to theHTMLto judge, then the previous value isundefinedreturns the value that follows. In this way, the browser compatibility problem is resolved.

said a lot about clientx and clienty and clientheight padding The value, if there is a scroll bar , this value also includes scroll bars. We can use it to get the size of the viewable area of the page, but we use more of the innerwidth and innerheight the way. However, they also have compatibility issues. Therefore, we can only encapsulate the compatibility code again.

function Client () {    return  {        | | | document.body.clientWidth | | Document.documentElement.clientWidth | | 0,        | | | document.body.clientHeight | | document.documentElement.clientHeight | | 0    };}

If the browser supports inner way to obtain wide height, is to use the inner Way, otherwise is the back two, the following two, respectively, when the browser is judged by the body to get the width, or html , to get the width. If none of the three types is supported, then 0 is returned .

Here, the three major families in the BOM have already been said to have finished. The offset series, thescroll series and the client series are respectively. Some people may be confused, but the following three images can help us to make the difference between the three more easily.

It is important to note that the client and offset series are relative to offsetParent , that is, the first position of the parent element. the value of the client with respect to offsetParent is X and Y.

BOM Basics (iii)