Mouse Events
Mouse से related events को Mouse Events कहते हैं।
(1) onclick Event
जब user किसी element पर click करता है।
onclick Event तब चलता है जब User:
- Mouse Button दबाता है
- फिर उसे छोड़ता है
अर्थात Complete Click होने पर Event Execute होता है।
Uses of onclick
- Form Submit करना
- Menu Open करना
- Button Action चलाना
- Image Change करना
- Popup दिखाना
Example
<!DOCTYPE html>
<html>
<body>
<button onclick="show()">Click Me</button>
<script>
function show() {
alert("Button Clicked");
}
</script>
</body>
</html>
<html>
<body>
<button onclick="show()">Click Me</button>
<script>
function show() {
alert("Button Clicked");
}
</script>
</body>
</html>
Output
Button click करने पर alert box खुलेगा।
(2) ondblclick Event
जब user double click करता है।
Example
<p ondblclick="demo()">Double Click Here</p>
<script>
function demo() {
alert("Double Clicked");
}
</script>
<script>
function demo() {
alert("Double Clicked");
}
</script>
(3) onmouseover Event
जब mouse किसी element के ऊपर जाता है।
Example
<p onmouseover="demo()">Mouse Over Me</p>
<script>
function demo() {
alert("Mouse Entered");
}
</script>
<script>
function demo() {
alert("Mouse Entered");
}
</script>
(4) onmouseout Event
जब mouse element से बाहर जाता है।
Example
<p onmouseout="demo()">Move Mouse Out</p>
<script>
function demo() {
alert("Mouse Left");
}
</script>
<script>
function demo() {
alert("Mouse Left");
}
</script>
(5) onmousedown Event
जब mouse button दबाया जाता है।
onmousedown Event तब Execute होता है जब User Mouse Button को दबाता है।
यह Event Mouse छोड़ने की प्रतीक्षा नहीं करता।
Uses of onmousedown
- Drag and Drop शुरू करना
- Game Controls
- Drawing Application
Example
<button onmousedown="demo()">Press Mouse</button>
<script>
function demo() {
console.log("Mouse Button Pressed");
}
</script>
<script>
function demo() {
console.log("Mouse Button Pressed");
}
</script>
(6) onmouseup Event
जब mouse button छोड़ा जाता है।
Example
<button onmouseup="demo()">Release Mouse</button>
<script>
function demo() {
console.log("Mouse Button Released");
}
</script>
<script>
function demo() {
console.log("Mouse Button Released");
}
</script>