这篇博客详细介绍了JavaScript中的事件处理，包括页面初始化事件onload、按钮点击事件、文本框的onfocus/onblur事件、onmouseover/onmouseout事件、表单的onsubmit事件、键盘按键的onkeydown事件、窗口操作和弹出框的使用，以及location、screen和history对象的常见属性和方法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面初始化事件 onload</title>
<script>
//function testLoad(){
//alert("页面初始化事件")
//}
/*window.onload=function(){
alert("页面初始化事件")
}*/
/*window.onload=function(){
var butobj=document.getElementById("but2");
butobj.onclick=function(){
alert("按钮点击事件2")
}
}
function testbutton(){
alert("按钮点击事件1")
}*/
/*window.onload=function(){
var textobj=document.getElementById("text1");
textobj.onchange=function(){
alert("文本框内容改变事件1")
}
}
function textchange(){
alert("文本框内容改变事件2")
}*/
window.onload = function () {
var focus = document.getElementById("text2")
focus.onfocus = function () {
// 获取焦点， 清空input内容
focus.value = "";
//console.log("聚焦事件")
}
// 失去焦点事件， 我们也写在window.onload方法中
focus.onblur = function () {
var textvalue = focus.value;
alert("文本框==" + textvalue);
}
}
function textchange(lyr){
textvalue = lyr.target.value;
alert("文本框==" + textvalue)
}
</script>
</head>
<body>
<!--<body onload="testLoad()">-->
<input type="button" id="but1" value="测试按钮点击事件" onclick="testbutton()">
<input type="button" id="but2" value="测试按钮点击事件" />
<input type="text" id="text1" value="测试onchange事件" />
<input type="text" id="text1" value="测试onchange事件" onchange="textchange()" />
<input type="text" id="text2" value="测试onfocus/onblur事件" />
<input type="text" id="text3" placeholder="写在标签执行" onblur="textchange(event)"/>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>onmouseover和onmouseout 事件</title>
<style>
div {
width: 300px;
height: 400px;
background-color: aqua;
}
</style>
<script>
window.onload=function(){
var divobj=document.getElementById("div1");
divobj.onmouseover=function(){
divobj.style.width="100px";
divobj.style.height="200px";
}
divobj.onmouseout=function(){
divobj.style.width="300px";
divobj.style.height="400px";
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
.onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
注意:1.设置在form表单上
2.提交表单数据的按钮一定是type="submit"
3.onsubmit="return 事件处理函数();"
4.对应的事件处理函数一定有返回值，且返回值是boolean值
true---提交表单数据到后端处理程序
false-----不提交表单数据到后端处理程序
function testsubmit(){
var textobj=document.getElementById("text1");
var username=textobj.value;
if(username==""){
alert("用户名不能为空！")
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form action="login" method="get" onsubmit="return testsubmit();">
<input type="text" id="text1" name="username" value="请输入用户名">
<input type="submit" id="text1" value="提交表单数据">
</form>
</body>
onkeydown 事件会在用户按下一个键盘按键时发生。
注意:onkeydown在设置的时候通常设置给body,对应处理函数要有event参数
参数event---键盘对象
event对象.keyCode----得到键盘按键的数字值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function testonkeydown(event){
var numcode=event.keyCode;
if(numcode==39){
alert("向右");
}
if(numcode==40){
alert("向下");
}
if(numcode==38){
alert("向左");
}
if(numcode==32){
alert("暂停");
}
}
</script>
</head>
<body onkeydown="testonkeydown(event);">
</body>
</html>
常见方法
打开/关闭窗口
window.open(URL,name,features,replace)
URL---一个可选的字符串，声明了要在新窗口中显示的文档的 URL
“about:blank”空白窗口
name--一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下 划线，该字符声明了新窗口的名称。
这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
features---一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数 ，新窗口将具有所有标准特征。
replace 一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条 目，还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>打开/关闭窗口</title>
<script>
window.onload=function(){
var butobj= document.getElementById("bu1");
butobj.onclick=function(){
var url="http://www.baidu.com";
var name="testopen"
var features="width=400,height=400"
window.open(url,name,features,true);
}
var butobj2= document.getElementById("bu2");
butobj2.onclick=function(){
window.close();
}
}
</script>
</head>
<body>
<input type="button" id="bu1" value="打开新窗口">
<a href="#" target="testopen">a标记</a>
<input type="button" id="bu2" value="关闭当前窗口">
</body>
</html>
弹出框
警告框:window.alert("sometext");
确认框:window.confirm("sometext");
提示框:window.prompt("sometext","defaultvalue");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出框</title>
<script>
window.onload = function () {
var textobj = document.getElementById("text1");
textobj.onclick = function () {
//window.alert("警告框");
alert("警告框")
}
var textobj2 = document.getElementById("text2");
textobj2.onclick = function () {
var flag = window.confirm("确认要退出吗?");
if (flag) {
window.close();
}
}
var textobj3 = document.getElementById("text3");
textobj3.onclick = function () {
var num1 = window.prompt("输入数字","50");
//alert(num1.length);
if (num1==null ||num1.length==0) {
window.alert("不能为空!");
}else{
var falg= window.isNaN(num1);
if(!falg){
if(60>=50){
alert("大")
}else{
alert("小")
}
}
}
}
}
</script>
</head>
<body>
<h3>警告框:window.alert("sometext");<br>
确认框:window.confirm("sometext");<br>
提示框:window.prompt("sometext","defaultvalue");<br>
</h3>
<input type="button" id="text1" value="测试警告框">
<input type="button" id="text2" value="测试确认框">
<input type="button" id="text3" value="测试提示框">
</body>
</html>
常见子对象
screen--屏幕
1.总宽度和总高度 --- screen.width / screen.height<br>
2.可用宽度和可用高度----screen.availWidth / screen.availHeight<br>
3.色彩深度----screen.colorDepth<br>
4.色彩分辨率----screen.pixelDepth
<script>
window.onload=function(){
var butobj1=document.getElementById("but1");
butobj1.onclick=function(){
var zongw=window.screen.width;
var zongh=window.screen.height;
var availw=window.screen.availWidth;
var availh=window.screen.availHeight;
var color=window.screen.colorDepth;
var pixel=window.screen.pixelDepth;
alert(zongw+"*"+zongh+";"+availw+"*"+availh+";"+color+";"+pixel); }
}
</script>
location---页面的地址 (URL)
location.href 属性返回当前页面的 URL。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）。
<input type="text" name="username" id="myname" value="请输入用户名"/><br>
<input type="password" name="password" id="mypass"/><br>
<input type="button" value="登陆" id="but1"/>
<script>
window.onload=function(){
var mynameObj=document.getElementById("myname");
var mypassobj=document.getElementById("mypass");
var butobj=document.getElementById("but1");
butobj.onclick=function(){
var name=mynameObj.value;
var pass=mypassobj.value;
if(name=="zhangsan" && pass=="123456"){
//登陆成功
//location.href 属性返回当前页面的 URL。
window.location.href="success.html?myname="+name+"&mypass="+pass;
}else{
window.location.href="window_location.html";
}
}
}
</script>
<script>
window.onload=function(){
//alert(window.location.search); //?myname=zhangsan&mypass=123456
var info=window.location.search;
var infoarray=info.split("&");
var msg=infoarray[0]; //?myname=zhangsan
var msgarray=msg.split("=");
var hobj=document.getElementsByTagName("h1")[0];
hobj.innerText=msgarray[1]+",登陆成功";
}
</script>
history---历史对象
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var butOBJ=document.getElementById("but");
butOBJ.onclick=function(){
window.history.forward();
}
}
</script>
</head>
<body>
<h1>测试history---历史对象</h1>
<h1>history.forward() - 与在浏览器中点击按钮向前相同</h1>
<a href="tow.html">打开tow.html</a>
<input type="button" id="but" value="下一个页面" />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
