<JavaScript>事件机制学习（一）单双击、鼠标、键盘、焦点事件等

最新推荐文章于 2022-07-06 09:28:59 发布
最新推荐文章于 2022-07-06 09:28:59 发布
阅读量200 收藏 1
点赞数 1
分类专栏： JavaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45797022/article/details/105010847
版权

Js的事件机制

事件是将JavaScript脚本与网页联系在一起的主要方式，是JavaScript中最重要的主题之一。当我们的行为动作满足了一定的条件之后，会触发某类事务的执行。
作用：主要是结合js的函数来使用

下面来介绍几个常用的：

单双击事件

单击：onclick： 当鼠标单击的时候会被触发
双击：ondblclick： 当鼠标双击的时候会被触发

鼠标事件

onmouseover： 当鼠标悬停在某个HTML元素上的时候触发
onmousemove： 当鼠标在某个HTML元素上移动的时候触发
onmouseout： 当鼠标在某个HTML元素上移出的时候触发

键盘事件

onkeyup： 当鼠标在某个HTML元素上弹起的时候触发
onkeydown： 当鼠标在某个HTML元素上下压的时候触发

焦点事件

获得焦点和失去焦点事件会在有搜索功能的网站上经常被用到。
onfocus： 当某个HTML元素获取焦点的时候触发
onblur： 当某个HTML元素失去焦点的时候触发

页面加载事件

onload： 当页面加载成功后触发。

以下为一些代码示例：

