JAVAscript学习笔记 js事件 第一节 (原创) 参考js使用表

时间:2023-02-05 15:44:10
<!DOCTYPE html>
<html lang="en" onUnload="ud()">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function demo() {
            alert("hello");
        }

        function onOver(ooj) {
            ooj.innerHTML = "鼠标移入显示";
        }

        function onOut(ooj) {
            ooj.innerHTML = "鼠标移出显示";
        }

        function changeDemo(bg) {
            alert("内容改变了啊")
        }

        function changeDemo1(bg) {
            bg.style.background = "red";
        }

        function changeDemo2(bg) {
            bg.style.background = "blue";
        }

        function mgs() {
            alert("内容加载完毕")
        }

        function bu(bg) {
            var b = bg.value;
            alert("鼠标移开事件(您输入的是)" + b);
        }

        function ud() {
            alert("您关闭了网页")

        }

    </script>

    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: cadetblue;
        }

    </style>
</head>
<body onload="mgs()" onunload="ud()">
<!--网页加载完毕事件,网页关闭事件(关闭后执行看不见)-->
<button onclick="demo()">按钮</button>
<!--单机事件-->
<div class="div" onmouseout="onOut(this)" onmouseover="onOver(this)">开始显示</div>
<form>
    <input type="text" onchange="changeDemo(this)"/>
    <!--文本内容改变事件-->
    <input type="text" onselect="changeDemo1(this)" onfocus="changeDemo2(this)"/>
    <!--文本内容选中事件--> <!--鼠标聚集(选中)事件-->
    <input type="text" onblur="bu(this)"/>
    <!--移开光标事件事件-->

</form>
</body>
</html>