Basic knowledge of Javascript event instances

In this example, When you click any position on the page, "a" will pop up. The document is based on the html tag, and is the most powerful. The following example uses the document Feature when you click "a" at any position on the page.

The Code is as follows:

Script
Document. onclick = function (){
Alert ('A ');
};
Script

Obtain the mouse position clientX and clientY. Note that only the mouse position in the visible area is used.

The Code is as follows:

Script
Document. onclick = function (ev ){
If (ev)
{
Alert (ev. clientX + ',' + ev. clientY );
}
Else {
Alert (event. clientX + ',' + event. clentY );
};
};
Script

Or

The Code is as follows:

Script
Document. onclick = function (ev ){
/* If (ev)
{
Alert (ev. clientX + ',' + ev. clientY );
}
Else {
Alert (event. clientX + ',' + event. clentY );
};
};*/
Var oEvent = ev | event;
Alert (oEvent. clientX + ',' + oEvent. clientY );
};
Script

Event bubbling: A layer-by-layer combination of elements forms event bubbling. For example, the maximum scope of document affects the response of p.

The Code is as follows:

Script
Window. onload = function (){
Var obtn = document. getElementById ('tn1 ');
Var op = document. getElementById ('p1 ');
Obtn. onclick = function (ev ){
Var oEvent = ev | event;
Op. style. display = 'block ';
OEvent. cancelBubble = true; // clear the bubble
};
Document. onclick = function (){
Op. style. display = 'none ';
};
};
Script

Move the mouse --- valid in the visible area

The Code is as follows:

Move the mouse
Script
Window. onmousemove = function (ev ){
Var oEvent = ev | event;
Var op = document. getElementById ('p1 ');
Op. style. left = oEvent. clientX + 'px ';
Op. style. top = oEvent. clientY + 'px ';
};
Script

Change the location and direction of the keyboard-use the keycode to obtain the key value of the keyboard to perform the corresponding operation.

The Code is as follows:

Untitled document
Script
Document. onkeydown = function (ev)
{
Var oEvent = ev | event;
Var oDiv = document. getElementById ('p1 ');

// 37
// 39 on the right

If (oEvent. keyCode = 37)
{
ODiv. style. left = oDiv. offsetLeft-10 + 'px ';
}
Else if (oEvent. keyCode = 39)
{
ODiv. style. left = oDiv. offsetLeft + 10 + 'px ';
}
};
Script

Mouse followed by small tail

The Code is as follows:

Untitled document
Script
Window. onload = function ()
{
Var aDiv = document. getElementsByTagName ('P ');
Var I = 0;

Document. onmousemove = function (ev)
{
Var oEvent = ev | event;

For (I = aDiv. length-1; I> 0; I --)
{
ADiv [I]. style. left = Ad IV [I-1]. style. left;
ADiv [I]. style. top = aDiv [I-1]. style. top;
}

ADiv [0]. style. left = oEvent. clientX + 'px ';
ADiv [0]. style. top = oEvent. clientY + 'px ';
};
};
Script

Keycode

The Code is as follows:

Script
Document. onkeydown = function (ev)
{
Var oEvent = ev | event;

Alert (oEvent. keyCode );
};
Script

CtrlKey --- you can press ctrl + enter to submit the content.

The Code is as follows:

Untitled document
Script
Window. onload = function ()
{
Var oBtn = document. getElementById ('tn1 ');
Var oTxt1 = document. getElementById ('txt1 ');
Var oTxt2 = document. getElementById ('txt2 ');

OBtn. onclick = function ()
{
OTxt1.value + = oTxt2.value + '\ n ';
OTxt2.value = '';
};

OTxt2.onkeydown = function (ev)
{
Var oEvent = ev | event;

If (oEvent. ctrlKey & oEvent. keyCode = 13)
{
OTxt1.value + = oTxt2.value + '\ n ';
OTxt2.value = '';
}
};
};
Script