利用javaScript处理常用事件详解


Posted in Javascript onApril 14, 2021

JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件。

1.窗体事件

例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>花狗在线</title>
		<script>
		window.onload=function(){
			var mydiv = document.getElementById("mydiv");
			alert("页面加载完成,mydiv的内容是:"+mydiv.innerText);
		}
		</script>
	</head>
	<body>
		<div id='mydiv'>我是花狗,花狗的花,花狗的狗。</div>
	</body>
</html>

利用javaScript处理常用事件详解
对此还有:

resize事件:当调整浏览器的窗口到一个新的宽度或者高度时,就会触发resize事件。

scroll事件:文档或者浏览器窗口被滚动期间会触发scroll事件。

焦点事件:指元素对焦点的获得与失去,如文本框选中或者取消选中。


2.鼠标事件

例如当鼠标单击左键,会发生onclick事件:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>花狗在线</title>
		<style>
			html,body{
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
		function mouseclick(){
		alert('页面被单击');
		}
		</script>
	</head>
	<body onclick="mouseclick()">
		<div id='mydiv'>我是花狗,花狗的花,花狗的狗。</div>
	</body>
</html>

注意:将html和body 的样式表都设置为width: 100%,height: 100%,否则onclick无效。

利用javaScript处理常用事件详解


3.键盘事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>花狗在线</title>
		<style>
			html,body{
				background-color: aquamarine;
				width: 100%;
				height: 100%;
			}
		</style>
		<script>
		function keydown(event){ 
			if(event.keyCode==37){
				alert(event.keyCode +'你按下了左键');
			}
			if(event.keyCode==38){
				alert(event.keyCode +'你按下了上键');
			}
			if(event.keyCode==39){
				alert(event.keyCode +'你按下了右键');
			}
			if(event.keyCode==40){
				alert(event.keyCode +'你按下了下键');
			}
		}
		</script>
	</head>
	<body onkeydown="keydown(event)">
	</body>
</html>

利用javaScript处理常用事件详解


4.常用事件方法(包括窗口事件,鼠标事件,键盘事件,文本事件)

 方法      描述
onabort   图像加载被中断
onblur   元素失去焦点
onchange    用户改变域的内容
onclick   鼠标单击某个对象
ondblclick   鼠标双击某个对象  
onerror    当加载文档或者图像时发生某个错误
onfocus   元素获得焦点
onkeydown  某个键盘的键被按下
onkeypress   某个键盘的键被按下或者按
onkeyup 某个键盘的键被松开
onload    某个页面或者图像被完成加载
onmousedown 某个鼠标按键被按下
onmousemove  鼠标被移动
onmouseout  鼠标从某元素移开
onmouseover  鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset     重置按钮被单击
onresize   窗口或者框架被调整尺寸
onselect    文本被选定
onsubmit     提交按钮被单击
onunload  用户退出页面

5.事件冒泡和事件捕捉

事件发生就会产生事件流,当一个HTML元素产生一个事件时,该事件会在元素节点和根节点之间按特定的顺序转播,类似于递和归。事件触发方式如下:addEventListener(“click”,“doSomething”,“ture”); 若第三个参数时ture是事件捕捉,若为false,则为事件冒泡,默认是冒泡。

捕捉型事件传播:


利用javaScript处理常用事件详解


 

冒泡型事件传播


利用javaScript处理常用事件详解

到此这篇关于利用javaScript处理常用事件详解的文章就介绍到这了,更多相关js处理常用事件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript事件 &quot;事件对象&quot;的注意要点
Jan 14 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
纯js实现隔行变色效果
Nov 29 Javascript
JavaScript实现计算多边形质心的方法示例
Jan 31 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
在vue项目中引入高德地图及其UI组件的方法
Sep 04 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
js笔试题-接收get请求参数
Jun 15 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
You might like
php递归法读取目录及文件的方法
2015/01/30 PHP
JS控件autocomplete 0.11演示及下载 1月5日已更新
2007/01/09 Javascript
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
基于jQuery的动态表格插件
2011/03/28 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
javascript内置对象arguments详解
2014/03/16 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
2015/08/17 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
2015/12/02 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python牛刀小试密码爆破
2011/02/03 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python 正则表达式的高级用法
2016/12/04 Python
python logging日志模块的详解
2017/10/29 Python
使用python将图片格式转换为ico格式的示例
2018/10/22 Python
Python中按值来获取指定的键
2019/03/04 Python
使用apiDoc实现python接口文档编写
2019/11/19 Python
在django中使用apscheduler 执行计划任务的实现方法
2020/02/11 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
杭州联环马网络笔试题面试题
2013/08/04 面试题
档案管理员岗位职责
2013/12/01 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
团队口号大全
2014/06/06 职场文书
人力资源管理专业求职信
2014/07/23 职场文书
工作说明书格式
2014/07/29 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL