事件:电脑输入设备与页面进行交互的响应 常用的事件:
  1. onload:加载完成事件,页面加载完成之后,常用于做页面js代码初始化操作
  2. onclick:单击事件,常用于按钮的点击响应操作
  3. onblur:失去焦点事件,常用于输入框失去焦点后验证其输入内容是否合法
  4. onchange:内容发生改变,常用于下拉列表和输入框内容发生该表后操作
  5. onsubmit:表单提交事件,常用于表单提交前,验证所有表单项是否合法
事件的注册:当事件响应后要指向哪些操作代码 事件的注册又分为静态注册和动态注册两种 静态注册事件:通过html标签的事件属性直接赋予事件和响应后的代码 动态注册事件:通过js代码得到标签的dom对象,然后再通过dom对象.事件名,这种形式赋予事件响应后的代码

onload事件

 // 静态注册事件
// onload事件是浏览器解析页面之后自动触发的事件
    function onLoadFun(params) {
        alert("静态注册onload事件");
    }
// <body onload="onLoadFun();">
// 动态注册onload事件
    window.onload = function () {
        alert("动态注册onload事件");
    }

onclick事件

// 静态注册 onclick事件
    function onClickFun(params) {
        alert("静态注册onclick事件");
    }
// <button onclick="onClickFun();">按钮</button>
 // 动态注册onclick事件
    window.onload = function () {

        // 获取标签对象
        var obj = document.getElementById("eyujun");
        // 通过标签对象.事件名 = function(){}
        obj.onclick = function () {
            alert("动态注册onclick事件");
        }
    }
// <button id="eyujun">按钮</button>

onblur事件


 // 静态注册 onblur事件
    function onBlurFun(params) {
        console.log("静态注册onblur失去焦点事件");
    }
// 用户名:<input type="text" onblur="onBlurFun();"><br>
// 动态注册onblur事件
    window.onload = function () {

        // 获取标签对象
        var obj = document.getElementById("e1yu");
        // 通过标签对象.事件名 = function(){}
        obj.onblur = function () {
            console.log("动态注册onblur事件");
        }
    }
// 密码:<input id="e1yu" type="text"><br>

onchange事件

// 静态注册 onchange事件
    function onChangeFun(params) {
        alert("静态注册onchange事件");
    }
// <select onchange="onChangeFun();">
//     <option value="1">鳄鱼君1</option>
//     <option value="2">鳄鱼君2</option>
//     <option value="3">鳄鱼君3</option>
// </select>
 // 动态注册onblur事件
    window.onload = function () {

        // 获取标签对象
        var obj = document.getElementById("paopaojun");
        // 通过标签对象.事件名 = function(){}
        obj.onchange = function () {
            alert("动态注册onchange事件");
        }
        }
// <select id="paopaojun">
//     <option value="1">鳄鱼君1</option>
//     <option value="2">鳄鱼君2</option>
//     <option value="3">鳄鱼君3</option>
// </select>

onsubmit事件

// 静态注册 onsubmit事件
    function onSubmitFun(params) {
        // 验证所有表单项是否合法
        alert("静态注册不合法");
        return false;

    }
// <form action="https://www.e1yu.com" method="GET" onsubmit="return onSubmitFun();">
//     <input type="submit" value="静态注册">
// </form>
 // 动态注册onblur事件
    window.onload = function () {

        // 获取标签对象
        var obj = document.getElementById("form1");
        // 通过标签对象.事件名 = function(){}
        obj.onsubmit = function () {
            alert("动态注册");
            return false;
        }
    }
// <form id="form1" action="https://www.e1yu.com" method="GET">
//     <input type="submit" value="动态注册">
// </form>

发表评论