前端三剑客 —— JavaScript (第七节)

内容回顾

DOM编程

        document对象

                有属性

                有方法

        节点类型

                元素节点

                属性节点

                文本节点

        操作DOM属性

                DOM对象.属性名称

                DOM对象[属性名称]

                调用DOM对象的API

        操作DOM样式

                获取有单位的样式值

                        标签对象.style.样式名称,这种方式只能操作行内样式。

                        使用getComputedStyle(标签对象).样式名称,这种方式既可以操作行内的,也可以操作页面或外部的。缺点是需要高版本的浏览器IE9以上。

                        标签对象.currentStyle.样式名称,这种方式是适用于低版本的浏览器。

                获取无单位的样式值

                        offsetwith:获取宽度

                        offsetHeight:获取高

                        offsetTop:获取距离顶部的值

                        offsetLeft:获取距离左边的值

                操作DOM内容

                        处理没有value属性的标签对象,如:div、p、span

                                innerHTML:它是可以解析带有HTML标签的内容,因此我们使用它的时候要谨慎,因为存在安全隐患

                                innerText:它不会解析HTML标签,而是会原样输出,但它不是W3C的标准

                                textContent:它不会解析HTML标签,而是会原样输出,但它是W3C的标准

                        处理带有value属性的标签,如:input、textarea

                                标签对象.value

                                标签对象[value]

事件对象*

JS中采用事件驱动的方式来进行编程,通过事件驱动来响应用户的操作。如:用户点击、鼠标移动等。

所谓事件就是浏览器与用户进行交互的动作。

事件驱动机制

在JS中事件有三个元素:事件源、事件对象(event)、事件处理函数

事件源:一般是页面的标签元素,浏览器的窗口、鼠标点击等。

事件对象:该事件中的所有事件信息

事件处理函数:对这个事件最后的处理行为

这三个元素对应三种事件模型:标签属性绑定、DOM0事件模型、DOM2事件模型

标签绑定

这是一种最简单最传统的一种事件方式。

这样注册的事件,相当于动态调用的函数。

DOM0事件模型

这种模型是为了实现三层分离,由W3C组织提供了基于DOM0的绑定方式:先获取DOM对象,然后再绑定事件。它是一种常见的方式。

DOM2事件

这种事件模型是支持同一个DOM元素可以注册多个事件,而在它里面新增了事件的捕获和冒泡的操作。它是通过addEventListener和romoveEventListener来进行管理。

addEventListener有三个参数:事件名称、事件回调(函数)、事件捕获/冒泡

捕获/冒泡

相比DOM0,去掉了前边的on而已,回调时和DOM0一样,也会默认传入一个event参数,同时this是触发该事件的dom节点。最后一个参数是布尔型,true代表捕获事件,false代表冒泡事件,如图:

意思就是说,某个元素触发了某个事件,最先得知的是window,然后是document,依次而入,直到真正触发事件的那个元素(目标元素)为止,这个过程就是捕获。接下来,事件会从目标元素开始起泡,再依次而出,直到window对象为止,这个过程就是冒泡。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>捕获/冒泡</title>

    <style>

        .test {

            width: 300px;

            height: 300px;

            background: #317FE5;

        }

        .test-inner {

            width: 200px;

            height: 200px;

            background-color: #C44F00;

        }

    </style>

</head>

<body>

<div class="test">

    <div class="test-inner"></div>

</div>

<script>

    // 1. 获取事件源对象

    let outer = document.querySelector('.test')

    // 2. 绑定捕获事件,第三个参数是一个布尔值:true表示捕获,false表示冒泡

    outer.addEventListener('click', function (e) {

        console.log('外层捕获')

    }, true)

    // 2. 绑定冒泡事件,即将第三个参数变为 false

    outer.addEventListener('click', function (e) {

        console.log('外层冒泡')

    }, false)

    // 获取第二个事件源对象

    let inner = document.querySelector('.test-inner')

    inner.addEventListener('click', function (e) {

        console.log('内层捕获')

    }, true)

    inner.addEventListener('click', function (e) {

        console.log('内层冒泡')

    }, false)

</script>

</body>

</html>

事件解除

解除事件的语法:

要想注册过的事件能够被解除,必须将回调函数保存起来,否则无法解除。

