当前位置： 首页 > article >正文

JS中的事件和DOM操作

article 2024/11/17 18:38:21

一、事件[重要]

1、 事件介绍

事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等

2、 事件绑定方式

事件要想发生,就得将事件和标签先绑定(确定哪个标签发生什么事情,又有什么响应)

一个完整的事件有三部分

  • 事件源(标签),哪里发出的事.

  • 什么事(事件)

  • 响应(动作效果)

事件绑定,其实就是事件和标签绑定

  • 方式1: 事件源,事件,响应在一起(都写在标签内)

  • 方式2: 事件源,事件在一起(写标签内),响应抽取函数(写script)

  • 方式3: 事件和响应全部抽取(标签是单独标签,事件和响应写在js中)

方式1: 事件源,事件,响应在一起

  <body>
    <!-- 事件源(标签),事件,响应(函数) -->
    <!-- 方式1: 事件源,事件,响应在一起 -->
    <!-- onclick是单击事件,是html属性 -->
    <!-- alert() 函数就是事件的响应 -->
    <button type="button" onclick="alert('听说你点我了?')">按钮</button>
  </body>

方式2: 事件源,事件在一起,响应抽取函数

  <body>
    <hr />
    <!-- 方式2: 事件源,事件在一起,响应抽取函数 -->
    <button type="button" onclick="dian()">按钮</button>
    <script>
      // 定义函数
      function dian() {
        alert("你又点我?!");
      }
    </script>
  </body>

方式3【重要】: 事件和响应全部抽取

    <!-- 方式3: 事件和响应全部抽取 -->
    <button id="btn">再点一下试试</button>
    <script>
      // 1) 先获得标签对象
      var btn = document.getElementById("btn");
      // 2) 给标签对象设置事件以及响应,注意是匿名函数
      btn.onclick = function () {
        alert("上瘾了是不是?!");
      };
    </script>

3、 不同事件的演示

这些事件,都是html中标签的属性,都是以onxxx开头

事件名称描述
onchangeHTML 元素内容改变
onblur输入框失去焦点
onfocus输入框获得焦点
onclick用户点击 （单击）HTML 元素
ondblclick用户双击HTML元素
onmouseover用户将鼠标移入一个HTML元素中
onmousemove用户在一个HTML元素上移动鼠标
onmouseout用户从一个HTML元素上移开鼠标
onkeydown用户按下键盘按键
onkeyup键盘弹起
onkeypress按压键盘
onload浏览器已完成页面的加载
onsubmit表单提交

3.1 鼠标事件

    <script>
      var box = document.getElementById("box");
      // 鼠标移动,只要鼠标动,就会触发函数
      box.onmousemove = function () {
        console.log("鼠标移动");
      };
​
      // 鼠标移入,移入进一次,触发一次
      box.onmouseover = function () {
        console.log("鼠标移入");
      };
​
      // 鼠标离开
      box.onmouseout = function () {
        console.log("鼠标离开");
      };
    </script>

3.2 键盘事件

    <script>
      var i = document.getElementById("i");
      // 事件触发后,函数有对应的事件对象
      // 键盘按下
      i.onkeydown = function (event) {
        // console.log("键盘按下");
        // event是事件对象,内部包含事件的所有信息
        // console.log(event);
        // 可以获得这次键盘事件的代号,13是回车键
        if (event.keyCode == 13) {
          console.log("提交表单");
        }
      };
      // 键盘弹起
      i.onkeyup = function () {
        // console.log("键盘弹起");
      };
      // 键盘按压(与按下效果一样)
      i.onkeypress = function () {
        // console.log("键盘按压");
      };
    </script>

3.3 表单事件【重点】

