十三、js中的事件（用户和网页之间的交互）

最新推荐文章于 2023-12-01 12:29:51 发布
最新推荐文章于 2023-12-01 12:29:51 发布
阅读量769 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45256247/article/details/106888259
版权

事件概念

事件：触发了一个东西/事情 用户和网页之间的交互/动作

举例：鼠标、键盘等所做的动作/交互就是事件，如：onlick等

留心：事件产生后一般交给谁处理 函数处理

事件种类

一、鼠标

单击 onclick
双击 ondblclick
移入 onmouseover
移出 onmouseout
按下 onmousedown
松开 onmouseup
右击 oncontextmenu content内容 context等

onclick单击事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置单击事件   也就是给div设置鼠标单击的动作/交互
divObj.onclick = function() {
    console.log('this is onclick')
}
</script>

在这里插入图片描述
ondblclick双击事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置双击事件   也就是给div设置鼠标双击的动作/交互
divObj. ondblclick = function() {
    console.log('this is onclick')
}
</script>

在这里插入图片描述
onmouseover鼠标移入事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置鼠标移入事件   也就是给div设置鼠标移入的动作/交互
divObj. onmouseover = function() {
    console.log('this is onmouseover')
}
</script>

在这里插入图片描述
onmouseout鼠标移出 事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置鼠标移出事件   也就是给div设置鼠标移出的动作/交互
divObj. onmouseout = function() {
    console.log('this is onmouseout')
}
</script>

在这里插入图片描述
onmousedown鼠标按下事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置鼠标按下事件   也就是给div设置鼠标点击按下的动作/交互
divObj. onmousedown = function() {
    console.log('this is onmousedown')
}
</script>

在这里插入图片描述
onmouseup鼠标点击松开事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置鼠标松开事件   也就是给div设置鼠标点击松开的动作/交互
divObj. onmouseup = function() {
    console.log('this is onmouseup')
}
</script>

在这里插入图片描述
oncontextmenu鼠标右击事件用法示例

<body>
    <div style="width:100px;height:100px;background:red;"></div>
</body>
<script>
// 1. 获取标签
var divObj = document.querySelector('div')
console.log(divObj) //  <div style="width:100px;height:100px;background:red;"></div>
// 2. 设置鼠标右击事件   也就是给div设置鼠标右击的动作/交互
divObj. oncontextmenu = function() {
    console.log('this is oncontextmenu')
}
</script>

在这里插入图片描述

二、键盘

按下 onkeydown
松开 onkeyup
onkeydown键盘按下事件用法示例

<body>
    <form action="">
        <p>
            用户名： <input type="text" name="username">
        </p>
    </form>
</body>
<script>
// 1. 获取标签
var usernameObj = document.querySelector("input[name=username]") 
// console.log(usernameObj)  <input type="text" name="username">

// 2. 给他设置键盘按下事件   键盘松开事件

usernameObj.onkeydown = function() {
    console.log('按下')
}
</script>

在这里插入图片描述
onkeyup键盘松开事件用法示例

<body>
    <form action="">
        <p>
            用户名： <input type="text" name="username">
        </p>
    </form>
</body>
<script>
// 1. 获取标签
var usernameObj = document.querySelector("input[name=username]") 
// console.log(usernameObj)  <input type="text" name="username">

// 2. 给他设置键盘按下事件   键盘松开事件

usernameObj.onkeyup = function() {
    console.log('松开')
}
</script>

在这里插入图片描述

三、表单

表单提交 onsubmit
表单重置 onreset
onsubmit、onreset 都是给 form标签的

失去焦点 onblur
获取焦点 onfocus
下拉改变 onchange 上传头像file 下拉框select 单独记等

焦点名词就是 你鼠标单击input会有一个东西一闪一闪 出现这个东西代表你获取焦点

onblur失去焦点 事件演示

<body>
    <form action="">
        <p>
            用户名： <input type="text" name="username">
        </p>
    </form>
