利用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 MD5加密实现代码
Mar 15 Javascript
一步一步制作jquery插件Tabs实现过程
Jul 06 Javascript
js获取下拉列表框中的value和text的值示例代码
Jan 11 Javascript
js闭包的用途详解
Nov 09 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
AngularJS中filter的使用实例详解
Aug 25 Javascript
angular2系列之路由转场动画的示例代码
Nov 09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
Aug 24 Javascript
javascript中UMD规范的代码推演
Aug 29 Javascript
Node.js npm命令运行node.js脚本的方法
Oct 10 Javascript
Vue使用NProgress进度条的方法
Sep 21 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
You might like
PHP也可以?成Shell Script
2006/10/09 PHP
浏览器关闭后,能继续执行的php函数(ignore_user_abort)
2012/08/01 PHP
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
jQuery scrollFix滚动定位插件
2015/04/01 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
2015/05/12 Javascript
JavaScript中使用Math.floor()方法对数字取整
2015/06/15 Javascript
JavaScript中var关键字的使用详解
2015/08/14 Javascript
js操作cookie保存浏览记录的方法
2015/12/25 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
jQuery 的 ready()的纯js替代方法
2016/11/20 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
node中koa中间件机制详解
2017/08/22 Javascript
js保留两位小数方法总结
2018/01/31 Javascript
Vux+Axios拦截器增加loading的问题及实现方法
2018/11/08 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
微信小程序实现类似微信点击语音播放效果
2020/03/30 Javascript
Vue快速实现通用表单验证的示例代码
2020/01/09 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
ant-design-vue中tree增删改的操作方法
2020/11/03 Javascript
urllib和BeautifulSoup爬取维基百科的词条简单实例
2018/01/17 Python
numpy中以文本的方式存储以及读取数据方法
2018/06/04 Python
python2和python3在处理字符串上的区别详解
2019/05/29 Python
Python学习笔记之集合的概念和简单使用示例
2019/08/22 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python hashlib模块实例使用详解
2019/12/24 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
给导游的表扬信
2014/01/10 职场文书
环保建议书500字
2014/05/14 职场文书
幼儿教师辞职信范文
2015/03/02 职场文书