利用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 相关文章推荐
基于jQuery的倒计时实现代码
May 30 Javascript
JS常用表单验证方法总结
May 22 Javascript
Jquery对象和Dom对象的区别分析
Nov 20 Javascript
js获取页面description的方法
May 21 Javascript
javascript设计简单的秒表计时器
Sep 05 Javascript
js实现跨域访问的三种方法
Dec 09 Javascript
原生JS进行前后端同构
Apr 22 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
JavaScript实现单英文金山打字通
Jul 24 Javascript
解决layUI的页面显示不全的问题
Sep 20 Javascript
浅析vue中的provide / inject 有什么用处
Nov 10 Javascript
JS document form表单元素操作完整示例
Jan 13 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
You might like
php学习笔记之 函数声明
2011/06/09 PHP
前端必学之PHP语法基础
2016/01/01 PHP
YII框架http缓存操作示例
2019/04/29 PHP
取得传值的函数
2006/10/27 Javascript
定义select的边框颜色
2008/04/28 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
Javascript 数组去重的方法(四种)详解及实例代码
2016/11/24 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
JS设计模式之观察者模式实现实时改变页面中金额数的方法
2018/02/05 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python3利用Dlib19.7实现摄像头人脸识别的方法
2018/05/11 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
pandas.DataFrame删除/选取含有特定数值的行或列实例
2018/11/07 Python
python分数表示方式和写法
2019/06/26 Python
python实现kNN算法识别手写体数字的示例代码
2019/08/16 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
浅谈Python协程
2020/06/17 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
好的演讲稿开场白
2013/12/30 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
小学校本培训方案
2014/06/06 职场文书
护士节活动总结
2014/08/29 职场文书
合伙经营协议书范本
2014/09/13 职场文书
2014年结对帮扶工作总结
2014/12/17 职场文书
大学生自荐信怎么写
2015/03/26 职场文书
在人间读书笔记
2015/06/30 职场文书
2016师德师风学习心得体会
2016/01/12 职场文书
基于Python实现将列表数据生成折线图
2022/03/23 Python
DIY胆机必读:各国电子管评价
2022/04/06 无线电
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android