网站建设学习（十二）——事件对象

最新推荐文章于 2024-07-22 22:37:58 发布

QJM1995

最新推荐文章于 2024-07-22 22:37:58 发布

阅读量308

点赞数

文章标签： html JavaScript 事件对象

本文链接：https://blog.csdn.net/QJM1995/article/details/86680295

版权

上一篇介绍了BOM编程，通过对象可以对浏览器进行操作，但是在介绍过程中在html标签中引入了诸如onclick等属性，这些也属于对象一类，严格来讲应属于内置对象，先介绍BOM可以更好的理解事件对象的应用，事件对象顾名思义就是触发事件来进行一系列操作，将html与js联系起来。至此js内置对象与BOM已经介绍完毕，但是如何获取或者返回用户的数据呢，下一篇将会继续介绍DOM编程。

html：

<html>
<!--  标签html：内部包含整个HTML页面，所有的设计均在当前的html标签内部进行-->
    <head>
    <!--整个文件的头部，里面包括一些属性供浏览器识别解析，对用户不可见-->

        <title>标题</title>
        <!--标签title，说明整个页面的标题，最终显示在浏览器加载页面的标签页-->

        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <!--告诉浏览器以utf-8的码表进行解码，防止中文乱码，meta标签是无标签体标签，结束在开始标签后加反斜杠，即空标签-->

        <meta name="keywords" content="html,展示"/>
        <!--展示此网页的关键词，供搜索引擎使用，以“,”分开，其中关键词个数为权重，越多权重越低，一般为3到5个-->

        <meta name="description" content="html编程学习"/>
        <!--网页描述，展示在搜索引擎的网页的索引页面-->

        <script src="事件对象.js"></script>
        <!--引入js文件-->

    </head>


    <body>
    <!--整个文件的体，设计元素在这个部分中，最终展示给用户-->

    <input type="button" value="单击事件" onclick="test_onclick()"/><br/>
    <!--单击时触发-->
    <input type="button" value="双击事件" ondblclick="test_ondblclick()"/><br/>
    <!--双击时触发-->
    <p>创建用户：</p>
    <input type="text" id="username" value="10个汉字以内" onfocus="test_onfocus()" onblur="test_onblur()"/><span id="show"></span><br/>
    <!--焦点聚焦时和不聚焦时触发-->
    <p>选择框：</p>
    <select onchange="test_onchange()" id="ABC">
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <!--选择事件触发-->

    <!--
        onabort	图像加载被中断
        onerror	当加载文档或图像时发生某个错误
        onkeydown	某个键盘的键被按下
        onkeypress	某个键盘的键被按下或按住
        onkeyup	某个键盘的键被松开
        onload	某个页面或图像被完成加载
        onmousedown	某个鼠标按键被按下
        onmousemove	鼠标被移动
        onmouseout	鼠标从某元素移开
        onmouseover	鼠标被移到某元素之上
        onmouseup	某个鼠标按键被松开
        onreset	重置按钮被点击
        onresize	窗口或框架被调整尺寸
        onselect	文本被选定
        onsubmit	提交按钮被点击
        onunload	用户退出页面
    -->
    </body>
</html>

事件对象.js：

function test_onclick(){
    alert("单击事件触发");
}

function test_ondblclick(){
    alert("双击事件触发");
}

function test_onfocus(){
    var username = document.getElementById("username");
    username.value = "";
}//聚焦时触发方法

function test_onblur(){
    var username = document.getElementById("username").value;
    var usernameid = document.getElementById("show");
    if (username == ""){
        usernameid.innerHTML = "不可为空".fontcolor("red");
    }else{
        usernameid.innerHTML = "正确".fontcolor("green");
    }
}//不聚焦时触发方法

function test_onchange(){
    var changeid = document.getElementById("ABC").value;
    switch (changeid){
        case "A":
            alert("A");
            break;
        case "B":
            alert("B");
            break;
        case "C":
            alert("C");
            break;
    }
}//选择事件测试

JavaScript参考手册链接：JavaScript参考手册

这其中有不合适或者不正确的地方欢迎指正，我的QQ号码：2867221444（乔金明），谢谢，也可以相互交流下，备注信息随意，只要能看得出是开发者或者学习者即可。

QJM1995

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网站建设学习（十二）——事件对象

上一篇介绍了BOM编程，通过对象可以对浏览器进行操作，但是在介绍过程中在html标签中引入了诸如onclick等属性，这些也属于对象一类，严格来讲应属于内置对象，先介绍BOM可以更好的理解事件对象的应用，事件对象顾名思义就是触发事件来进行一系列操作，将html与js联系起来。至此js内置对象与BOM已经介绍完毕，但是如何获取或者返回用户的数据呢，下一篇将会继续介绍DOM编程。...
复制链接

扫一扫