</body>
<script>
 // 1. 获取标签
var usernameObj = document.querySelector("input[name=username]") 
// console.log(usernameObj)  <input type="text" name="username">

// 2. 给他设置输入框失去焦点事件
usernameObj.onblur = function() {
    console.log('失去焦点')
}
</script>

在这里插入图片描述
onfocus获取焦点 事件演示

同上失去焦点用法一样，只不过将onblur改为onfoucus即可；
效果就是在获得焦点时便会执行回调函数里面的功能。

onchange下拉改变事件演示：

 <form action="">
        <p>
            分类
            <select name="" id="">
                <option value="中国">中国</option>
                <option value="泰国" selected>泰国</option>
                <option value="日本">日本</option>
                <option value="美国">美国</option>
            </select>
        </p>
        <p>
            <input type="submit" value="提交">
            <input type="reset" value="重置">
        </p>
    </form>
    
</body>
<script>

var selectObj = document.querySelector('select')
selectObj.onchange = function() {    
    var temp = document.querySelector('select')
    console.log(temp.value)
}

在这里插入图片描述

四、页面

页面加载完毕执行 onload （思考：js代码写在head好还是body结束前面好？body结束前面）
网页尺寸改变 onresize （window.innerWidth || document.documentElement.clientWidth）
网页滚动条 onscroll （发现页面快到底部了 显示返回顶部标签）
document.body.scrollTop
document.documentElement.scrollTop

页面加载完毕执行 onload 事件演示

<script>
    var divObj = document.querySelector('div')
    console.log(1, divObj)  // 返回 null
    
    // 明确：代码是从上向下执行
    // 执行到第4行 div标签还没运行  所以null
    // 因此：以后大家写js代码切记放到 body结束标签位置   先处理HTML 再走JS
    
    
    window.onload = function() { // 因为这块代码声明了，但是函数里面没执行 HTML标签解析完毕了
        var divObj = document.querySelector('div')
        console.log(2, divObj) 
    }
    </script>
<body>
 <div></div>
</body>

在这里插入图片描述
网页尺寸改变 onresize （window.innerWidth || document.documentElement.clientWidth）演示：

<body>
 <div></div>
</body>
<script>
    window.onresize = function() {
    console.log('哥哥别乱动网页')
}
</script>

在这里插入图片描述
网页滚动条 onscroll （发现页面快到底部了 显示返回顶部标签）

<script>
  window.onscroll  = function() {
    console.log('你操作滚动条了')
  }
</script>

在这里插入图片描述
document.body.scrollTop
document.documentElement.scrollTop

<script>
  window.onscroll  = function() {
    console.log('你操作滚动条了')
    console.log(document.documentElement.scrollTop)   // 有HTML 基本结构有效（推荐
    console.log(document.body.scrollTop)              // 没有HTML基本结构
  }
</script>

在这里插入图片描述

小总结

事件是什么：用户和网页之间动作/交互

事件一般都交给谁处理：函数

事件语法：标签对象.事件类型 = 函数

事件种类：

鼠标：onclick!!! 、onmouseover/out!!!、onmousedown/up、oncontextmenu

键盘：onkeydown/up!!!

表单!!!：onsubmit、onfocus、onblur、onchange type:file/select

网页（window：onload、onresize!!、onscroll

滚动条位置（有结构：document.documentElement.scrollTop）
滚动条位置（无结构：document.body.scrollTop)