<head>
最低0.47元/天 解锁文章
Dyhamic
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript常用事件（键盘，鼠标，焦点）
hlt_bk的博客
04-20 377
常用的事件 鼠标常用的事件： （1）单击事件 在这个案例中，事件源就是id为“p1”的元素，事件名是单击，事件注册οnclick=”fun()” 也就是说当单击id为”p1”的元素是，就交给fun函数来处理 （2）双击事件 （3）鼠标按下/弹起事件（onmousedown/onmouseup） （4）鼠标移入和离开事件（onmouseenter/onmouseleave） onmouseover/onmouseout与onmouseenter/onmouseleave 很类似 （5）鼠标移动onm
js 键盘点击事件
weixin_30315435的博客
11-16 429
回车键(Enter)的触发事件 js 代码如下： document.onkeydown = function (e) { if (!e) e = window.event; if ((e.keyCode || e.which) == 13) { alert("触发了enter回车键！"); } } 键盘事件顺便做下测试demo： ...
jQuery 学习--事件
weixin_30780649的博客
02-01 73
下面是 jQuery 中事件方法的一些例子： Event 函数绑定函数至 $(document).ready(function) 将函数绑定到文档的就绪事件（当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元...
JS--JavaScript焦点处理（获取焦点focus、失去焦点blur）
热门推荐
吴声子夜歌的博客
09-27 7万+
焦点处理 焦点处理主要包括focus（获取焦点）和blur（失去焦点）事件类型。所谓焦点，就是激活表单字段，使其可以响应键盘事件。 获取焦点：focus 当单击或使用Tab键切换到某个表单元素或超链接对象时，会触发该事件。focus事件是确定页面内鼠标当前定位的一种方式。在默认情况下，整个文档处于焦点状态，但是单击或者使用Tab键可以改变焦点位置。‘ 示例：在页面加载完毕后，将焦点转移到表单中的第...
js鼠标双击DIV事件和键盘输入事件
大佐
07-13 3818
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} .box1{width:200px;height:20...
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
12-13
在JavaScript中，事件（Events）是用户或浏览器与页面交互时触发的特定动作，比如点击按钮、按下键盘上的键或者移动鼠标。本文将详细介绍如何使用JavaScript处理HTML事件、键盘事件和鼠标事件。 ### HTML事件处理 ...
JavaScript事件类型中焦点、鼠标和滚轮事件详解
11-22
本文主要关注焦点、鼠标和滚轮事件，这些事件在构建动态用户界面时极为重要。 一、焦点事件 焦点事件涉及网页元素获取或失去输入焦点的过程。JavaScript提供了以下几种焦点事件： 1. `blur`：当元素失去焦点时...
JS 事件机制完整示例分析
10-15
nload()"> <h1>JavaScript 事件机制示例</h1> <p>在JavaScript中，事件是用户或浏览器执行的特定动作，例如点击按钮、滚动页面或输入文本。事件机制是JavaScript与用户交互的基础，它定义了如何响应这些动作。本示例...
javascript 多浏览器 事件大全
12-07
2. `onDblClick`：在IE4、Netscape 4及更高版本中支持，表示鼠标双击事件，通常用于实现双击放大或缩小等操作。 3. `onMouseDown`：在IE4、Netscape 4及更高版本中支持，当用户按下鼠标按钮时触发，可用于开始拖拽...
JavaScript常用事件介绍
12-12
自定义对象也是JavaScript事件处理的一部分。可以通过初始化对象或定义构造函数来创建具有特定属性和方法的对象。例如，初始化对象通过大括号 `{}` 创建，而定义构造函数则使用 `function` 关键字，通过 `this` ...
JS中的点击事件与键盘事件
江玉郎
09-07 4610
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。 一 点击事件 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;l
HTML点击文本后文本框获得焦点的三种方式
legendaryhaha的博客
11-03 1万+
点击文本后文本框获得焦点HTML标签获取JS方式获取 HTML标签获取 通过label标签的for和input标签的id，将它们起个一样的名字 &amp;lt;div&amp;gt; &amp;lt;label class=&quot;first&quot; for=&quot;tel&quot;&amp;gt;&amp;lt;span class=&quot;star&quot;&amp;gt;*&a
HTML中的DOM事件——鼠标事件、键盘事件、框架对象事件、表单事件
weixin_44867717的博客
07-06 4953
dom元素
jquery双击指定键盘按键的方式
05-07 380
处理思路： 1.首先确保按了shift键 2.根据两次按键的时间戳判定是否小于1000ms 小于1000：代表连续双击shift键 否则（大于等于1000）：间断按下shift键 var firsttime = 0; $(document)....
双击 表格 td 变成 可以编辑的input框 失去焦点提交
qq_27970999的博客
12-01 4407
$("#table").on("dblclick","td",function(){ var td = $(this); var url=$("form").attr("action"); // 根据表格文本创建文本框 并加入表表中--文本框的样式自己调整 var text = td.text(); var txt = $("").val(text);
Vue input 组件 IOS 设置需要双击 或者 长按 才能获得焦点
唐僧的专栏
08-09 1956
Vue input 组件 IOS 设置需要双击 或者 长按 才能获得焦点 最近在做 Vue 聊天的时候发现 IOS 端 Input 输入 文字的时候 需要长按 或者 双击 才起 获取焦点，fouse 百度之后发现 修改 node_module 里找到 fastClick.js 就能解决 ...
CSS-事件 -单击双击、失去or获得焦点、加载事件、鼠标事件、键盘事件、选择与改变、表单事件
weixin_43998127的博客
10-13 4226
CSS事件 1.点击事件 1.1 onclick:单击事件 1.2 ondblclick:双击事件 2.焦点事件 2.1 onblur: 失去焦点 2.2 onfocus: 元素获得焦点 3.加载事件 onload: 一张页面或一幅图像完成加载。 4.鼠标事件 4.1 onmousedown 鼠标按钮被按下 4.2 onmouseup 鼠标按钮被松开 4.3 onmousemove 鼠标被移动 4.4 onmouseover 鼠标被移动到某个元素上 4.5 onmouseout 鼠标从某元素移开 5.键盘事
html中让<tbody>中每个单元格单独添加鼠标移入和移出的事件监听器
最新发布
06-07
你可以使用JavaScript来为<tbody>中的每个单元格单独添加鼠标移入和移出的事件监听器。可以使用以下代码实现： ```javascript // 获取<tbody>元素 var tbody = document.querySelector('tbody'); // 获取<tbody>中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值