一、onload.加载事件

load事件什么时候发生？
onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生

1、以下执行是错误的，因为代码执行的时候id="btn"的元素还没添加

<body>
<script type="text/javascript">
    // 第一步:根据id获取节点对象
    var btn = document.getElementById("btn"); // 返回null(因为代码执行到此处的时候id="btn"的元素还没加载到内存)

    // 第二步:给节点对象绑定事件
    btn.onclick = function(){
        alert("hello js");
    }
</script>
<input type="button" value="button" id="btn"/>

2、onload事件
2.1、静态注册的onload事件

<!-- load事件什么时候发生？
onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生。-->
<body onload="ready()"><!--注意：不要丢了小括号-->
<script type="text/javascript">
  
  function  ready() {
        document.getElementById("btn").onclick = function(){
            alert("load加载完成事件")
        }
  }
</script>
<input type="button" value="button" id="btn"/>
</body>

2.2、动态注册的onload事件

<body>
<script type="text/javascript">
    // 页面加载的过程中,将a函数注册给了load事件
    // 页面加载完毕之后,load事件发生了,此时执行回调函数a
    // 回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
    // 当id="btn"的节点发生click事件之后,b函数被调用并执行.
    window.load = function(){// 这个回调函数叫做a
        document.getElementById("btn").onclick = function () {// 这个回调函数叫做b
            alert("动态注册的onload事件")
        }
    }
</script>
<input type="button" value="load" id="btn"/>
</body>

3、JS代码设置节点的属性

<body>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var mytext = document.getElementById("mytext")
            // 一个节点对象中只要有的属性都可以"."
            mytext.type = "checkbox";
        }
    }
</script>
<input type="text" id="mytext"/>

<input type="button" value="将文本框变为复选框" id="btn"/>
</body>

在这里插入图片描述
点击按钮后：
在这里插入图片描述

二、onblur失去焦点事件

<body>
    <script type="text/javascript">
        //静态注册失去焦点事件
        function onblurFun() {
            // console是控制台对象，是由JavaScript语言提供，专门用来向浏览器的控制器打印输出，
            // 用于测试使用
            // log()是 打 印 的 方法
            console.log("静态注册失去焦点事件");
        }

	//动态注册失去焦点事件
        window.onload = function () {
            var passwordObj = document.getElementById("password");
            passwordObj.onblur = function () {
                console.log("动态注册失去焦点事件");
            }
        }

    </script>

    用户名：<input type="text" onblur="onblurFun()"/><br/>
    密码：<input id="password" type="text"/><br/>
</body>

在这里插入图片描述

三、onchange内容发生改变事件

<body>
<script type="text/javascript">
//静态注册onchange事件
    function onchangeFun(){
        alert("爱好已经改变了");
    }

//动态注册onchange事件
    window.onload = function () {
        //1、获取标签对象
        var dance = document.getElementById("dance");
        // alert( selObj );
        // 2 通 过 标 签 对 象 . 事 件 名 = function(){
        dance.onchange = function () {
            alert("舞种已经改变了")
        }
    }
</script>
请择你的爱好：
<!--静 态 注 册 onchange事 件 -->
<select onchange="onchangeFun()">
    <option>唱歌</option>
    <option>演戏</option>
    <option>说相声</option>
    <option>跳舞</option>
</select>
<br/>
<br/>
<br/>
请择你要学习的舞种：
<select id="dance">
    <option>狂派舞</option>
    <option>街舞</option>
    <option>地板舞</option>
    <option>锁舞</option>
</select>
</body>

四、onsubmit 表单提交事件

<body>
<script type="text/javascript">
    //静态注册表单提交事件
    function onsubmitFun() {
        //要 验 证 所  表 单 项 是 否 合 法 ， 如 果 ，  一 个 不 合 法 就 阻 止 表 单 提交
        alert("静态注册表单提交事件----发现不合法");
        return false;
    }

    //动态注册表单提交事件
    window.onload = function () {
        //获取标签对象
        var form = document.getElementById("form");
        //通过对象.事件名=function(){}
        form.onsubmit = function () {
            //要 验 证 所  表 单 项 是 否 合 法 ， 如 果 ，  一 个 不 合 法 就 阻 止 表 单 提交
            alert("动态注册表单提交事件----发现不合法");
            return false;
        }
    }
</script>
<!--return false可 以 阻 止 表 单 提 交-->
<form action="http://localhost:8080" onsubmit="return onsubmitFun();">
    <input type="submit" value="静态注册"/>
</form>

<form action="http://localhost:8080" id="form">
    <input type="submit" value="动态注册"/>
</form>
</body>
# javascript
Logo
2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

cover

抢先了解 DeepSeek V3.2：DSA 稀疏注意力突破，推理比肩 GPT-5

avatar 2048 AI社区

C/C++ 析构函数创建与释放的特点、差异及与 Java 的对比

声明方式自动调用：对象生命周期结束时（如离开作用域、delete 操作）。释放资源：常用于释放 new 分配的内存、关闭文件等。C++ 析构函数：作用域自动调用，资源显式释放，RAII 保安全。Java 靠 GC，非内存要手动。

avatar 2048 AI社区

C/C++与Java对象创建方式详解与对比

对象是面向对象编程的核心概念。C/C++和Java作为主流语言，虽然都支持对象，但在对象创建、生命周期管理等方面有显著差异。本文将系统梳理这两类语言的对象创建方式，结合权威资料，辅以流程、状态、序列三类Mermaid图表，帮助读者知其然，更知其所以然。C++于1983年由Bjarne Stroustrup开发，旨在在C语言基础上引入面向对象特性。Java由Sun Microsystems于1995

avatar 2048 AI社区