Mouse Event in TypeScript: Part 2

Loading

Mouse Event in TypeScript: Part 2

Mouse Event in TypeScript: Part 2

Before reading this article, please go through the following articles:

Mouse Event in TypeScript: Part 1

Introduction

A mouse event occurs when a user moves the mouse in the user interface of an application. There are seven types of mouse events; they are:

Onclick
Ondblclick
Onmousedown
Onmouseup
Onmouseover
Onmouseout
Onmousemove

In this article, I am describing the "Onmouseover" and "Onmouseout" mouse events in TypeScript.

Onmouseover

The onmouseover event occurs when the user moves the mouse pointer into the object. In this example, the smile.gif image is displayed in this event.

Onmouseout

The Onmouseout event occurs when the user moves the mouse pointer out of the object. In this example, the cry.gif image is displayed in this event.

Complete Program

Onmouseover_Onmousedown.ts

class Image_animation {
smile() {
var obj = < HTMLImageElement > document.getElementById("img");
obj.src = "smile.jpg";
}
cry() {
var obj = < HTMLImageElement > document.getElementById("img");
obj.src = "cry.jpg";
}
}
window.onload = () => {
var greeter = new Image_animation();
var obj = < HTMLImageElement > document.getElementById("img");
obj.onmouseover = function() {
greeter.smile();
}
obj.onmouseout = function() {
greeter.cry();
}
};

Onmouseover_Onmousedown_Demo.html

<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>TypeScript HTML App</title>
<link rel="stylesheet" href="app.css" type="text/css" />
<script src="Onmouseover_Onmousedown.js"></script>
</head>
<body>
<h3 style="color: #0033CC">Onmouseover and Onmousedown event in TypeScript</h3>
<div id="content">
<img id="img" alt="" src="smile.jpg" />
</div>
</body>
</html>

Onmouseover_Onmousedown.js

var Image_animation = (function() {
function Image_animation() {}
Image_animation.prototype.smile = function() {
var obj = document.getElementById("img");
obj.src = "smile.jpg";
};
Image_animation.prototype.cry = function() {
var obj = document.getElementById("img");
obj.src = "cry.jpg";
};
return Image_animation;
})();
window.onload = function() {
var greeter = new Image_animation();
var obj = document.getElementById("img");
obj.onmouseover = function() {
greeter.smile();
};
obj.onmouseout = function() {
greeter.cry();
};
};

Output