<!doctype html>
<html>
<head>
<title>HTML Mouse Events - RJM Programming - May, 2019</title>
<head>

<style>
.form { border: 1px solid cyan; }
.table { border: 1px solid red; }
.thead { border: 1px solid blue; }
.tbody { border: 1px solid lightblue; }
.tr { border: 1px solid yellow; }
.th { border: 1px solid orange; }
.td { border: 1px solid brown; }
.text { border: 1px solid green; }
.checkbox { border: 1px solid lightgreen; }
.submit { border: 1px solid magenta; }
.button { border: 1px solid purple; }
</style>

<script type='text/javascript'>


//onclick script Fires on a mouse click on the element
//onmousedown script Fires when a mouse button is pressed down on an element
//onmouseout script Fires when the mouse pointer moves out of an element
//onmouseup script Fires when a mouse button is released over an element

//ondblclick script Fires on a mouse double-click on the element
//onmousemove script Fires when the mouse pointer is moving while it is over an element
//onmouseover script Fires when the mouse pointer moves over an element
//onwheel script Deprecated. Use the onwheel attribute instead onwheel

var h4ihomdb='';
var h4ihommo='';
var h4ihomov='';
var h4ihomwh='';

var h4ihomo='';
var h4ihoml='';
var h4ihomu='';
var h4ihomd='';
var h4ih='';
var cid='';

function btn() {
h4ih='';
h4ihoml='';
h4ihomo='';
h4ihomu='';
h4ihomd='';
h4ihomdb='';
h4ihommo='';
h4ihomov='';
h4ihomwh='';
}


function oclkomdb(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihomdb == '') {
h4ihomudb='You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihomdb.indexOf('You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihomdb='You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihomdb+=' -> ' + 'You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omdb').innerHTML=h4ihomdb;
}
}
}

function oclkommo(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihommo == '') {
h4ihomumo='You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihommo.indexOf('You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihommo='You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihommo+=' -> ' + 'You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4ommo').innerHTML=h4ihommo;
}
}
}

function oclkomov(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (oistype != 'span') {
if (h4ihomov == '') {
h4ihomov='You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
//} else if (('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)).indexOf('You onmouseover a ' + oistype + ' (' + ois.id + ')') != -1) {
} else if (h4ihomov.length > 800) { //h4ihomov.indexOf('You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihomov='You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
//alert(('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)) + ' ... versus ... ' + ('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)) + ' -> ' + 'You onmouseover a ' + oistype + ' (' + ois.id + ')');
h4ihomov+=' -> ' + 'You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omov').innerHTML=h4ihomov;
}
}
}
}

function oclkomwh(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihomwh == '') {
h4ihomuwh='You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihomwh.indexOf('You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihomwh='You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihomwh+=' -> ' + 'You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omwh').innerHTML=h4ihomwh;
}
}
}

function oclkomu(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihomu == '') {
h4ihomu='You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihomu.indexOf('You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihomu='You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihomu+=' -> ' + 'You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omu').innerHTML=h4ihomu;
}
}
}

function oclkomd(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihomd == '') {
h4ihomd='You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihomd.indexOf('You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihomd='You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihomd+=' -> ' + 'You onmousdown a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omd').innerHTML=h4ihomd;
}
}
}

function oclkomo(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihomo == '') {
h4ihomo='You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (nospan(h4ihomo).indexOf(nospan('You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')')) != -1) {
h4ihomo='You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihomo+=' -> ' + 'You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4omo').innerHTML=h4ihomo;
}
}
}

function oclkoml(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
//setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ihoml == '') {
h4ihoml='You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else if (h4ihoml.indexOf('You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
h4ihoml='You onmousleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ihoml+=' -> ' + 'You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4oml').innerHTML=h4ihoml;
}
}
}

function oclk(ois) {
var oistype='';
if (ois) {
if (('' + ois.id) != '') {
setTimeout(btn, 1500);
if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
} else {
oistype=ois.type;
}
if (h4ih == '') {
h4ih='You clicked a ' + colourcode(oistype) + ' (' + ois.id + ')';
} else {
h4ih+=' -> ' + 'You clicked a ' + colourcode(oistype) + ' (' + ois.id + ')';
}
document.getElementById('myh4').innerHTML=h4ih;
}
}
}

function csub() {
if (cid != '') {
document.getElementById(cid).click();
cid='';
}
}

function nospan(stuff) {
}

function colourcode(inty) {
return '<span CLASS=' + inty + '>' + inty + '</span>';
}

</script>

</head>
<body>
<h1>HTML Mouse Events</h1>
<h3>RJM Programming - May, 2019</h3>

<table class=table id=mytable onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' border=20>
<thead class=thead id=mythead onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<tr class=tr id=mytheadtr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<td class=td id=mytheadtdl onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>stopPropagation</td><td class=td id=mytheadtdr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>preventDefault</td>
</tr>
</thead>
<tbody id=mytbody onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<tr class=tr id=mybodytr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<td class=td id=mytbodytdl onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<form class=form method='GET' onsubmit=" alert('Ready?'); return true;" id='fstopPropagation' action='./onmouseleave.htm' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<input class=text id='itextstopPropagation' type='text' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='stopPropagation form' /><br>
<input class=button id='stextstopPropagation' type='button' onclick="event.stopPropagation(); oclk(this); cid='sbtextstopPropagation'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation','_blank','top=200,left=500,height=600,width=600');" value='stopPropagation' />
<input class=submit style='display:none;' id='sbtextstopPropagation' type='submit' value='stopPropagation' />
</form>
</td><td class=td id=mytbodytdr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<form class=form method='GET' onsubmit="alert('Ready?'); return true;" id='fpreventDefault' action='./onmouseleave.htm' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
<input class=text id='itextpreventDefault' type='text' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='preventDefault form' /><br>
<input class=checkbox id='stextpreventDefault' type='checkbox' onclick="event.preventDefault(); oclk(this); cid='sbtextpreventDefault'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault','_blank','top=200,left=500,height=600,width=600'); " value='preventDefault' /> preventDefault
<input class=submit style='display:none;' id='sbtextpreventDefault' type='submit' value='preventDefault' />
</form>
</td>
</tr>
</tbody>
</table>

<h4 id=myh4></h4>
<h4 id=myh4oml></h4>
<h4 id=myh4omo></h4>
<h4 id=myh4omu></h4>
<h4 id=myh4omd></h4>

<h4 id=myh4omdb></h4>
<h4 id=myh4omov></h4>
<h4 id=myh4ommo></h4>
<h4 id=myh4omwh></h4>


</body>
</html>