2020-12-28 JavaScript基本概念 事件

最新推荐文章于 2024-02-08 11:56:56 发布
最新推荐文章于 2024-02-08 11:56:56 发布
阅读量112 收藏
点赞数 1
分类专栏： JavaScript学习总结 文章标签： 定位 js javascript 前端 按键事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51907938/article/details/111873730
版权
本文详细介绍了JavaScript中的事件，包括事件概述、窗口事件（如onload、onscroll）、键盘事件（如onkeydown、onkeyup）、鼠标事件（如onclick、onmousemove）以及表单事件（如onfocus、onsubmit），并提及了事件对象event的重要属性。
摘要由CSDN通过智能技术生成

11.1 事件

事件概述

事情发生并得到处理的操作，叫做事件，通俗的讲就是：事情来了，然后处理。
​ 比如：手机铃声响了（事情来了）--------接电话（处理）
​ 当用户点击按钮的时候，我们会说触发了按钮的onclick事件

11.2 各种类型的事件

11.2.1 窗口事件

window

​ onload 当页面加载完成（页面结构、图片、css文件） 触发

​ onscroll 当滚动条 滚动时 触发

​ onerror 当出现错误（img、input、 script、style、资源加载失败）时触发

​ onresize 当浏览器窗口改变大小时触发

	//window.onload = function(){
    		var myid = document.getElementById('myid')
			//注意：script标签要放在body后面
	  	   // console.log(myid)
	  	    //}
	  	var isb = false
		window.onscroll = function(){
			//console.log(111)
			
			if(isb){
				clearTimeout(isb)
			}
			isb = setTimeout(function(){
				console.log('节流')
			},100)
		}
		//注意：碰到滚动条事件 要做节流操作
		window.onresize = function(){
			console.log('窗口改变大小')
		}
11.2.2 键盘事件

​ onkeydown 当键盘被按下 （不区分大小写。所有功能键都可以）

​ onkeypress 当键盘被按下并松开 (区分大小写。部分功能键 )

​ onkeyup 当键盘 松开 （不区分大小写。所有功能键都可以）

​ 按键码： event.keyCode

​ 回车 13

​

   账号：<input type="text" class="myclass" onkeydown="onkeydownFun(event)" >
   密码：<input type="text" class="myclass" onkeypress="onkeypressFun(event)" >
   验证码：<input type="text" class="myclass" onkeyup="onkeyupFun(event)" >
function onkeydownFun(event){
			console.log('键盘按下',event)
		}
		function onkeypressFun(event){
			console.log('按下并松开执行',event)
		}
		function onkeyupFun(event){
			console.log('键盘松开执行',event)
			if(event.keyCode == 13){
				console.log('登陆中。。。')
			}
		}
		//总结：event 事件对象，事件相关的所有参数 数据全在事件对象 
		// KeyboardEvent  key: "A" 就是键盘上的A  keyCode 65是键盘上A对象的unicolde码
		//type:'keydown'  这是事件名
		// onkeydown onkeyup不区分大小写，统一按大写计算unicode编码
		//onkeypress 区分大小写  大小写unicode编译不一样
		//回车 enter  keycode = 13 
		//场景1： 用户输入账号密码 验证码 回车登陆
11.2.3 鼠标事件

​ onclick 单击

​ ondblclick 双击

​ onmousedown 按下鼠标

​ onmouseup 松开鼠标

​ onmouseenter 鼠标进入目标元素

​ onmouseover 鼠标略过目标元素

​ onmouseleave 鼠标离开目标元素

​ onmouseout 鼠标略过离开目标元素

​ onmousemove 鼠标在目标元素上移动

​ onwheel 鼠标滑轮

​ oncontextmenu 鼠标右键

​ onselectstart 阻止选中文字图片