℡想定下来
关注
js常见用户交互事件处理
12-22 1283
用户交互是基于用户事件的，这些事件通常是鼠标事件、触摸事件以及键盘事件。 一. 监听器与事件处理程序 添加事件监听可以使用 addEventListener() ： element.addEventListener(type, handler [, userCapture]) 移除事件监听可以使用 removeEventListener() ： element.removeE
Javascript之事件
李浩的专栏
03-04 441
一.什么是事件?    JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 主要事件表: 鼠标单击事件( onclick ）: onc
ifvisible.js：跨浏览器和轻量级方式，用于检查用户是否正在查看页面或与页面进行交互
02-03
ifvisible.js 跨浏览器和轻量级方式，用于检查用户是否正在查看页面或正在与页面进行交互。 查看或阅读以下代码示例或查看带 安装 从npm npm install ifvisible.js --save 从鲍尔 bower install ifvisible.js 对于流星 mrt add ifvisible 流星包由通过 例子 // If page is visible right now if ( ifvisible . now ( ) ) { // Display pop-up openPopUp ( ) ; } // You can also check the page status // using `now` method if ( ! ifvisible . now ( 'hidden' ) ) { // Display pop-up if page is not hidden openPopUp ( ) ; } // Possible statuses are: // idle: when user has no interaction //
原生js判断用户是否操作了web页面
awp40320的博客
11-06 1146
原生js判断用户是否操作了web页面 时间: 2018-06-06阅读: 384标签: web   实现思路 用户是否操作了web页面，我们可以在一定时间内根据用户是否触发了某些事件进行判断。比如用户是否点击，是否按键，是否移动了鼠标，以及滚动鼠标滚轴等。如果用户在设定的时间段内没有进行这些操作，我们就能认为用户没有操作web页面。 这里以监听鼠标移动事件来判断，通过一个定时器，来记录用...
判断当前用户是否正在与页面交互
weixin_47180815的博客
06-20 604
Page Visibility API 不知道用户是不是正在与页面交互，这是困扰广大 Web 开发人员的一个主要问题。如果页面最小化了或者隐藏在了其他标签页后面，那么有些功能是可以停下来的，比如轮询服务器或者某些动画效果。 Page Visibility API（页面可见性 API）就是为了让开发人员知道页面是否对用户可见而推出的。 document.hidden：表示页面是否隐藏的布尔值。页面隐藏包括页面在后台标签页中或者浏览 器最小化。 document.visibilityState：表示下列 4
Unity与Js之间交互
07-20
总的来说，Unity与JavaScript之间的交互是WebGL项目中的关键部分，它允许开发者充分利用Unity的强大功能，同时利用JavaScript处理网页环境中的任务，从而实现丰富的交互式游戏和应用。理解并熟练掌握这种交互方式，...
解析Android中webview和js之间的交互
09-05
在Android开发中，Webview是一个非常重要的组件，它允许开发者在应用程序中嵌入网页内容，同时还能实现与JavaScript的交互，极大地扩展了Android应用的功能。本文将深入解析Android Webview与JavaScript之间的交互...
javascript网页键盘交互式代码
10-27
JavaScript是Web开发中不可或缺的一部分，尤其在实现网页与用户之间的交互方面起着核心作用。本文将深入探讨如何利用JavaScript来处理网页键盘事件，使网页具备键盘交互性。 首先，我们需要理解浏览器是如何处理...
Android中Java和JavaScript交互实例
10-24
在Android开发中，有时我们需要在原生Java代码和网页中的JavaScript之间进行交互，以便利用各自的优势。例如，Java可以访问设备硬件和系统服务，而JavaScript则擅长处理网页内容和用户交互。Android为此提供了...
labview论坛-网页浏览器_labview_网页labview_网页交互_
10-04
在LabVIEW中，网页浏览器组件（Web Control）允许开发者在应用程序内嵌入一个可以浏览网页的界面，这为用户提供了丰富的图形化展示和交互的可能性。这个简单的实例可能包含了如何创建和配置Web Control，以及如何...
关于JavaScript与HTML的交互事件
12-01
JavaScript和HTML的交互是通过事件实现的。JavaScript采用异步事件驱动编程模型，当文档、浏览器、元素或与之相关对象发生特定事情时，浏览器会产生事件。如果JavaScript关注特定类型事件，那么它可以注册当这类事件发生时要调用的句柄。 事件流 事件流描述的是从页面中接收事件的顺序，比如有两个嵌套的div，点击了内层的div，这时候是内层的div先出发click事件还是外层先触发？目前主要有三种模型 IE的事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的元素 Netscape的事件捕获：不太具体的节点更早接收事件，而最具体的元素最后接收事件，和事件冒泡相
JavaScript刷新页面的几种方法总结
12-09
1，reload 方法 该方法强迫浏览器刷新当前页面。 语法：location.reload([bForceGet]) 参数： bForceGet， 可选参数， 默认为 false，从客户端缓存里取当前页。true, 则以 GET 方式，从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) 2，replace 方法 方法通过指定URL替换当前缓存在历史里（客户端）的项目，因此当使用replace方法之后，你不能通过“前进”和“后退”来访问已经被替换的URL。 语法： location.replace(URL) 通常使用： location.reload() 或者是 history.go(
JavaScript和HTML之间的交互是通过用户和浏览器操作界面引发的事件来处理事件响应，让网页交互
Vison_的博客
10-16 793
js的事件 鼠标单击事件( onclick ） 鼠标经过事件（onmouseover） 鼠标移开事件（onmouseout） 光标聚焦事件（onfocus） 失焦事件（onblur） 内容选中事件（onselect） 文本框内容改变事件（onchange） 加载事件（onload） 卸载事件（onunload） ...
JS的事件响应，与网页交互
ling的博客
12-20 525
事件 JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。 比如说，当用户单击按钮或者提交表单数据时，就发生一个鼠标单击（onclick）事件，需要浏览器做出处理，返回给用户一个结果。 鼠标单击事件( onclick ） &lt;html&gt; &lt;head&g...
JavaScript中的基本交互
fsLees的博客
03-17 599
JavaScript中的基本交互
Js基础知识第五篇 用户与浏览器的交互：alert、prompt、confirm
叮当的猫猫的博客
08-17 394
1.alert 这个应该是大家最熟悉的一种，页面弹窗, 当窗口弹出的时候用户不能与其他界面进行交互，直到点击确定按钮 alert("hello") 2.prompt result=prompt(title,[default]) 该函数接收两个参数，title是页面显示的文本消息，default是输入框的默认值，可以没有 result用来获取界面输入的值,如果点击取消就返回一个null eg:let name=prompt("请输入您的名字","张三") 3.confirm ...
JavaScript中常见的五种事件
最新发布
weixin_50993868的博客
12-01 1600
鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
ch05 -- HTML 中与用户的交互方式
peabits' Web Log
03-27 1102
HTML 中与用户的交互方式 HTML 表单标签 使用 HTML 表单 (form) 实现网站与用户交互。 表单可以把浏览者输入的数据传送到服务器端，服务器端程序就可以处理表单传过来的数据。 语法： <form method="传送方式" action="服务器文件"> 说明： <form>：<form> 标签是成对出现的，以 <form&gt...
交互设计中的事件
实践求真知
01-29 905
一事件的概念 事件的概念很广泛，本篇的事件特指用户在网页和APP上的操作，并且该事件可以被系统识别。 比如，用户单击确定按钮、移动鼠标、输入文字等都是事件。系统在识别事件后就要做出响应，这个响应可以是改变输入框的颜色、弹出键盘、控制输入内容等。 比如，用户用手机号进行登录，过程是：用户单击输入框 > 输入框颜色改变，并弹出数字键盘 >用户输入手机号，但只能输入数字 >用户输入完 11 位数字后，不允许再输入。 在这个过程中，用户单击输入框、用户输入手机号都是可以被系统识别的事...
深入理解JavaScript：对象、事件与网页交互
JavaScript代码可以在浏览器中直接执行，无需预编译，这使得它成为网页动态效果和交互的核心。 基本数据结构： JavaScript有七种基本数据类型：Undefined、Null、Boolean、Number、BigInt、String和Symbol。常量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值