JavaScript events

Events are often used in conjunction with functions so that the occurrence of an event can drive function execution.

onClick event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link href="one.css" type="text/css" rel="stylesheet">

<script>

    function cli() {
        alert( " click event " );
    }

</script>
<body>

<button onclick= " cli() " >click event</button>

</body>
</html>

onMouseOver and onMouseOut events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link href="one.css" type="text/css" rel="stylesheet">

<script>

    function onOver (ooj) {
        ooj.innerHTML = " Over " ;
    }

    function onOut (ooj) {
        ooj.innerHTML = " Out " ;
    }

</script>
<body>

<div style="width:100px; height: 100px; background-color: antiquewhite"
     onmouseover="onOver(this)" onmouseout="onOut(this)"></div>
</body>
</html>

onChange event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link href="one.css" type="text/css" rel="stylesheet">

<script>

    function onChangeDemo() {
        alert( " textbox changed " );
    }

</script>
<body>

 <input type="text" onchange="onChangeDemo()">

</body>
</html>

onSelect event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link href="one.css" type="text/css" rel="stylesheet">

<script>

    function onSelectDemo (ooj) {
        ooj.style.background = "red";
    }

</script>
<body>

 <input type="text" onselect="onSelectDemo(this)" >

</body>
</html>

onFous and onBlur events

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<link href="one.css" type="text/css" rel="stylesheet">

<script>

    function onfocusDemo(ooj) {
        ooj.style.background = "red";
    }
    function onblurDemo (ooj) {
        ooj.style.background = "blue";
    }

</script>
<body>

<input type="text" onfocus="onfocusDemo(this)" onblur="onblurDemo(this)" >

</body>
</html>

Guess you like