JS in the event:

Event-Driven:

1. Event: JS captures the user's actions or some behavior in the page

2. Event Source: The object that triggered the event

Mouse events:

OnClick

OnDblClick

OnMouseDown

OnMouseUp

OnMouseMove

onmouseover

onmouseout

Page event, Undo load:

onBeforeUnload

Add, delete event has compatibility:

In IE:

Add to:

Obj.attachevent ("On event", "handler")

Delete:

Obj.detachevent ("On Event", "Method")

Google and other browsers that support the standard:

Add to:

Obj.addeventlistener ("click", Fn1,false);

Obj.removeeventlistener ("click", Fn1,false);

Custom objects:

var person={

Name: "Zhang"

Age:21

}

Call: Console.log (Person.name)

Example:

    varEvent ={add:function (obj, type, foo) {if(obj.attachevent) {obj.attachevent (" on"+type, foo); } Else if(Obj.addeventlistener) {Obj.addeventlistener (type, foo,false); } Else{obj[" on"+ Type] =foo; }}, Remove:function (obj, type, foo) {if(obj.detachevent) {obj.detachevent (" on"+type, foo); } Else if(Obj.removeeventlistener) {Obj.removeeventlistener (type, foo,false); } Else{obj[" on"+ Type] =NULL; }            }       };

Event object:

Bu1.onclick=function (e) {

var ev=e| | Window.event

}

Location of mouse relative to browser:

Ev. ClientX (x-axis)

Ev. ClientY (Y-axis)

Mouse position relative to the screen:

Ev. ScreenX

Ev. ScreenY

The location of the mouse relative to the event source:

Ev.offsetx

Ev.offsety

Keyboard events:

Document.onkeydown=function (e) {

}

Example:

div2.onmousedown=function (e) {varev=e| | Window.Event;//When an event occurs: Gets the distance to the source of the event            varOl=ev.offsety; varAl=Ev.offsetx;  This. onmousemove=function (e) {varev=e| | Window.Event;  This. style.top=ev.clienty-ol+"px";  This. style.left=ev.clientx-al+"px";                };  This. onmouseup=function () { This. onmousemove=NULL; }        };

Event Flow:

Bubbling event: Responding to an event from a point-of-click

Capture-type events: Responding to events from within an outward

Block Event Flow:

Ie:ev.cancelbubble=true;

Other browsers: Ev.stoppropagation

Example:

 div3.onclick=function (e) { var  ev= e| | Window. event            I'm the son.   "  //  block bubbling event  ev.stoppropagation (); 

Body.addeventlistener ("click", Function (e) {//        var ev = e | | window.event; //         Console.log ("I Am Body"); //        //         block capture Events //        ev.stoppropagation (); //     },true);

Event delegate:

var obj=ev.target| | Ev.srcelement (returns the clicked object)

var ul=document.getelementsbytagname ("ul");    ul[0].onclick=function (e) {        var ev=e| | Window. Event ;         var obj=ev.target| | ev.srcelement;        alert (obj.innerhtml);    }

JS in the event: