Easy to ignore JS event problem Summary _javascript skill

First, Cross-platform events

What is a Cross-platform event? that is, the same event is executed on different browsers, using different methods.

What is a Eventutil object? What's the effect? All event-related functions are merged into a container that facilitates the management of event objects, and it has no attributes. The main processing DOM events and IE events in the running-in, make it as similar as possible.

Let's take a look at the object properties and methods between Dom and IE to make a comparison (here only points out the different properties and methods), there are mainly the following five major points:
Dom properties and methods IE properties and methods
CharCode KeyCode
Preventdefault Returnvalue=false
Relatedtarget Fromobj|toobj
Stoppropation Cancelbuble=true
Target Srcobj

We use a small demo to look at, can be a good solution to the incident Cross-platform compatibility problem:

The above method solves the event Cross-platform problem, and next, we look at the properties of the CharCode.

First, define a new method for Eventutil, Formatevent, and accept a parameter, the event object.

Eventutil.formatevent=function (Event)
{
  if (Isie&&iswin)---Detect a browser problem

  {
   event.charcode= ( event.type== "KeyPress")? event.keycode:0;
   event.eventphase=2;--represents the bubbling phase, IE only supports the bubbling phase
  } return
  event;

Ii. Target and Currenttarget in bubbling

Target is in the object phase of the event stream; Currenttarget in the capture, target, and bubbling stages of the event stream. When the event flow is in the target phase, two points are the same, and when in the capture and bubbling phase, target points to the clicked object and Currenttarget to the parent of the current event.

 <div id= "outer" style= "background: #099" > <p> I'm the target div</p>----point Hit this section, Output: E.target.tagname:p | | E.currenttarget.tagname:div <p id= "inner" style= "background: #9C0" > I am the target p</p>----Click on this section, output: E.target.tagn Ame:p | | E.currenttarget.tagname:div <br>----Click on this section, output: E.target.tagname:div | | E.currenttarget.tagname:div </div>//See the second column: <div id= "outer" style= "background: #099" > <div> Me is the target div</div>----Click on this section, output: E.target.tagname:div | | E.currenttarget.tagname:div <p id= "inner" style= "background: #9C0" > I am the target p</p>----Click on this section, output: E.target.tagn Ame:p | | E.currenttarget.tagname:div <br>----Click on this section, output: E.target.tagname:div | | E.currenttarget.tagname:div </div> 

 function getobj (ID) {return document.getElementById (ID); 
  function addevent (obj, event, fn) {if (window.attachevent) {obj.attachevent ("on" + Event, FN); 
  else if (Window.addeventlistener) {Obj.addeventlistener (event, FN, false); } function Test (e) {alert ("E.target.tagname:" + e.target.tagname + "\ E.currenttarget.tagname:" + E.currentta 
 Rget.tagname); 
   var outer = getobj ("outer"); 
   var inner = getobj ("inner"); 
   Addevent (Inner, "click", test); 

Addevent (outer, "click", test); 

  Three, IE and Dom differences
                           DOM                                  ie
Get target          event.target                      event.srcelement
Get character code  event.charCode               event.keycode
Block default behavior   Event.prevetdefault ()       event.returnvalue=false
Bubbling                  event.stoppropagation ()  event.cancelbubble= True

About blocking default behavior, for example, when the user right-clicks the mouse, if you don't want the menu to pop up, you can use the block default behavior:

Document.body.oncontextmenu=function (Event)
{
  if (Isie)
  {
     var oevent=window.event;
     Oevent.returnvalue=false; can also be directly return false; block default behavior
  }
  else
  {
    oevent.preventdefault ();
  }
}

Four, mouse events

<p>use your mouse to click and double click the red square</p>
<div style= "Width:100px;height:100px;ba Ckground:red "
    onmouseover=" Handleevent (event) "
    onmouseout=" Handleevent (event) "
    onmousedown=" Handleevent (Event) " 
    onmouseup=" Handleevent (event) "  
    onclick=" Handleevent (event) " 
    ondblclick=" Handleevent (event) "id=" Div1 "
   >       
</div>
<p><textarea id=" Txt1 "rows=" 5 "cols=" 45 " ></textarea></p>
<!--detect keyboard events-->
<p><input type= "text" id= "textbox" 
      onkeydown= "Handle (event)"
      onkeypress= "Handle (event)"
      onkeyup= "Handle (event)"
     ></p>
<p><textarea id= "txt2" rows= "cols=" ></textarea></p>

JS files are as follows:

function Handleevent (event)
{
  var otext=document.getelementbyid (' Txt1 ');
  otext.value+= "\ n" +event.type;
  otext.value+= "\ n target is" + (event.srcelement| | event.target). ID;
  otext.value+= "\ n" ("+event.clientx+", "+event.clienty+") in the client ";
  otext.value+= "\ n" ("+event.screenx+", "+event.screeny+") in the client ";
  otext.value+= "\ Button down is" +event.button;
  var arrkeys=[];
  otext.value+= "\ Relatedtarget is" +event.relatedtarget.tagname;
  Event.relatedTarget.tagName can determine the source and provenance of the mouse
}
function handle (event)
{
  var otext2= document.getElementById (' txt2 ');
  otext2.value+= "\ n" +event.type;
  var arrkeys=[];
 if (Event.shiftkey) {Arrkeys.push ("Shift");}
 if (Event.ctrlkey) {Arrkeys.push ("Ctrl");}
 if (Event.altkey) {Arrkeys.push ("Alt");}
  otext2.value+= "\ KeyDown is" +arrkeys
}

The above is the entire content of this article, I hope to help you learn.