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

<script type='text/javascript'>

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

function btn() {
h4ih='';
h4ihoml='';
h4ihomo='';
}


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 ' + oistype + ' (' + ois.id + ')';
} else if (h4ihomo.indexOf('You onmouseout a ' + oistype + ' (' + ois.id + ')') != -1) {
h4ihomo='You onmouseout a ' + oistype + ' (' + ois.id + ')';
} else {
h4ihomo+=' -> ' + 'You onmouseout a ' + 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 ' + oistype + ' (' + ois.id + ')';
} else if (h4ihoml.indexOf('You onmouseleave a ' + oistype + ' (' + ois.id + ')') != -1) {
h4ihoml='You onmousleave a ' + oistype + ' (' + ois.id + ')';
} else {
h4ihoml+=' -> ' + 'You onmouseleave a ' + 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 ' + oistype + ' (' + ois.id + ')';
} else {
h4ih+=' -> ' + 'You clicked a ' + oistype + ' (' + ois.id + ')';
}
document.getElementById('myh4').innerHTML=h4ih;
}
}
}

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

</script>

</head>
<body>
<h1>HTML onmouseout and onmouseleave Events</h1>
<h3>RJM Programming - May, 2019</h3>

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

<table id=mytable onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' border=20>
<thead id=mythead onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<tr id=mytheadtr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<td id=mytheadtdl onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>stopPropagation</td><td id=mytheadtdr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>preventDefault</td>
</tr>
</thead>
<tbody id=mytbody onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<tr id=mybodytr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<td id=mytbodytdl onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<form method='GET' onsubmit=" alert('Ready?'); return true;" id='fstopPropagation' action='./onmouseleave.html' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<input id='itextstopPropagation' type='text' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' value='' placeholder='stopPropagation form' /><br>
<input 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 style='display:none;' id='sbtextstopPropagation' type='submit' value='stopPropagation' />
</form>
</td><td id=mytbodytdr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<form method='GET' onsubmit="alert('Ready?'); return true;" id='fpreventDefault' action='./onmouseleave.html' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);'>
<input id='itextpreventDefault' type='text' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' value='' placeholder='preventDefault form' /><br>
<input 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 style='display:none;' id='sbtextpreventDefault' type='submit' value='preventDefault' />
</form>
</td>
</tr>
</tbody>
</table>


</body>
</html>