JavaScript中常用的事件

鳄鱼君

发表文章数:642

热门标签

,

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 经验教程 » JavaScript中常用的事件

事件:电脑输入设备与页面进行交互的响应
常用的事件:

  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>

未经允许不得转载:作者:鳄鱼君, 转载或复制请以 超链接形式 并注明出处 鳄鱼君
原文地址:《JavaScript中常用的事件》 发布于2020-08-10

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

6 + 1 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册