JS常见事件及其对应函数

最新推荐文章于 2024-06-20 23:18:02 发布

稚枭天卓

最新推荐文章于 2024-06-20 23:18:02 发布

阅读量618

点赞数

分类专栏： JS入门文章标签： onmouseout onmouseover onclick onchange onselect

本文链接：https://blog.csdn.net/u013630349/article/details/51735250

版权

JS入门专栏收录该内容

30 篇文章 0 订阅

订阅专栏

JS常见事件及其对应函数如下图所示：



代码详例：
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Event_Page </title>
        <link rel="stylesheet" type="text/css" href="eve01.css">
    </head>
    <body οnlοad="onload_Fun(this)">
        <button οnclick="onc()"> 按钮 </button>
        <script>
            function onc(){
                alert("on_clik_" +"event");
            }
        </script>

        <!-- this 指向 函数-->
        <div class="div" οnmοuseοver="on_Over_Fun(this)" οnmοuseοut="on_Out_Fun(this)"></div>
        <script>
            <!-- 鼠标 移入 移出 事件 -->
            function on_Out_Fun(ooj){
                ooj.innerHTML = "Out Function";
            }
            function on_Over_Fun(ooj){
                ooj.innerHTML = "Over Function";
            }
        </script>


        <form>
            <input type="text" οnchange="change_Fun(this)">
            <input type="text" οnselect="select_Fun(this)" οnfοcus="focus_Fun(this)">
        </form>
        <script>
            <!-- 文本框 内容 改变 事件 -->
            function change_Fun(bg){
                alert("Change Func !");
            }
            <!-- 文本框 内容 选中 事件 -->
            function select_Fun(bg){
                bg.style.background="red";
            }
            <!-- 文本框 选中 事件 -->
            function focus_Fun(bg){
                bg.style.background="blue";
            }
            <!-- 网页加载完毕 事件 -->
            function onload_Fun(bg){
                alert("网页加载完毕！");
            }
        </script>
    </body>
</html>