JS学习小结(二)-CSDN博客

本文链接：https://blog.csdn.net/ls_wifi/article/details/102518069

JS的常用事件以及注册事件的两种方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS的常用事件</title>
	</head>
	<body>
		<script type="text/javascript">
			/* 
			  JS中的事件:
			   
			   blur失去焦点
			   focus获得焦点
			   
			   click鼠标单击
			   dbclick鼠标双击
			   
			   keydown键盘按下
			   keyup键盘弹起
			   
			   mousedown鼠标按下
			   mouseover鼠标经过
			   mousemove鼠标移动
			   mouseout鼠标离开
			   mouseup鼠标弹起
			 
			   reset表单重置
			   submit表单提交
			   
			   change下拉列表选中项改变，或文本框内容改变
			   select文本被选定
			   load页面加载完毕(整个HTML页面中所有的元素全部加载完毕之后发生。)
			   
			   任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on。
			   onXXX这个事件句柄出现在一个标签的属性位置上。（事件句柄以属性的形式存在。）
			 */
			//对于当前程序来说,sayHello函数被称为回调函数(callback函数)
			//回调函数的特点:自己把这个函数代码写出来了,但是这个函数不是自己负责调用,由其他程序员负责调用该函数
			 function sayHello(){
				 alert("hello js!")
			 } 
			 
		</script>
		<!-- 注册事件的第一种方式：直接在标签中使用事件句柄 -->
		<!-- 以下代码的含义是:将sayHello函数注册到按钮上,等待click事件发生之后,该函数被浏览器调用。我们称这个函数为回调函数。 -->
		<input type="button" value="hello" onclick="sayHello()"/>
		<input type="button" value="hello2" id="mybtn" />
		<input type="button" value="hello3" id="mybtn1" />
		<script type="text/javascript">
			function doSome(){
				alert("do some!");
				}
			/* 
			  第二种注册事件的方式，是使用纯JS代码完成事件的注册。 
			 */
			//第一步:先获取这个按钮对象(document是全部小写，内置对象，可以直接用，document就代表整个HTML页面)
			var btnObj=document.getElementById("mybtn");
			//第二步:给按钮对象的onclick属性赋值
			btnObj.onclick=doSome;//注意:千万别加小括号.
			
			var mybtn1=document.getElementById("mybtn1");
			mybtn1.onclick=function(){ //这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数.
 				alert("test...............");//这个函数在页面打开的时候只是注册上,不会被调用,在click事件发生之后才会被调用
			}
		</script>
	</body>
</html>

2.关于代码的执行顺序:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码的执行顺序</title>
	</head>
	<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生。 -->
	<!-- <body onload="ready()"> 可以用onload事件去调用函数 -->
	<body>
		<script type="text/javascript">
		window.onload=function(){
			document.getElementById("btn").onclick=function(){
					alert("hello js");
				}
				}
		</script>
		<input type="button" value="hello" id="btn" />
	</body>
</html>

3.JS代码设置节点的属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码设置节点的属性</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				document.getElementById("btn").onclick=function(){
					var mytext=document.getElementById("mytext");
					//一个节点对象中只要有的属性都可以"."
					mytext.type="checkbox";
				}
			}
		</script>
		<input type="text" id="mytext" />
		<input type="button" value="将文本框修改为复选框" id="btn"/>
	</body>
</html>

4.JS代码捕捉回车键

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JS代码捕捉回车键</title>
	</head>
	<body>
		<script type="text/javascript">
			window.onload=function(){
				var usernameElt=document.getElementById("username");
				//回车键的键值是13
				//ESC的键值是27
				 
				usernameElt.onkeydown=function(event){
					//获取键值
					//alert(event);//[object KeyboardEvent] 
					//对于"键盘事件对象"来说,都有keyCode属性用来获取键值
					alert(event.keyCode)
				}
				usernameElt.onkeydown=function(event){
					if(event.keyCode===13){
						alert("正在进行验证。。。")
					}
				}
			}
			
		</script>
		<input type="text" id="username" />
	</body>
</html>

5.void运算符:

<a href="javascript:void(0)" οnclick="window.alert('test code')">
           既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面还不能跳转。
           </a>