窗口事件属性(Window Event Attributes

由窗口触发该事件 (适用于标签)。

属性

描述

onafterprint

在打印文档之后运行脚本

onbeforeprint

在文档打印之前运行脚本

onbeforeonload

在文档加载之前运行脚本

onblur

当窗口失去焦点时运行脚本

onerror

当错误发生时运行脚本

onfocus

当窗口获得焦点时运行脚本

onhaschange

当文档改变时运行脚本

onload

当文档加载时运行脚本

onmessage

当触发消息时运行脚本

onoffline

当文档离线时运行脚本

ononline

当文档上线时运行脚本

onpagehide

当窗口隐藏时运行脚本

onpageshow

当窗口可见时运行脚本

onpopstate

当窗口历史记录改变时运行脚本

onredo

当文档执行再执行操作(redo)时运行脚本

onresize

当调整窗口大小时运行脚本

onstorage

当 Web Storage 区域更新时(存储空间中的数据发生变化时)运行脚本

onundo

当文档执行撤销时运行脚本

onunload

当用户离开文档时运行脚本

 

表单事件(Form Events

表单事件在HTML表单中触发 (适用于所有 HTML 元素, 但该HTML元素需在form表单内)。

键盘事件(Keyboard Events

鼠标事件(Mouse Events

通过鼠标触发事件, 类似用户的行为。

多媒体事件(Media Events

通过视频(videos),图像(images)或者音频(audio) 触发该事件,多应用于HTML媒体元素。

属性

描述

onabort

当发生中止事件时运行脚本

oncanplay

当媒介能够开始播放但可能因缓冲而需要停止时运行脚本

oncanplaythrough

当媒介能够无需因缓冲而停止即可播放至结尾时运行脚本

ondurationchange

当媒介长度改变时运行脚本

onemptied

当媒介资源元素突然为空时(网络错误、加载错误等)运行脚本

onended

当媒介已抵达结尾时运行脚本

onerror

当在元素加载期间发生错误时运行脚本

onloadeddata

当加载媒介数据时运行脚本

onloadedmetadata

当媒介元素的持续时间以及其他媒介数据已加载时运行脚本

onloadstart

当浏览器开始加载媒介数据时运行脚本

onpause

当媒介数据暂停时运行脚本

onplay

当媒介数据将要开始播放时运行脚本

onplaying

当媒介数据已开始播放时运行脚本

onprogress

当浏览器正在取媒介数据时运行脚本

onratechange

当媒介数据的播放速率改变时运行脚本

onreadystatechange

当就绪状态(ready-state)改变时运行脚本

onseeked

当媒介元素的定位属性 [1] 不再为真且定位已结束时运行脚本

onseeking

当媒介元素的定位属性为真且定位已开始时运行脚本

onstalled

当取回媒介数据过程中(延迟)存在错误时运行脚本

onsuspend

当浏览器已在取媒介数据但在取回整个媒介文件之前停止时运行脚本

ontimeupdate

当媒介改变其播放位置时运行脚本

onvolumechange

当媒介改变音量亦或当音量被设置为静音时运行脚本

onwaiting

当媒介已停止播放但打算继续播放时运行脚本

其他事件

事件演示

1)窗口事件

2)表单事件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>事件类型-表单事件</title>

    <style>

        input {

            border-radius: 3px;

            outline: none;

            font-size: 12px;

        }

      .blue {

          border: 1px solid #317FE5;

      }

      .green {

          border: 1px solid green;

      }

      .red {

          border: 1px solid red;

      }

      span {

          font-size: 12px;

      }

    </style>

</head>

<body>

<input type="text" name="username" class="blue" placeholder="请输入用户名"> <span></span>

<script>

    let input = document.querySelector('input')

    let span = document.querySelector('span')

    /*input.onfocus = function () {

    }*/

    input.addEventListener('focus', function (e) {

        //console.log(e)

        //console.log(e.target.className);

        e.target.className = 'green'

        span.innerHTML = '请输入用户名'

    })

    input.onblur = function (e) {

        //console.log(e)

        let val = e.target.value

        if (val === '') {

            e.target.className = 'red'

            span.innerHTML = '用户名不为空'

            span.style.color = 'red'

        } else {

            e.target.className = 'blue'

            span.innerHTML = '用户名有效'

            span.style.color = 'green'

        }

    }

</script>

</body>

</html>

3)键盘事件

4)鼠标事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/533397.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Linux][进程概念][进程优先级]详细解读

目录&#xff09; 0.冯诺依曼体系结构1.操作系统(Operator System)1.概念2.设计OS的目的3.定位4.系统调用和库函数概念5.总结 2.进程1.基本概念2.描述进程 -- PCB3.task_struct内容分类4.组织进程5.查看进程6.通过系统调用获取进程标识符7.通过系统调用创建进程 -- fork初识8.进…

44---MSATA电路设计

视频链接 mSATA & mini-pcie电路设计01_哔哩哔哩_bilibili mSATA电路设计 1、mSATA简介 1.1、mSATA基本介绍 mSATA接口是标准SATA的迷你版本&#xff0c;通过mini PCI-E界面传输信号&#xff0c;传输速度支持1.5Gbps、3Gbps、6Gbps三种模式。mSATA接口的诞生&#xff…

数据可视化的3D问题

三维对象非常流行&#xff0c;但在大多数情况下会对解释图形的准确性和速度产生负面影响。 以下是对涉及 3d 的主要图形类型的回顾&#xff0c;并讨论了它们是否被认为是不好的做法。 1、3D 条形图&#xff1a;不要 这是一个 3d 条形图。 你可能很熟悉这种图形&#xff0c;因为…

自学嵌入式,已经会用stm32做各种小东西了,下一步是什么,研究stm32的内部吗?

是的&#xff0c;深入研究STM32的内部是一个很好的下一步。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 了…

