js--understanding of Event Objects 1

When an event on the DOM is triggered, an event object is generated. This object contains all the information related to the event. Includes the element that caused the event, the type of event, and other information related to the specific event.

• Example
  The mouse action causes the event object to contain information about the location of the mouse,
  The keyboard operation causes the event object to contain information about the pressed key,

All browsers support the event object, which is passed into the DOM0-level, DOM2-level, HTML-specified, object-handlers, but is supported in different ways, so it also involves cross-browser sections.

• DOM-compatible browser

    function handler(){      alert(event.type);  };  EventUtil.addHandler(btn,‘click‘,handler);//接上篇笔记

  Event: In browsers that support at least DOM2 levels, regardless of the HTML attribute specified, the dom0 level, Level 2, the object is the built-in object of the event and can be used directly within the event handler function.
  This: in browsers that support at least DOM2 levels, regardless of the HTML attribute specified, the dom0 level, Level 2, is a pointer to the element that is currently processing the event.
  • Enumerates the event objects for all events, all of which are members.

Property Method	type	Read/write	Description
Bubbles	Blooean	Read-only	Indicates whether the event bubbled
Stoppropagation ()	Function	Read-only	Cancel the further capture or bubbling of the event, and if Bubbels is true, you can use this method
Cancelable	Blooean	Read-only	Indicates whether the default behavior of an event can be canceled
Preventdefault ()	Function	Read-only	Cancels the default behavior of the event, and if Cancelable is true, you can use this method
Currenttarget	Element	Read-only	The element whose event handler is currently processing the event
Target	Element	Read-only	The goal of the event
Detail	Integar	Read-only	Event-specific details
Eventphase	Integar	Read-only	The stage in which the event handler is called: 1 indicates that capture Phase 2 indicates that the bubble phase is in Target 3
Trusted	Blooean	Read-only	True to indicate that the event was generated by the browser and false to indicate that the event was created by the developer via JS
Type	String	Read-only	The type of event being triggered
View	Abstractview	Read-only	The abstract view associated with the event. Equivalent to the Window object where the event occurred

• • • There are two members in a member that are more similar:
      currentTarget: The This object is always equal to his value, and as the event bubbles or captures, his value equals the value of the ancestor element that was captured or bubbled to.
      target: contains only the actual target of the event.

    • Type
      You can use the Type property to add a multi-class event handler to an element at the same time.
      Use DOM0 level test

      var Btn=document.getelementbyid (' D1 '); var handler=function () {  switch (event.type) {case      "click":          alert ("clicked");          break;      Case "MouseOver":          event.target.style.background= ' red ';          break;      Case "Mouseout":          event.target.style.background= ' yellow ';          break;  }}; Btn.onclick=handler;btn.onmouseover=handler;btn.onmouseout=handler;

      　　

    • Cancelable, Preventdefault ()
      You can use the Preventdefault () method to cancel its default behavior only if Cancelable is true.

        <a href="http://www.baidu.com/" id="myherf">百度</a>  var Link=document.getElementById("myherf");  Link.onclick=function(){     event.preventDefault();  }

      So click Baidu, and will not jump to Baidu's page.
    • Stoppropagation ()
      Immediately stops the event from propagating in the DOM hierarchy, which cancels further event capture or bubbling.

       function handler(){     alert(event.type);     event.stopPropagation(); };

    • Eventpahse
      Used to determine which stage of an event is currently in the event stream

        var Btn=document.getelementbyid (' D1 '); Div  var Wrap=document.getelementbyid (' Wrap ') within//body;//body  function handler () {      alert (event.eventphase)  };  Click btn  btn.addeventlistener (' click ', Handler,false);//2 is in target object  wrap.addeventlistener (' Click ', Handler, FALSE);//3 bubbling stage  wrap.addeventlistener (' click ', handler,true);//1 capture

      　　

      The event object is present only during the execution of the events handler and is destroyed after execution.
• Event objects in IE
  The IE8 and its previous versions of the browser are incompatible with the DOM2 level, but you can add an event handler using Dom0-level methods.
  • Event
    • In the Dom0-level method:

        var div=document.getElementById("test");  div.onclick=function(){      var event=window.event;//event为window对象      alert(event.type);  }

    • The event object acts as an internal object of the events handler using the exclusive Add event method of IE. You can use Event.type directly.
    • HTML Specifies that the event object also contains properties and methods related to creating his events.
  • This
    • In the Dom0-level method
      This is equal to the element that is processing the event.
    • Use IE's exclusive
      This equals the global object
    • HTML Specifies
      If this is used directly on the label, then it is equal to the element that is processing the event. If you are using the specified function on the label, this in the function refers to window.

See the differences, the result is bound to write a can cross-browser.

• The object and method that the IE event contains

The

Property method	type	read-write	description
cancelbubble	Blooean	Read/write	default value is false, but setting it to true cancels event bubbling, which is the same as the method of Stoppropagation () in the DOM
returnvalue	blooean	read/write	The default value is true, but set it to Fasle to cancel the default behavior of the event, with the Preventdef in the DOM The Ault () method has the same effect as
srcelement	Element	read-only	the target of the event, as in the DOM. /td>
type	String	read-only	event type triggered

• • ReturnValue

        var div=document.getElementById("test");    div.onclick=function(){        window.event.returnValue=false;                    }

    However, there is no way to determine whether the default event can be canceled.
  • Cancelbubble

        var div=document.getElementById("test");    div.onclick=function(){        alert(‘ok‘)        window.event.cancelBubble=true;            }

    Only bubbles can be canceled because IE8 and previously only support bubbling.

• Cross-browser Event objects
  This interview will ask, write a generic event listener function! Just write down the following, you can! Bingo!

   var eventutil={getevent:function (event) {return event| |    window.event; }, Gettarget:function (event) {return event.target| |    Event.srcelement;        }, Preventdefault:function () {if (Event.preventdefault) {event.preventdefault ();        }else{Event.returnvalue=false;        }}, Stoppropagation:function () {if (event.stoppropagation) {event.stoppropagation ();        }else{event.cancelbubble=true; }}, Addhandler:function (Element,type,handler) {if (Element.addeventlistener) {element.addeventlist        Ener (Type,handler,false);            }else if (element.attachevent) {element["E" +type]=function () {Handler.call (Element)}        Element.attachevent ("On" +type,element["E" +type]);        }else{element["on" +type]=handler; }}, Removehandler:function (Element,type,handler) {if (Element.removeeventlistener) {element. RemoveEventListener (Type,handler,false);  }else if (element.detachevent) {element.detachevent ("on" +type,element["E" +type]);            element["E" +type]=null;        }else{element["on" +type]=null; }    }  };

  　　

js--understanding of Event Objects 1