Web front end lesson 34 – JS event objects this, event

Time:2021-9-11

1. This object

this   Is an automatically generated object used to “refer to the function caller” when the function is running

This can only be used inside a function

2. Event object

When DOM   When an event in the tree is triggered, an object describing all relevant information of the event (such as the element triggering the event, event type, etc.) will be automatically generated at the same time. This object is event (event object)

Acquisition method:

①   Directly through   Event to get

②   It is used in the form of function parameters. Generally, the formal parameter “e” or “e” is used   “Eve” instead

    div.onclick=function (e) { console.log(e);}
    div.onmousedown=function (eve) { console.log(eve);}
    div.onmouseup=function () { console.log(event);}

 

3. Event common attributes

A series of properties and methods are provided in the event object to obtain the relevant information of the event

  ① type,

It is used to obtain the type of the current event. It is a read-only property and exists depending on the trigger of the event

Syntax: event. Type;

  ② bubbles,

Used to obtain whether the type of the currently triggered event supports bubbling. If yes, it returns   True, otherwise return   false

Note that the bubbles attribute refers to whether the attribute supports bubbling, which has nothing to do with the event processing mechanism!

Syntax: event. Bubbles;

  ③ eventPhase,

Used to obtain the status of the event when it is transmitted to the current node (represented by the following number):

1. Indicates that the event is in the capture state

2. It represents that the event is in the real trigger

3. It means that the event is in bubbling state

Syntax: event. Eventphase;   // The return value is a read-only property

④   target   and   currentTarget

Target, which returns the real trigger of the event (the trigger node of the event)

Currenttarget: returns the listener of the event (the binding node of the event)

Syntax:

      event .target;

      event .currentTarget;

div2
        div1
    

    var div1=document.querySelector('.div1');
    var div2=document.querySelector('.div2');
