(JS)JS中的事件

最新推荐文章于 2024-04-25 20:29:33 发布

wenshao007

最新推荐文章于 2024-04-25 20:29:33 发布

阅读量175

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/wenshao007/article/details/105540760

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.JS中常用的事件

	blur失去焦点
	focus获得焦点	

	click鼠标单击
	dbclick鼠标双击jianp
	
	keydown键盘按下
	keyup键盘弹起

	mousedown鼠标按下
	mouseover鼠标经过
	mousemove鼠标移动
	mouseout鼠标离开
	mouseup鼠标弹起
	
	reset表单重置
	submit表单提交

	change下拉列表选中项改变，或文本框内容该表
	select文本被选定
	load页面加载完毕


	任意一个事件都对应一个事件句柄 onxxx这个事件句柄出现在一个标签的属性位置上

回调函数
当一个函数C写出来被A写出来，B去调用了C方法
站在A的角度，C是正向调用函数
站在B的角度，C是回调函数(方法)

注册事件的方式

<!-- 注册事件的两种方式 -->
		<script type="text/javascript">
			function sayhello(){
				alert("say hello");
			}
		</script>
		
		
		<input type="button" value="提交" onclick = "sayhello()">  <!-- 注册事件的一种方式，只有当点击了按钮才会调用该函数 -->
		
		<!-- 注册的第二种方式  在js代码里完成注册-->
		<input type = "button" value="提交2" id="mytest">
		<input type = "button" value="提交3" id="mytest1">
		<script type="text/javascript">
			function doSome(){
				alert("mytest....");
			}
			
			var mybutton = document.getElementById("mytest");//通过这样获取到button对象
			mybutton.onclick = doSome;//往按钮的onclick属性里写入单击后要调用的方法,注意这样是错误的写法mybutton.onclick = doSome();
			
			var mybutton2 = document.getElementById("mytest1");
			mybutton2.onclick = function doOther(){
				alert("gogogo.."); //匿名函数使用的方法,对比Java中的匿名内部类
			}
			
		</script>

代码执行的顺序
load，加载完毕事件，window.onload,当窗口全部加载完毕后执行,

<body>
		<script type = "text/javascript">
			window.onload = function(){	 //这个function回调函数在页面加载完毕之后执行
				document.getElementById("mybtn").onclick = function(){ //这个function回调函数在鼠标点击按钮之后执行
					alert("wen");
				}
			}
		</script>
		<input type = "button" value = "提交2" id = "mybtn">
	</body>


<body onload="doSome()">
		<script type="text/javascript" >
			function doSome(){
				document.getElementById("mybtn").onclick=doSome;
				alert("this is a test progrmar");
			}
			
			
		</script>
		<input type = "button" value="提交" id = "mybtn">
	</body>

设置节点的属性，只要是节点的属性，都可以通过变量名加一个点获得

<script type="text/javascript">
			window.onload = function(){ 
				document.getElementById("mybtn").onclick = function(){
					var btn = document.getElementById("mytext")
					btn.type = "checkbox";
				}
			}
		</script>
		<input type="text" id="mytext">
		<input type="button" value="点击" id="mybtn">

JS代码捕捉回车键
回车键的键值是13
ESC键的键值是27

以下是捕获回车键

<script type="text/javascript">
			window.onload = function(){
				var text = document.getElementById("mytext");
				text.onkeydown = function(a){  //即使在onclick中,也会发生传参这个行为,但是在click事件中不必要去接收这个数据,但是在捕获键值这个事件中,我们需要知道输入的键值，这里的a传进来的就是一个事件对象
					//所以要加入一个形参,用来捕获键值
					//alert(a);//[object KeyboardEvent] 当发生了按键这个动作后，浏览器会创建一个键值事件对象（KeyboardEvent），可以看到是一个对象
					//对于键盘事件对(KeyboardEvent)来说,都有一keyCode来获取其键值
					if(a.keyCode == 13){
						alert("登陆")
					}
				}
			}
		</script>
		<input type="text" id="mytext">

JS中的运算符
JS中的运算符有特别多，和Java中的类似
特别讲解void
注意：void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果
应用举例：

<!-- 这里只有写成这样才代表不返回任何东西，程序不发生跳转 -->
		<a href="javascript:void(0)" onclick="window.alert("test code")">点击该链接但是不跳转页面</a>

JS中的控制语句
类似于java的控制语句
if
while
switch
for
do…while…
break
continue

JS中特殊的控制语句（了解）：
for …in…
with…

<script type="text/javascript">
		//创建JS数组,数组里面的数据类型任意
		var arr = [2,undefined,false,6]; //JS中的数组元素的类型随意,个数随意
		
		/* for(var i=0;i<arr.length;i++){
			alert(arr[i]);
		} */
		for(i in arr){  //这里输出的i代表的是,数组的下标
			alert(i); //输出的是数组下标
		}
		
		User = function(username,password){
			this.name = name;
			this.password = password;
		}
		
		var user = new User("wh","231");
		
		for(var ShuXingMing in user)
		{//这里遍历之后,存放的是属性名
			alert(ShuXingMing);
		}
		
		with(user){
			alert(username+":"+password);//会在前面自动加上user.
		}
		</script>

wenshao007

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
(JS)JS中的事件

1.JS中常用的事件 blur失去焦点 focus获得焦点 click鼠标单击 dbclick鼠标双击jianp keydown键盘按下 keyup键盘弹起 mousedown鼠标按下 mouseover鼠标经过 mousemove鼠标移动 mouseout鼠标离开 mouseup鼠标弹起 reset表单重置 submit表单提交 change下拉列表选...
复制链接

扫一扫

专栏目录