利用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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
js获取本机的外网/广域网ip地址完整源码
Aug 12 Javascript
jQuery实现指定内容滚动同时左侧或其它地方不滚动的方法
Aug 08 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
Sep 21 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
JavaScript异步上传图片文件的实例代码
Jul 04 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
Puppeteer环境搭建的详细步骤
Sep 21 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
vue实现codemirror代码编辑器中的SQL代码格式化功能
Aug 27 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 #Javascript
游戏开发中如何使用CocosCreator进行音效处理
详解CocosCreator项目结构机制
如何使用CocosCreator对象池
Apr 14 #Javascript
CocosCreator如何实现划过的位置显示纹理
JS监听Esc 键触发事键
Apr 14 #Javascript
jQuery实现影院选座订座效果
You might like
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript 权威指南(第四版) 读书笔记
2009/08/11 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
js 判断附件后缀的简单实现方法
2016/10/11 Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
2017/12/12 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
使用Vue 实现滑动验证码功能
2019/06/27 Javascript
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
[00:56]2014DOTA2国际邀请赛 DK、iG 赛前探访
2014/07/10 DOTA
[01:51]开启你的城市传奇 完美世界城市挑战赛开始报名
2018/10/09 DOTA
[57:59]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第一场 11.05
2020/11/05 DOTA
ptyhon实现sitemap生成示例
2014/03/30 Python
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python抓取最新博客内容并生成Rss
2015/05/17 Python
Python 多线程实例详解
2017/03/25 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
Python 串口读写的实现方法
2019/06/12 Python
wxPython实现画图板
2020/08/27 Python
python通过nmap扫描在线设备并尝试AAA登录(实例代码)
2019/12/30 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
网易微博Web App用HTML5开发的过程介绍
2012/06/13 HTML / CSS
extern是什么意思
2016/03/10 面试题
工作自荐信
2013/12/11 职场文书
2014年党员承诺书范文
2014/05/20 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
实习证明格式范文
2014/10/14 职场文书
css3 实现文字闪烁效果的三种方式示例代码
2021/04/25 HTML / CSS