Capítulo 16

Eventos - Eventos de mouse

JavaScript

<script type="text/javascript">
var EventUtil = {
	getEvent: function(event) {
		return event ? event : window.event;
	}
}
window.onload = function() {	
	var event = EventUtil.getEvent(event)
	var paragrafos = document.getElementsByTagName("p");
	
	paragrafos[0].onclick = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
	paragrafos[1].onmousedown = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
	paragrafos[2].onmouseup = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
	paragrafos[3].onmouseover = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
	paragrafos[4].onmouseout = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
	paragrafos[5].ondblclick = function(event) {		
		alert("Evento: " + EventUtil.getEvent(event).type)
	};	
}
</script>

HTML

...
<p class="demo">Aqui click</p>
<p class="demo">Aqui mousedown</p>
<p class="demo">Aqui mouseup</p>
<p class="demo">Aqui mouseover</p>
<p class="demo">Aqui mouseout</p>
<p class="demo">Aqui duplo clique</p>
...

Aqui click

Aqui mousedown

Aqui mouseup

Aqui mouseover

Aqui mouseout

Aqui duplo clique