JavaWeb (二) js中的事件与DOM 模型

最新推荐文章于 2024-04-12 16:19:54 发布

鮀城小帅

最新推荐文章于 2024-04-12 16:19:54 发布

阅读量222

点赞数

分类专栏： # WEB前端文章标签： js 事件 dom 模型 JS事件

本文链接：https://blog.csdn.net/weixin_42405670/article/details/101001726

版权

WEB前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

个人博客网：https://wushaopei.github.io/ (你想要这里多有)

一、JS 事件

1、什么是时间？

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

常用的事件：

 onload 加载完成事件        常用于页面被浏览器加载完成之后自动做一些初始化工作.
 onclick 单击事件           常用于按钮被单击之后的响应工作
 onblur 失去焦点时间         常用于输入框失去焦点后，验证其中的内容是否合法
 onchange 内容发生改变时间   常用于输入框或下拉列表内容发生改变后响应
 onsubmit 表单提交时间       常用于表单提交，在提交之前验证所有表单项是否合法。只要有一个不合法，就组织表单提交。

2、注册事件

注意：注册事件和绑定事件是一个东西。

（1）注册事件， 就是告诉浏览器，当事件触发后，需要执行哪些代码

事件的注册可分为：

静态注册 和 动态注册两种；

静态注册事件：静态注册是指通过事件属性直接赋予事件响应后的代码，这种方式我们称之为 静态注册。
动态注册事件：动态注册是指通过先获取标签对象。然后再通过标签对象.事件名 = function(){} 的方式赋值，这种操作叫 动态注册。

动态注册语法规范：

  window.onload = function(){
    
    1 查找标签对象
    2 通过标签对象.事件名 = function(){}
  }

（2）onload 事件示例：

<head>

    <meta charset="UTF-8" content="text/html">
    <title>Title</title>
    <script type="text/javascript">
        window.onload = function () {
            alert("页面加载完成==动态");
        }
    </script>
</head>
<body onload="alert('页面加载完成！')">

</body>

注意：

当同时声明静态注册与动态注册时，静态注册优先级最高，静态注册事件生效，动态注册事件被屏蔽。

效果截图：

静态注册：

动态注册：

（3） onclick 事件示例代码：

<head>
    <meta charset="UTF-8" content="text/html" http-equiv="content-type">
    <title>Title</title>
    <script type="text/javascript">

        function onclickFun() {
            alert("这是onclick单击事件静态注册");
        }
        // 动态注册单击事件
        window.onload = function () {
//          1、查找标签对象
            // getElementById 通过属性值获取标签对象
            // get 是获取
            // Element 是元素 （元素就是标签）
            // by 由 。。。通过
            // id   id 属性
            var btnObj = document.getElementById("btn01");
   
//          2、通过标签对象.事件名 = function(){}
            btnObj.onclick = function () {
                alert("这是动态注册的 onclick 事件");
            }
        }
    </script>
</head>
<body>
    <!--
        静态注册单击事件
       -->
    <input  type="button" value="按钮" onclick="onclickFun()"/>

    <button id="btn01">按钮2</button>
</body>

效果截图：

静态注册：

动态注册：

（4）onblur 失去焦点事件

    <head>
        <meta charset="UTF-8" http-equiv="content-type" content="text/html">
        <title>Title</title>
        <script type="text/javascript">
            function onblurFun() {
                // console 这是 js 中提供的一个专门用于调试的对象。表示控制台
                // log 方法就是输出内容。可以传递任意参数
                console.log("这是静态注册 onblur 事件");
            }

            window.onload = function () {

                //1、 获取标签对象
                var passObj = document.getElementById("password");
                //2、通过标签对象.事件名 = function(){}
                passObj.onblur = function () {
                    console.log("这是动态注册的 onblur 事件");
                }
            }

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

效果截图：

静态注册：

动态注册：

（5）onchange 内容发生改变事件

<head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function onchangeFun() {
                alert("静态注册onchange 事件");
            }

            window.onload = function () {
                //1、标签对象
                var selObj = document.getElementById("sel01");
                //2、通过标签对象.事件名 = function(){}
                selObj.onchange = function () {
                    alert("动态注册 onchange 事件");
                }
            }
        </script>
    </head>
    <body>
        请选择你心中的女神：
        <select onchange="onchangeFun();">
            <option>--请选择--</option>
            <option>刘亦菲</option>
            <option>柳岩</option>
            <option>王李丹妮</option>
        </select>
        <br/>
        请选择你心中的男神：
        <select id="sel01">
            <option>--请选择--</option>
            <option>胡歌</option>
            <option>陈道明</option>
            <option>乔振宇</option>
            <option>古天乐</option>
        </select>
    </body>

