JavaScript
JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlex脚本加解密web2.0XML/RSS网页编辑器相关技巧安全相关网页播放器DartVue.js

利用javaScript处理常用事件详解

发布时间：2022-04-16 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了利用javaScript处理常用事件详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

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>

在这里插入图片描述
对此还有：

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无效。

在这里插入图片描述

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>

在这里插入图片描述

4.常用事件方法（包括窗口事件，鼠标事件，键盘事件，文本事件）

&nbsp;方法      描述
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处理常用事件详解的文章就介绍到这了,更多相关js处理常用事件内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！

您可能感兴趣的文章:

脚本宝典总结

以上是脚本宝典为你收集整理的利用javaScript处理常用事件详解全部内容，希望文章能够帮你解决利用javaScript处理常用事件详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的JavaScript相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新JavaScript教程
热门JavaScript教程