【Vue + keep-alive】路由缓存

一. 需求 列表页&#xff0c;n 条数据项可打开 n 个标签页&#xff0c;同时1条数据项的查看和编辑共用一个标签页。如下所示&#xff1a; 参考 // 主页面 // 解决因 路由缓存&#xff0c;导致 编辑后跳转到该页面 不能实时更新数据 onActivated(() > {getList() })二. 实现…

Java面试题戏剧

目录 第一幕 、第一场&#xff09;某大厦楼下大门前第二场&#xff09;电梯中第三场&#xff09;走廊中 第二幕、第一场&#xff09;公司前台第二场&#xff09;公司卫生间 第三幕、第一场&#xff09;一场异常面试 第四幕 、第一场&#xff09;大厦楼下门口第二场&#xff09;…

实验5 VLAN基础配置

实验5 VLAN基础配置 一、 原理描述二、 实验目的三、 实验内容四、 实验配置五、 实验步骤1.配置IP地址2.检测链路连通性3.创建 VLAN4.配置Access接口5.检验结果6.配置Trunk端口7.检验连通性 一、 原理描述 现代局域网通常配置为等级结构&#xff0c;一个工作组中的主机通过交…

【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载&#xff0c;然后代码参考如下&#xff0c;功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。 签名效果&#xff1a; 预览效果&#xff1a; 下载 smooth-signature 链接&#xff1a;https://github.com/linjc/smooth-signature 代码参考&a…

流程图步骤条

1.结构 <ul class"stepUl"> <li class"stepLi" v-for"(item, index) in stepList" :key"index"> <div class"top"> <p :class"{active: currentState > item.key}">{{ item.value }}…

ROS机器人未知环境自主探索功能包explore_lite最全源码详细解析(五)

本系列文章主要针对ROS机器人常使用的未知环境自主探索功能包explore_lite展开全源码的详细解析&#xff0c;并进行概括总结。 本系列文章共包含六篇文章&#xff0c;前五篇文章主要介绍explore_lite功能包中 explore.cpp、costmap_tools.h、frontier_search.cpp、costmap_clie…

Canal--->准备MySql主数据库---->安装canal

一、安装主数据库 1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW2.启动数据库 do…

汽车4S行业的信息化特点与BI建设挑战

汽车行业也是一个非常大的行业&#xff0c;上下游非常广&#xff0c;像主机厂&#xff0c;上游的零配件&#xff0c;下游的汽车流通&#xff0c;汽车流通之后的汽车后市场&#xff0c;整个链条比较长。今天主要讲的是汽车流通&#xff0c;汽车4S集团。一个汽车4S集团下面授权代…

【CSS】利用Vue实现数字翻滚动画效果

利用Vue实现数字翻滚动画效果 在很多数据可视化的需求中&#xff0c;动态呈现数据变化是一个常见且具有较强视觉冲击力的手段&#xff0c;尤其是数字的实时变化。今天我们将探讨如何使用 Vue.js 和 CSS3 来实现数字的翻滚动画效果&#xff0c;即模拟真实物体在Z轴上翻动的效果…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

利用Flexbox和Margin实现智能布局:如何巧妙分配剩余空间,让你的网页设计更上一层楼?

1、演示 2、flex布局 Flex布局是一种用于Web开发的弹性盒子布局模型&#xff0c;它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法&#xff1a; 容器属性&#xff1a; display: flex;&#xff1a;将容器指定为Flex布局。flex-dire…

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…

【IC前端虚拟项目】验证阶段开篇与知识预储备

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 从这篇开始进入验证阶段&#xff0c;因为很多转方向的小伙伴是转入芯片验证工程师方向的&#xff0c;所以有必要先做一个知识预储备的说明&#xff0c;或者作为验证入门的一个小指导吧。 在最开始&#…

C++11 设计模式1. 模板方法(Template Method)模式学习。UML图

一 什么是 "模板方法&#xff08;Template Method&#xff09;模式" 在固定步骤确定的情况下&#xff0c;通过多态机制在多个子类中对每个步骤的细节进行差异化实现&#xff0c;这就是模板方法模式能够达到的效果。 模板方法模式属于&#xff1a;行为型模式。 二 &…

vivado 调试核时钟设置指南

调试核时钟设置指南 注释 &#xff1a; 以下章节适用于 7 系列、 UltraScale 和 UltraScale 器件。 Versal 调试核使用基于 AXI 的连接 &#xff0c; 且不受本章中的 时钟设置指南的约束。 Vivado 硬件管理器使用 JTAG 接口来与 Vivado Debug Hub 核进行通信 &#…

Spring Boot统一功能处理之拦截器

本篇主要介绍Spring Boot的统一功能处理中的拦截器。 目录 一、拦截器的基本使用 二、拦截器实操 三、浅尝源码 初始化DispatcherServerlet 处理请求&#xff08;doDispatch) 四、适配器模式 一、拦截器的基本使用 在一般的学校或者社区门口&#xff0c;通常会安排几个…