静态注册：

动态注册：

（6） onsubmit 表单提交事件

  <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            function onsubmitFun() {
                alert("静态——开始验证表单项，发现不合法");
                return false;
            }

            window.onload = function () {
                //1、获取标签
                var formObj = document.getElementById("form01");

                //2、通过标签对象.事件名 = function(){}
                formObj.onsubmit = function () {
                    alert("动态注册 == 开始验证表单项，发现不合法");
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <!--
            onsubmit 事件，return false.就会阻止表单提交
        -->
        <form action="http://www.baidu.com" onsubmit="return onsubmitFun();">
            <input type="submit" value="静态注册"/>
        </form>
        <form action="http://www.baidu.com" id="form01">
            <input type="submit" value="动态注册"/>
        </form>

    </body>

静态注册事件：

动态注册事件：

二、DOM模型

DOM 全是 Document Object Model 文档对象模型

大白话，就是把文档中的标签，属性，文本，转换成为对象来管理。

那么它们是如何实现把标签、属性、文本转换成为对象来管理呢。这就是我们马上要学习的重点。

1、 Document 对象

Document 对象的理解：

Document 它管理了所有的 Html 文档内容
document 它是一种树结构的文档。有层级关系
它让我们把所有的标签都对象化
我们可以通过 document 访问所有的标签对象

2、Html 标签的对象化

（1）什么是对象化？

这里可以借鉴 JavaSE 中面向对象知识来理解。

具体的例子：

     有一个人有年龄： 18岁，性别：女，名字： 张某某
     我们要把这个人的信息对象化怎么办？
        
     Class  Person {

        private int age;
        private String sex;
        private String name;
     }

（3）那么html 标签要对象化怎么办？

    <body>
        <div id = "div01">div01</div>
    </body>

模拟对象化，相当于：

   class Dom {
        private String id;    //id属性
        private String tagName; //表示标签名
        private Dom parentNode; //父亲
        private List<Dom> children; //孩子节点
        private String innerHTML; //起始标签和结束标签中间的内容  
   }

3、Document 对象中的方法介绍

    document.getElementById(elementId)
    通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
    
    document.getElementsByName(elementName)
    通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
    
    document.getElementsByTagName(tagName)
    通过标签名查找标签 dom 对象。 tagName 是标签名
    
    document.createElement(tagName)
    方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名

要点：

如果标签对象有 id 属性，优先使用 getElementById 查找标签对象

如果标签没有 id 属性，只有 name 属性，则使用 getElementsByName 方法进行查找

如果标签既没有 id 属性，也没有 name 属性，最后才使用 getElementsByTagName

getElementById 和 getElementsByName 和 getElementsByTagName 都需要在页面加载完成之后执行。才能得到标签对象。

4、标签化示例：

（1）getElementById 方法示例代码：

需求：当用户点击【验证】按钮的时候，帮我验证一下，输入框中的内容是否合法

验证的规则是：必须由字母，数字，下划线组成，并且长度是 5 到 12 位

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
//          1、绑定单击事件
            function onclickFun() {
//              2、获取输入框中的内容
                //当我们要操作一个标签对象的时候，一定要先获取到这个标签对象
                var usernameObj = document.getElementById("username");
                var usernameText = usernameObj.value;

                //获取用来输出验证结果的 span 标签对象
                var spanObj = document.getElementById("usernameSpan");
                //innerHTML 表示起始标签和结束标签中的内容
                //这个属性，可读可写
                // spanObj.innerHTML = "这个代码真难看"；
                // 3、使用正则表达式去验证
                var patt = /^\w{5,12}$/; //验证的规则是： 必须由字母，数字，下划线组成，并且长度是 5 到 12 位
                //正则对象有一个 test 方法。可以用来验证一个字符串是否匹配正则表达式
                // 匹配就返回 true ，不匹配就返回 false
                if(patt.test(usernameText)){
                    spanObj.innerHTML = "用户名合法";
                    spanObj.innerHTML = "<img alt=\"\" src='right.png' width='15' height='15'/>";
                }else {
                    spanObj.innerHTML = "用户名不合法";
                    spanObj.innerHTML = "<img alt=\"\" src='wrong.png' width='15' height='15'/>";
                }
            }
        </script>
    </head>
    <body>
        用户名：<input type="text" id="username" value="wsp168"/>
        <span style="color: red;" id="usernameSpan"></span>
        <button onclick="onclickFun()">验证</button>
    </body>

效果截图：

（2）getElementsByName 方法示例代码：

需求：根据标签名实现对多选框进行全选、全不选、反选操作

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            //全选事件
            function checkAll() {
                //当我们要操作一个标签对象的时候。一定要先获取到这个标签对象
                //getElementByName 是根据 name  属性查找返回对象的集合。
                //这个集合的操作跟数组一样
                //这个集合中的元素顺序刚好是他们在 html 页面中，从上到下的顺序
                var hobbies = document.getElementsByName("hobby");
                //checked 属性表示单选，复选框的选中状态
                //这个属性可读，可写
                for(var i = 0; i < hobbies.length;i++){
                    hobbies[i].checked = true;
                }
            }

            //全不选
            function checkNo() {
                var hobbies = document.getElementsByName("hobby");
                // checked 属性表示单选，复选框的选中状态。
                //这个属性可读，可写
                for(var i = 0; i < hobbies.length; i++){
                    hobbies[i].checked = false;
                }
            }

            //反选
            function checkReverse() {
                var hobbies = document.getElementsByName("hobby");
                //checked 属性表示单选，复选框的选中状态
                //这个属性可读，可写
                for (var i = 0; i < hobbies.length; i++){
                    // if(hobbies[i].checked){
                    //     hobbies[i].checked = false;
                    // }else {
                    //     hobbies[i].checked = true;
                    // }
                    hobbies[i].checked = !hobbies[i].checked;
                }
            }
        </script>
    </head>
    <body>
        兴趣爱好：
        <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
        <input type="checkbox" name="hobby" value="cy"/> 抽烟
        <input type="checkbox" name="hobby" value="yy"/>游泳
        <br/>
        <button onclick="checkAll();">全选</button>
        <button onclick="checkNo()">全不选</button>
        <button onclick="checkReverse();">反选</button>
    </body>

效果截图：

（3）getElementsByTagName 方法示例代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            //全选事件
            function checkAll() {
                //getElementsByTagName 是 通过制定的标签名查找返回全部的标签对象集合
                //这个集合的操作跟数组一样
                //这个集合的元素顺序跟他们在 html 页面中，从上到下的顺序一致
                var inputObjs = document.getElementsByTagName("input");
                for(var i = 0; i < inputObjs.length; i++){
                    inputObjs[i].checked = true;
                }
            }
        </script>
    </head>
    <body>
        兴趣爱好：
        <input type="checkbox" name="hobby" checked="checked" value="hj"/>喝酒
        <input type="checkbox" name="hobby" value="cy"/> 抽烟
        <input type="checkbox" name="hobby" value="yy"/>游泳
        <br/>
        <button onclick="checkAll();">全选</button>
    </body>
</html>

效果截图：

（4）createElement 方法示例代码：

需求：通过代码创建标签：<div>国哥棒棒哒！</div>,并添加到body标签中去显示

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script type="text/javascript">
            window.onload = function () {
                var divObj = document.createElement("div");
                // alert(divObj);
                divObj.innerHTML = "今晚通宵";

                var textNode = document.createTextNode("今晚通宵");//创建 dom 节点文本
                divObj.appendChild(textNode);  //拼接节点文本到 div 标签中

                //appendChild 给 body 标签添加子元素
                document.body.appendChild(divObj);
            }
        </script>
    </head>
    <body>

    </body>

效果截图：

5、节点的常用属性和方法

（1）节点的定义：所谓的节点，就是前面讲的标签对象

（2）方法：

通过具体的元素节点调用：

getElementsByTagName()

方法，获取当前节点的指定标签名孩子节点

appendChild(oChildNode)

方法，可以添加一个子节点，oChildNode 是要添加的孩子节点

（3）属性：

 childNodes 
 属性，获取当前节点的所有子节点
 firstChild
 属性，获取当前节点的第一个子节点
 lastChild 
 属性，获取当前节点的最后一个子节点
 parentNode
 属性，获取当前节点的父节点
 nextSibling 
 属性，获取当前节点的下一个节点
 previousSibling
 属性，获取当前节点的上一个节点
 className
 用于获取或设置标签的 class 属性值
 innerHTML 
 属性，表示获取/设置起始标签和结束标签中的内容
 innerText
 属性，表示获取/设置起始标签和结束标签中的文本