是指表单中能用上的一系列事件

  • onblur 失去焦点

  • onfocus 获得焦点

  • onchange 内容改变

  • onsubmit 表单提交

  <body>
    <div>
      <!-- 
            因为tijiao()函数,返回有了true/false
            所以onsubmit="return true" 即提交表达
               onsubmit="return false" 阻止表达提交
         -->
      <form accept="/java2301" onsubmit="return tijiao()">
        用户名<input id="i1" type="text" name="username" /><br />
        密码<input type="password" name="password" /><br />
        籍贯<select id="jiguan" name="jigaun">
          <option>河南</option>
          <option>河北</option>
          <option>北京</option>
        </select>
        <input type="submit" value="提交" />
      </form>
      <script>
        var i1 = document.getElementById("i1");
        // 绑定获得焦点事件
        i1.onfocus = function () {
          // 将来可以通过操作DOM,获得输入框的值,也可以改变样式
          console.log("输入框获得焦点");
        };
​
        // 绑定失去焦点
        i1.onblur = function () {
          console.log("输入框失去焦点");
        };
​
        var jiguan = document.getElementById("jiguan");
        // 给下拉框绑定内容改变事件
        jiguan.onchange = function () {
          // 将来配合DOM操作,可以获得改变的内容,做一些其他事情
          // 可以用于省市二级联动
          console.log("内容改变");
        };
​
        /*
         1) 表单事件是表单form的事件,所以这个事件要绑定在form上
         2) 函数要返回true/false
         3) onsubmit中也要写return
        */
        function tijiao() {
          console.log("点击提交按钮");
          // return 返回false,认为表达不提交
          // 返回true.表达就会提交
          // 一般用来数据校验
          return true;
        }
      </script>
    </div>
  </body>

3.4 加载事件【重点】

浏览器加载页面,是瀑布式加载,即从上之下依次加载执行. 如果JS代码在上方,就有可能出现有部分下方html代码加载不到导致js操作出错

  • 加载事件是指等页面加载完后才会触发的事件

  <head>
    <title>加载事件</title>
    <script>
      /*
        解决方案,等页面加载完后,再触发函数,执行绑定事件
        页面加载事件是窗口对象的事件
        该函数onload,会在页面加载后触发函数
        */
      window.onload = function () {
        var btn = document.getElementById("btn");
        btn.onclick = function () {
          alert("试试就试试!");
        };
      };
    </script>
  </head>
  <body>
    <button id="btn">点我一下试试?!</button>
  </body>

二、DOM操作

1、 概述

  • 通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

  • HTML DOM 模型被构造为对象的树：

  • 有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式

    • JavaScript 能够改变页面中的所有 HTML 元素。

    • JavaScript 能够改变页面中的所有 HTML 属性。

    • JavaScript 能够改变页面中的所有 CSS 样式。

    • JavaScript 能够对页面中的所有事件做出反应。

2、 查找元素

查找元素(标签)有很多方式

  • 通过id查找元素

    • document.getElementById("id属性值");

    • 如果找到该元素，则该方法将以对象（在 x 中）的形式返回该元素。

    • 如果未找到该元素，则 x 将包含 null。

  • 通过标签名查找元素

    • 方法：getElementsByTagName("合法的元素名");

    • 如果找到,返回的是数组

  • 通过class查找元素

    • 方法：getElementsByClassName("class属性的值")

    • 如果找到,返回的是数组

  <body>
    <!-- 给标签设置id属性,id值要唯一 -->
    <button id="btn">按钮</button>
    <ul>
      <li>貂蝉</li>
      <li>西施</li>
      <li>王昭君</li>
      <li>杨玉环</li>
      <li class="xd">黎姿</li>
      <li class="xd">利智</li>
      <li class="xd">张曼玉</li>
      <li class="xd">朱茵</li>
    </ul>
    <script>
      // 方式1:通过id获得标签对象(对象是唯一)
      var btn = document.getElementById("btn");
      // console.log(btn);
​
      // 方式2:通过标签名来获得
      // 因为有同名,返回的是所有同名标签对象,放入数组中返回
      var liArr = document.getElementsByTagName("li");
      // console.log(liArr);
      for (var i = 0; i < liArr.length; i++) {
        // console.log(liArr[i]);
      }
