java 按钮添加事件 javaweb按钮事件

转载

mob6454cc6e409f 2023-07-19 00:51:29

文章标签 java 按钮添加事件 html5 HTML html javascript 文章分类 Java 后端开发

js事件

onclick单击事件：单击事件–鼠标左键点击一次
可以使用的元素:(按钮/div …)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function show(a){
			// alert('点击');
			alert(a);
		}
	</script>
	<body>
		<!-- onclick
		 步骤：
		 1）事件源：button
		 2）事件源添加事件：添加单机事件：οnclick=函数名()
		 3）事件处理结果：需要函数去处理
		 	 
		 -->
		<input type="button" value="按钮1" onclick="show(this.value)" />
		<input type="button" value="按钮2" onclick="show(this.value)" />
	</body>
</html>

onchange事件：当内容标签发生变化的时候，产生的事件
可以使用的元素: select text textarea

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function show(a){
			console.log(a)
		}
	</script>
	<body>
		<select onchange="show(this.value)">
			<option value="1" >1</option>
			<option value="2">2</option>
			<option value="3">3</option>
			<option value="4">4</option>
			<option value="5">5</option>
		</select>
	</body>
</html>

onfocus事件：当鼠标获取焦点的时候，产生的事件
文本框来说，当点击了文本框，产生了光标，就叫获得焦点
onblur事件：当鼠标失去焦点时，产生的事件
获取标签对象
使用document对象：document.getElementById()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function show(){
			var s1=document.getElementById("name").value;
			var s2=document.getElementById("pwd").value;
			console.log(s1+ " "+s2)
		}
	</script>
	<body>
		用户名：<input type="text"  id="name"  />
		密  码：<input type="text"  id="pwd"  />
		 
		<input type="button" value="按钮1" onclick="show()" />
		
	</body>
</html>

密码是否一致

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function show(){
			var s1=document.getElementById("pwd1").value;
			var s2=document.getElementById("pwd2").value;
			// console.log(s1=="");
			if(s1==""||s2==""){
				document.write("密码不能为空");
				
				
			}else if(s1==s2){
				
				document.write("成功");
			}else if(s1!=s2){
				
				document.write("不一致");
			}else{
				
				document.write("其他错误");
			}
			
		}
	</script>
	<body>
		密码1：<input type="text"  id="pwd1"  />
		密码2：<input type="text"  id="pwd2"  />
		 
		<input type="button" value="按钮1" onclick="show()" />
		
	</body>
</html>

BOM（broswer object model:浏览器对象模型）

研究的是window对象–他是浏览器窗口的顶级对象

当你一打开浏览器的时候，就自动创建出来了window对象。(内置)

在其下有多个子对象，常用如下图：

java 按钮添加事件 javaweb按钮事件_html

Windows对象的子对象：

history：history对象包含用户（在浏览器窗口中）访问过的Url
location:获取浏览器的地址栏信息
document：文档对象
BOM之location对象：（重点）
window.location :获取浏览器的地址栏信息，使用地址栏的URL地址，进行网页面跳转。
属性href:跳转到某个地址

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		function jump(){
			location.href="http://www.baidu.com";
		}
		
		</script>
	</head>
	<body>
		<input type="button" onclick="jump()" />
	</body>
</html>

window.confirm()

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="button" value="删除" onclick="del()" />
	</body>
	<script type="text/javascript">
		function del(){
			confirm("确定要删？");
			//返回布尔类型的值
		}
	</script>
</html>

window.propmpt():让用户输入（参数1，提示内容，参数二，默认输入内容），返回值是输入的内容
window.open():打开一个新窗口
定时器: setlnterval

表示每隔多少毫秒(1=1000)，执行一次函数。语法:
 setInterva1(函数名,时间);l/setInterva1(show ,1000);
 setInterva1(“函数名(”,时间);l /setInterva1(“showC”,1000);

停止定时器: clearlnterval
语法:
clearInterva1(定时器的返回估)
定时器: setTimeout
隔多少亳秒，执行唯一的一次函数。(只执行一次函数)用法跟setinterval是完全一样的

字符串转换为数字

java 按钮添加事件 javaweb按钮事件_javascript_02

DOM（Document object model）

只要是网页中的元素，都会被浏览器解析成一个个对象，这些对象叫做DOM
DOM的作用是什么?
对HTML元素进行查找、添加、移动、改变或移除。
HTML文档的每个节点都是对象，都具备属性、方法和事件

获取DOM对象(重点)

在document中，给我们提供了一系列的方法。

1.document.getElementByld();//根据id获取文档对象～一个单一对象(不是数组)
 2.document.getElementsByClasmsName(“class属性名”";//根据class名称获取文档对象(数组形式)
 3.document.getElementsByTagName"“标签名”";//根据标签名获取文档对象(数组形式)
 4.document.getElementsByName(“Tname属性名”");//根据name属性获取文档对象(数组形式)，有name属性的标签才能