<body> 
<button onclick="onclickfun(event)">点击</button>
<button ondblclick="ondblclickFun(event)">双击</button>
<button onmousedown="onmousedownFun(event)">按下</button>
<button onmouseup="onmouseupFun(event)">松开</button>
<span onmouseenter="onmouseenterFun(event)">进入目标元素</span>
<span onmouseover="onmouseoverFun(event)">略过目标元素</span>
<span onmouseleave="onmouseleaveFun(event)">离开目标元素</span>
<span onmouseout="onmouseoutFun(event)">离开略过目标元素</span>
</body>
<script>
//      	   1.onclick		单击
function onclickfun(event){
console.log('点击',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "click" 事件类型
}
// ​			ondblclick	双击
function ondblclickFun(event){
console.log('双击',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "dblclick" 事件类型
}
// ​			onmousedown	按下鼠标
function onmousedownFun(event){
console.log('按下',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mousedown" 事件类型
}
// ​			onmouseup		 松开鼠标
function onmouseupFun(event){
console.log('松开',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mouseup" 事件类型
}
// ​			onmouseenter	鼠标进入目标元素
function onmouseenterFun(event){
console.log('进入',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mouseenter" 事件类型
}
// ​			onmouseover	  鼠标略过目标元素
function onmouseoverFun(event){
console.log('略过',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mouseove" 事件类型
}
// ​			onmouseleave	鼠标离开目标元素
function onmouseleaveFun(event){
console.log('离开',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mouseleave" 事件类型
}
// ​			onmouseout 	  鼠标略过离开目标元素	
function onmouseoutFun(event){
console.log('离开略过',event)
//总结：MouseEvent 事件对象名，target 绑定事件的元素， type: "mouseout" 事件类型
}
// ​			onmousemove	鼠标在目标元素上移动
window.onmousemove = function(event){
// console.log('鼠标移动',event)
//总结：所有事件最后一个参数就是event 
//总结：鼠标移动事件 必须做节流 
//总结：MouseEvent 事件对象名，target 绑定事件的元素html， type: "onmousemove" 事件类型
}
// ​			onwheel				鼠标滑轮
window.onwheel = function(event){
console.log('滚轮',event)
//总结：WheelEvent  事件对象名，target 绑定事件的元素html， type: "wheel" 事件类型
}
// oncontextmenu 鼠标右键
document.oncontextmenu=function (event){
console.log('右键',event)
//总结：MouseEvent 事件对象名，target  事件对象名，target 绑定事件的元素html， type: "contextmenu" 事件类型
//return false; //禁用右键

}
//阻止选中文字 图片
document.onselectstart=function (){
return false;
}
</script>

https://www.cnblogs.com/web100/p/js-enable-copy.html

11.2.4 表单事件

onfocus 获得焦点

onblur 失去焦点

onchange 内容改变–按下回车/失去焦点

oninput 内容改变–每次

onselect 选中内容

onsubmit 按下 submit按钮

onreset 按下 reset 按钮11.1 事件

<body> 
<form action="www.baidu.com">
<input type="text" onfocus="onfocusFun(event)" onblur="onblurFun(event)" onchange="onchangeFun(event)" oninput="oninputFun(event)" onselect="onselectFun(event)">
<button onsubmit="onsubmitFun(event)">提交</button>
<button onreset="onrestFun(event)">重置</button>
</form>


</body>
<script>
//      表单事件  
//表单  input textarea select radio checkbox 
// onfocus		获得焦点
function onfocusFun(event){
console.log('获取焦点',event)
//总结： FocusEvent 事件对象名称，target绑定的元素， 事件类型 type: "focus"
}
// onblur		  失去焦点
function onblurFun(event){
console.log('失去焦点',event)
//总结： FocusEvent 事件对象名称，target绑定的元素， 事件类型 type: "blur"
}
// onchange	   内容改变--按下回车/失去焦点
function onchangeFun(event){
console.log('内容改变并且失去焦点或回车',event)
//总结： Event 事件对象名称，target绑定的元素， 事件类型 type: "change"
//可以通过target 获取元素 .value 获取值
}
// oninput		 内容改变--每次
function oninputFun(event){
console.log('内容改变就触发',event)
//总结： InputEvent 事件对象名称，target绑定的元素， 事件类型 type: "input"
//可以通过target 获取元素 .value 获取值
}
// onselect		选中内容
function onselectFun(event){
console.log('选中触发',event)
//总结： Event  事件对象名称，target绑定的元素， 事件类型 type: "select"
//可以通过target 获取元素 .value 获取值
} 
// onsubmit		按下 submit按钮  // form 和 onsubmit  和 onreset 是一套
function onsubmitFun(event){
console.log('提交',event)
//一般场景下  不用form提交  提交会触发action请求  并自动刷新当然页  
}
// onreset			按下 reset 按钮11.1 事件	
function onresetFun(event){
console.log('重置',event)
}
</script>

11.3 事件对象event

  • 事件对象常用属性

    target type keyCode screenX

  • 事件对象兼容性写法
    在触发DOM上的某个事件时，会产生一个事件对象event。
    ​ 这个对象中包含着所有与事件有关的信息。
    ​ 包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。
    ​ Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

    <script>
    var btn = document.getElementById("btn");
    btn.onclick = function (event) {
            var e = event || window.event;
            console.log(e.target);
        };
        btn.onmouseover = function (event) {
            var e = event || window.event;//为了兼容
            console.log(e.target);
    }
</script>

    ​ 事件函数里面有几个常用的属性，我们来看一下：
    ​ 1.screenX和screenY 是以屏幕为基准进行测量，即：当前元素距离屏幕的尺寸
    ​ 2.pageX 和 pageY 是以当前文档（绝对定位）为基准，不适用于IE6-8;会计算滚动长度
    ​ 3.clientX 和 clientY 是以当前可视区域为基准，类似于固定定位。会忽略滚动长度
    ​

    <body> 
		<div id="box" class="myclass">
	    </div>

</body>
     <script>
     //它们常常和offset家族联合使用来动态获取鼠标相对于盒子的位置（距离盒子边框的距离）：
    // var box = document.getElementById("box");
    // box.onmousemove = function (event) {
    //     var e = event || window.event; //兼容性写法  如果前面对象存在取前面 如果没 取后面
    //     //event本身 有兼容性问题
 
    //     var x = e.clientX - box.offsetLeft;
    //     var y = e.clientY - box.offsetTop;
    //     // console.log(x, y);
    //     box.innerHTML = '(x: ' + x +', y:' + y +')';
    // }


	(function(){  //自执行函数
		var box=document.querySelector("#box");
		box.onclick=function(e){
			var ev=e||window.event;
			console.log("ev:",ev);
			
			//获取鼠标距离页面左侧距离
			console.log("ev.clientX:",ev.clientX);
			//获取鼠标距离页面顶部距离
			console.log("ev.clientY:",ev.clientY);
			
			//获取触发该事件的元素;都是指向触发事件的元素
			console.log("ev.target:",ev.target);//event.target 属性返回哪个 DOM 元素触发了事件
			console.log("ev.srcElement:",ev.srcElement);
		}
	}());
Amanda&Rachel
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
异常将上下文初始化事件发送到类的侦听器实例_Java 理论与实践 做个好的（事件）侦听器...
weixin_39609573的博客
12-04 1077
事件侦听器编写和支持指南Swing 框架以事件侦听器的形式广泛利用了观察者模式(也称为发布-订阅模式)。Swing 组件作为用户交互的目标，在用户与它们交互的时候触发事件；数据模型类在数据发生变化时触发事件。用这种方式使用观察者，可以让控制器与模型分离，让模型与视图分离，从而简化 GUI 应用程序的开发。“四人帮”的 设计模式 一书(参阅 参考资料)把观察者模式描述为：定义对象之间的“一对多”关系...
微信小程序模拟多选效果
海悦童谣的博客
06-11 617
微信小程序模拟多选效果
Solidity：那些你可能错误的调用
YSS_33521的博客
09-25 404
Solidity：那些你就可能错误的调用solidity 中对于事件的监听solidity的event事件事件**在javascript 可以使用web3对上述事件进行监视：**方法一 solidity 中对于事件的监听 solidity的event事件 事件是以太坊EVM提供的一种日志基础设施。事件可以用来做操作记录，存储为日志。也可以用来实现一些交互功能，比如通知UI，返回函数调用结果等1。通过监控事件的执行，可以实现对事件状态的有效查看，并实现本地的数据处理等操作。 事件 当定义的事件触发时，我们可以
微信小程序如何获取元素节点信息？
weixin_46265708的博客
10-30 5465
通常在做微信小程序的时候我们经常会需要获取元素的信息，但是微信小程序有没有完整的“DOM”操作，无法像浏览器中获取元素。不过在微信中也有一套自己的“DOM”，那就是NodesRef，它可以让我们像开发浏览器程序一样轻松愉快的获取页面元素。
微信小程序点击事件如何拿到值
努力搬砖的小码
08-15 930
微信小程序点击事件
JavaScript-事件基础
weixin_38092043的博客
11-25 539
目录 事件基础 事件调用方式 1. 在script中调用2. 在元素中调用事件 鼠标事件 原始（link）-经过（hover）-激活（active）-访问后（visited） onmouse -down-up -over-out -move 键盘事件 onkeydown onkeyup 表单事件 onfocus onblur onselect（很...
JavaScript事件基础知识
王浴昊
04-12 4620
目录 一、DOM0级事件处理 二、事件冒泡与事件捕获 三、DOM2级事件处理 四、IE事件处理程序及跨浏览器支持 五、事件对象 一、DOM0级事件处理事件，由WEB页面中发生的一些特定行为触发。比如在某个页面元素上按下鼠标左键，按下键盘某个按键，某对象获得或丢失焦点时均会触发对应的事件。JavaScript和HTML的交互就是通过事件来实现的。我们使用事件侦听器对事件进行“注册”，事件发生时便执行相
js-code-snippets：学习基本JavaScript概念
02-05
了解实际JavaScript基本概念。 :high_voltage: 对于初学者和中级！ 贡献者指南 如果您不熟悉Git和Github，建议您先进行然后再继续下一步。 在分叉存储库 克隆分叉存储库 $ git clone ...
2020-Advent-of-Code-JS:JavaScript
05-30
首先，让我们了解JavaScript的基本概念。JavaScript是一种广泛应用于网页开发的动态、弱类型、基于原型的脚本语言。它与HTML和CSS一起构成了网页三剑客，是前端开发的重要组成部分。在Node.js环境中，JavaScript可以...
javascript-cheatsheet:了解JavaScript的基本术语，概念和语法
05-04
这是JavaScript基本概念的备忘单。 开始学习JavaScript的基本概念，语法，术语和不同的构造。 奖励：第14节的单页DOM API速查表 想正确学习JavaScript吗？ iLoveCoding Pro会员。 我呈现给您-JavaScript备忘单 :...
JavaScript-Fall2020-ClassProject
02-16
了解它们的基本概念和用法是现代前端开发者必备的技能。 10. **调试与性能优化**：学会使用浏览器的开发者工具进行代码调试，以及如何通过代码优化提高页面加载速度和用户体验，是每个JavaScript开发者都需要掌握的...
workshop-chrome-extension:JavaScript Workshop
05-08
JavaScript Workshop 构建您的第一个Chrome扩展程序 设置： ： 由为 设置 该研讨会所需的全部是和文本编辑器或类似或IDE。 去做： 克隆此研讨会的git存储库 git clone ...
微信小程点击显示对应的内容
weixin_46504346的博客
06-21 1644
要实现微信小程序点击后显示对应的内容，可以使用wx:if和wx:else指令来控制显示或隐藏对应的内容。
微信小程序获取元素节点并对其进行操作
ShawnWang22的博客
08-29 3803
微信小程序获取元素节点并对其进行操作
微信小程序-点击获取绑定事件元素的ID和index
最新发布
weixin_42017221的博客
02-08 756
小程序list数据带值跳转，一般直接通过设置item的id来标识或者通过设置键值data-xxxx的方式标识。2.通过e.currentTarget.dataset.id 即可获取你自己设置的data-id里面值。1.通过 e.currentTarget.id 即可获取该元素id。
微信小程序获取 DOM
一心只想敲好代码
07-14 2111
微信小程序获取 DOM
微信获得点击元素的内容_微信小程序中利用DOM获取页面元素的信息
weixin_39838302的博客
12-21 1162
在js中，我们常常用到类似 $("#id") 这样的代码获得一个页面元素对象 但是在微信小程序中是不支持的，那么我们难免有时候会需要这样一个方法去拿到想要的对象，如下：//首先给你的元素对象一个id：//然后在js里，用一个SelectorQuery来选择对应id的节点(注意id前面要加一个#号)，就可以获取对应节点的属性，包括高度。//创建节点选择器varquery=wx.cre...
微信小程序获取修改元素的样式
weixin_43977647的博客
02-09 8243
1.获取元素的样式 使用wx.createSelectorQuery()来获取元素 这里需要注意的是 1.获取元素样式的函数应该放在onReady：function(){}这个里面 2.获取元素的代码异步执行，想同步执行需要把后面的代码放在setTimeout中 let that = this const query = wx.createSelectorQuery() query.select(...
2021-01-04 JavaScript基础笔试题及答案笔记
Amanda&Rachel的博客
01-04 3889
题目 1、null，undefined，”string"，20，true和false的共同点是（ ） A、都是对象 B、都有相同的实例属性 C、都是原始值 D、都是函数 2、下列哪个正确的引入了myScript.js（ ） A、3、下列哪个符号不是逻辑运算符（ ） A、% B、|| C、 && D、 ! 4、以下（）为JavaScript声明变量的语句。 A、dim x; B、int x; C、var x; D、x; 5、如下代码输出的结果是（ ） console.log(1
JavaScript入门：数组创建与基本概念解析
JavaScript教程深入解析了JavaScript中的数组概念，这是JavaScript编程基础的重要组成部分。不同于其他语言明确的数组类型，JavaScript通过函数定义和New操作符创建数组，允许存储各种数据类型。JavaScript作为一门...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值