Standard intrinsic events (onclick, ondblclick, onmouseover, onmousedown, onmouseup, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress)

Intrinsic events are meant to increase interactivity with the users of a site. They may not be directly analyzed by HTML but they rather have to be parsed by a client based or server based script (JavaScript, PHP, ASP).

These events may be applied to majority of the elements. In combination with the scripting they can send important information to the server, modify the web page content or layout on the go and do many other interesting and useful things.

Related elements:

onclick attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

ondblclick attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmouseover attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmousedown attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmouseup attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmouseout attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onmousemove attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onkeydown attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onkeyup attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

onkeypress attribute:

All elements but APPLET, BASE, BASEFONT, BDO, BR, FONT, FRAME, FRAMESET, HEAD, HTML, IFRAME, ISINDEX, META, PARAM, SCRIPT, STYLE, TITLE

Attribute characteristics and purpose:

onclick attribute:

event occurs when a pointing device button is clicked over an element

ondblclick attribute:

occurs when a pointing device button is double clicked over an element

onmouseover attribute:

event occurs when a mouse is moved onto an element

onmousedown attribute:

event occurs when a mouse button is pressed over an element

onmouseup attribute:

event occurs when a mouse button is released over an element

onmouseout attribute:

event occurs when a mouse is moved away from an element

onmousemove attribute:

event occurs when a mouse is moved while it is over an element

onkeydown attribute:

event occurs when a key is pressed down over an element

onkeyup attribute:

event occurs when a key is released over an element

onkeypress attribute:

event occurs when a key is pressed and released over an element

Example

HTML standard intrinsic events attributes:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
p, input {
	width:60%;
	margin:0px 15%;
	border:5px outset teal;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
</style>
<script type="text/javascript">
var r=255, g=255, b=255, c;
function onMouse(e) {
	var x=0, y=0;
	if (!e) var e=window.event;
	if (e.pageX || e.pageY) {
		x=e.pageX;
		y=e.pageY;
	}
	else if (e.clientX || e.clientY) {
		x=e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
		y=e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
	}
	alert("Mouse coordinates are: "+x+","+y);
}
function onClick(el) {
	r=r-18; g=g-10; b=b-3;
	if (r<0) {
		r=255; g=255; b=255;
	}
	c="RGB("+r+","+g+","+b+")";
	el.style.backgroundColor=c;
	alert("You successfully changed the background color to: "+c);
}
function onKey(e) {
	ev=window.event?event:e;
	var ucode=ev.charCode?ev.charCode:ev.keyCode;
	var akey=String.fromCharCode(ucode);
	alert(akey);
}
</script>
</head> 

<body><br /> 

<p onmouseover="onMouse(event);">Move mouse over!</p><br /><br />

<p onclick="onClick(this);">Click!</p><br /><br />

<input onkeyup="onKey(event);" value="Press a letter or number!" onfocus="this.value=null;" />

</body>

</html>

›› go to examples ››

Standard intrinsic events (onclick, ondblclick, onmouseover, onmousedown, onmouseup, onmouseout, onmousemove, onkeydown, onkeyup, onkeypress)

Related elements:

Attribute characteristics and purpose:

Example

HTML standard intrinsic events attributes:

Comments

About

Contact

Get Connected