​
      // 方式3: 通过类名获得标签对象
      var mvArr = document.getElementsByClassName("xd");
      console.log(mvArr);
    </script>
  </body>

3、 元素内容的查找和设置

元素内容,是指标签开闭之间的内容.

<p>这就是内容</p>
<p><span>这就是内容</span></p>

查找和设置使用的是相同的属性

  • innerHTML 获得或设置标签的内容

  • innerText 获得或设置标签的内容

  <body>
    <p id="p1"><span>你好啊,JavaScript</span></p>
    <button id="btn1">设置innerHTML</button>
    <button id="btn2">设置innerText</button>
    <script>
      var p1 = document.getElementById("p1");
      // 获得内容,innerHTML获得是标签和内容
      var innerHTML = p1.innerHTML;
      console.log(innerHTML);
​
      // 获得内容,innerText获得的只是文本内容
      var innerText = p1.innerText;
      console.log(innerText);
​
      var btn1 = document.getElementById("btn1");
      btn1.onclick = function () {
        // 给p标签设置内容,内容中有标签会解析成标签
        p1.innerHTML = "<span>你好啊,李焕英</span>";
      };
​
      var btn2 = document.getElementById("btn2");
      btn2.onclick = function () {
        // 给p标签设置内容,内容全部解析为文本
        p1.innerText = "<span>你好啊,李焕英</span>";
      };
    </script>
  </body>

4、 元素属性的查找和设置

元素属性,是指开标签内的属性,通过dom对象直接调用操作.比如

  • domObj.id

  • domObj.name

  • domObj.value

  • ...

  <body>
    <input id="i1" class="c1" type="text" value="默认值" />
    <button id="btn1">点击获得属性值</button>
    <button id="btn2">点击设置属性值</button>
    <script>
      var btn1 = document.getElementById("btn1");
      var i1 = document.getElementById("i1");
​
      btn1.onclick = function () {
        // 获得属性值
        console.log(i1.id); // 获得id属性值
        console.log(i1.class); // 没有获得class属性
        console.log(i1.type); // 获得type属性值
        console.log(i1.value); // 获得value属性值【重要】
      };
​
      btn2.onclick = function () {
        // 设置属性值
        i1.type = "password";
        i1.value = "123456";  // 【重要】
      };
    </script>
  </body>

5、 元素CSS样式的查找和设置

元素css样式的查找和设置,是指标签中style的属性值的获得和设置

  • 获得属性值

    • 元素对象.style.属性

  • 设置属性值

    • 元素对象.style.属性 = ""

  <body>
    <div
      id="box"
      style="width: 200px; height: 200px; background-color: red"
    ></div>
    <button id="btn1">获得css样式</button>
    <button id="btn2">设置css样式</button>
  </body>

http://www.kler.cn/a/324425.html

相关文章：

  • 常见的测试方法
  • Vuex vs Pinia:新一代Vue状态管理方案对比
  • Opengl光照测试
  • MySQL【五】
  • 二五、pxe自动装机
  • MFC中Picture Control控件显示照片的几种方式
  • 【表达式求值算法】拆解复杂问题：实现计算器
  • 17.第二阶段x86游戏实战2-线程发包和明文包
  • Python近红外光谱数据分析
  • 几个将ppt文件压缩变小的方法！
  • [CKA]CKA预约和考试
  • 产品包装检测系统源码分享
  • OpenGL ES简述(1)
  • 如何使用 WebRTC 获取摄像头视频
  • 组播基础-2-IGMP协议
  • ★ C++进阶篇 ★ map和set
  • 个人健康管理小程序(源码+参考文档+定制）
  • python中序列化和反序列化
  • 一步一步优化一套生成式语言模型系统
  • docker简介、安装、基础知识
  • 基于webComponents的纯原生前端框架
  • Xcode 16 上传AppStore遇到第三方库 bitcode 的问题
  • Python爬虫bs4基本使用
  • Java编程基础：类与对象的探索之旅
  • C++学习笔记----8、掌握类与对象（一）---- 对象中的动态内存分配（6）
  • 【球形空间产生器】