Penggunaan JQuery Mouse Event ~ Nyintak

Kali ini saya akan menjelaskan macam macam JQuery Mouse Event :

.click()
Memicu peristiwa dengan "klik".
.dblclick()
Memicu peristiwa dengan "dobel klik".
.contextmenu()
Memicu peristiwa dengan "konteks menu".
.hover()
Memicu peristiwa ketika mouse pointer masuk atau meninggalkan elemen.
.mousedown()
.mouseenter()
Memicu peristiwa ketika mouse memasuki sebuah elemen.
.mouseleave()
Memicu peristiwa ketika mouse meninggalkan sebuah elemen
.mousemove()
.mouseout()
.mouseover()
.mouseup()

Click Event

Double Click Event

Mouse Enter Event

Mouse Leave Event

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("click",function(){
$("#result").text("Click Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Klik"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("dblclick",function(){
$("#result").text("Double Click Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Double Klik"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("mouseenter",function(){
$("#result").text("Mouse Enter Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Mouse Enter"/><br/>
<p id="result"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button").on("mouseleave",function(){
$("#result").text("Mouse Leave Event");
});
});
</script>
</head>
<body style="text-align:center">
<input type="button" id="button" value="Mouse Leave"/><br/>
<p id="result"></p>
</body>
</html>

Nyintak

Nyekrip dari tutorial lengkap dengan penjelasannya

Sunday, 22 May 2016

Penggunaan JQuery Mouse Event

0 comments:

Post a Comment

Kunjungi Juga

Blog Archive

Labels