//Bubbling mechanism
    div1.onclick=function (e) {
        Console.log ('div1: ',' status' + event.eventphase, 'trigger', e.target.textcontent, 'listener' + e.currenttarget.innerhtml, event. Type);
    };
    div2.onclick=function (e) {
        Console.log ('div2: ',' status' + event.eventphase, 'trigger' + e.target.textcontent, 'listener' + e.currenttarget, event. Type);
    };
    document.body.onclick=function (e) {
        Console.log ('body: ', status' + event.eventphase,' trigger '+ e.target.textcontent,' listener ', e.currenttarget, event. Type);
    }
//Capture mechanism
    div1.addEventListener('mouseup',function (e) {
        Console.log ('div1: ',' status' + e.eventphase, 'trigger' + e.target.textcontent, 'listener' + e.currenttarget.textcontent, e.type);
    },true);
    div2.addEventListener('mouseup',function (e) {
        Console.log ('div2: ',' status' + e.eventphase, 'trigger' + e.target.textcontent, 'listener' + e.currenttarget, e.type);
    },true);
    document.body.addEventListener('mouseup',function (e) {
        Console.log ('body: ', status' + e.eventphase,' trigger '+ e.target.textcontent,' listener ', e.currenttarget, e.type);
    },true);

  

 

 4.eventcommon method

   ① stopPropagation(),

This method is used to prevent events from propagating from the current node to the next node

Syntax: event. Stoppropagation();

Note that although the stoppropagation () method can block the propagation of events, it will not affect other event handles on the same node!

  ② preventDefault(),

This method is used to cancel the default behavior of the current node (such as clicking and jumping of hyperlinks). This method does not return a value

Syntax: event. Preventdefault();

  ③ cancelable,

This attribute is used to judge whether the current node can be used   The preventdefault () method to cancel the default behavior, if it can be returned   True, otherwise return   false

Syntax: event. Cancelable;

5. Picture verification cases

Image verification

    .div1{
        margin: 100px auto 0px;
        width: 500px;
        height: 500px;
        background-image: url("Images/ButterflyPart1.jpg");
        background-size: contain;
        position: relative;
    }
    .div2{
        width: 152px;
        height: 138.6px;
        background-image: url("Images/ButterflyPart2.jpg");
        background-size: contain;
        box-shadow: 1px 1px 2px 2px aqua;
        position: absolute;
    }
    .freshBtn{
        position: absolute;
        bottom: 0;
        right: 0;
        color:darkgreen;
        font-weight: bold;
        letter-spacing: 2px;
        background-color: rgba(90,35,20,.3);
        outline: none;
    }



    
        
        Revalidation
    

    var idtPic=document.querySelector('.div1');
    var subPic=document.querySelector('.div2');
    var freshBtn=document.querySelector('.freshBtn');
    var flag=false;
    var refresh=true;
    subPic.onmousedown=function () {
        if (refresh==true){
            flag=true;
        }
        console.log(flag);
    };
    subPic.onmousemove=function (e) {
        if (flag==true){
            var moveLeft=e.clientX-533.5-76;
            var moveTop=e.clientY-100-69.3;
            console.log(moveLeft,moveTop);
            switch (true){
                case moveLeft<0:moveLeft=0;
                    break;
                case moveLeft>348:moveLeft=348;
                    break;
                case moveLeft>=0&&moveLeft<=348:subPic.style.left=moveLeft+'px';
                    break;
            }
            switch (true){
                case moveTop<0:moveTop=0;
                    break;
                case moveTop>361.7:moveTop=361.7;
                    break;
                case moveTop>=0&&moveTop<=361.7:subPic.style.top=moveTop+'px';
                    break;
            }
/*            subPic.style.left=moveLeft+'px';
            subPic.style.top=moveTop+'px';*/
        }
        if (moveLeft>80&&moveLeft<175&&moveTop>170&&moveTop<260){
            subPic.style.boxShadow='0 0 0';
        }else{
            subPic.style.boxShadow='1px 1px 2px 2px aqua';
        }
    };
    subPic.onmouseup=function () {
        flag = false;
        refresh=false;
        subPic.style.boxShadow='1px 1px 2px 2px aqua';
        var locationLeft=parseInt(subPic.style.left);
        var locationTop=parseInt(subPic.style.top);
        if (locationLeft>110&&locationLeft<150&&locationTop>200&&locationTop<235){
            Alert ('validation passed! ')
        }else{
            Alert ('validation failed! ')
        }
    };
    freshBtn.onclick=function () {
        refresh=true;
    };

①   Sets the when the element is moved   The “style” attribute is required for the left and top values,

Syntax: element node. Style. Left|   top = ‘   numerical value  ‘;

Attention, style   The value of the property must be in string form, so it is usually assigned in the form of clientx +’px ‘

②   take   Numeric value of string type   Convert to   Numerical values in numerical form, using   Parseint() method

Syntax: parseInt (string, radius);

The parameter Radix represents the cardinality of the number (the value is between 2 and 36), and the default value is 10

Characteristics of parseint() method:

The parseint() method is used to parse a string and return an integer. Example: parseInt (‘12.34 ‘);      // twelve

When the parameter Radix is 0, null, undefined, parseint() will   String automatic judgment cardinality:

If   String starts with a number of “0 ~ 9” and parseint() parses it into a decimal integer. Example: parseInt (‘011 ‘);     // eleven

If   String starts with “0x”, parseint() will   The rest of the string is parsed into hexadecimal integers. Example: parseInt (‘0x10 ‘);    // sixteen

If   There are spaces at the beginning or end of the string, which will be automatically removed during conversion

In the process of character conversion, it is converted character by character. In case of characters that cannot be converted to numbers, it will stop the conversion and return to the converted part

only   The first number in string will be returned (not the first digit). Example: parseInt (’15e2 ‘);        // fifteen

If   If the first character of a string cannot be converted to a number, parseint() returns   Nan, example: parseInt (‘. 3’);       // NaN

If   If string is not a string (including a number), this method will convert it to a string first, and then convert it to a number. Example: parseInt (12.3)   Equivalent to   parseInt(‘12.3’)

③   Parsefloat() converts a string to a floating point number

The usage is similar to parseint(), but the parsefloat() method calculates the scientific notation (E)

In addition, for digital conversion, there are   Number() method

6. Event events in IE environment

Differences between events in IE and non ie:

①   The default value of event events under non ie is   Undefined, while in IE   The default value of event is null

②   wrong   Under ie, you can pass at will   Dom0 or   Called with parameters in dom2   Event object, and the dom0 level in IE cannot be called by passing parameters   Event (dom2)

Because   Event itself belongs to   A property of window, so you can declare it in the function as followssolve   Compatibility of event objects

Syntax: VAR   eve =   e ||   window .event;

Example: element node. Onclick = function (EVE){

var e = eve || window .event;   //   E = Eve in non ie environment; E = Eve in IE environment   window .event

        console .log(e);

       };

7. Common attributes of event object in IE

① Srclelement, which represents the real trigger of the event, is equivalent to non event   Under IE   Target attribute

In order to solve the problem of obtaining information under different browsers   The compatibility of target can be declared as follows:

Syntax: VAR   target =   eve .target ||   eve .srcElement;

②   Cancelbubble is used to prevent the event from bubbling on the current node, similar to non bubble   Under IE   Stoppropagation() method

Syntax: event. Cancelbubble=   false; (default)

event .cancelBubble =   true; (cancel bubbling)

Note that stoppropagation means blocking event delivery, and   Cancelbubble property only blocks event bubbling and is not valid for capture!

③   ReturnValue, used to set whether to cancel the default behavior of the current node, similar to that under non ie   Preventdefault() method

Syntax: event. ReturnValue=   false; (cancel default behavior)

event .returnValue =   true; (default)

④ Block bubbling and cancel default behavior to solve IE and non ie compatibility problems. Refer to the code

    var Event={
        stopBubble:function () {
            if (event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        },
        cancelDefault:function () {
            if (event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        }
    }