javascript中的事件处理
1.常用的事件
1) 页面初始化事件 onload
2) 按钮点击事件 onclick
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
<script>
function testLoad(){
alert("页面初始化事件");
}
</script>
-->
<!--
<script>
window.οnlοad=function(){
alert("页面初始化事件");
}
</script>
-->
<!--
<script>
function testclick(){
alert("按钮单击事件");
}
</script>
-->
<script>
//当页面打开的时候得到按钮的dom对象
window.οnlοad=function(){
//得到按钮的dom对象
var butobj=document.getElementById("but1");
butobj.onlick=function(){
alert("按钮单击事件");
}
//得到文本框对应的dom对象
var textObj=document.getElementById("text1");
textObj.οnchange=function(){
alert("文本框内容改变事件");
}
}
</script>
</head>
<!--body οnlοad="testLoad();">-->
<body>
<input type="button" id="but1" value="测试按钮点击事件" οnclick="testclick();"><br>
<input type="text" id="text1" value="测试onchange事件">
</body>
</html>
3.onchange 事件，当用户改变输入字段的内容时触发
4) onfocus当获得焦点时触发
5)onblur当失去焦点时触发
6) onmouseover 和 onmouseout 事件
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img{
width: 200px;
height: 200px;
border: solid 1px red;
}
</style>
<!--
<script>
function testchange(){
alert("文本框内容改变事件")
}
</script>
-->
<!--
<script>
function testjujiao(){
alert("聚焦事件");
}
function testshijiao(){
alert("失焦事件");
}
</script>
-->
<script>
//当页面打开的时候
window.οnlοad=function(){
//得到文本框对应的dom对象
var textObj1=document.getElementById("text1");
textObj1.οnchange=function(){
alert("文本框内容改变事件")
}
//得到文本框对应的dom对象
var textObj2=document.getElementById("text2");
textObj2.οnfοcus=function(){
textObj2.value="";
}
textObj2.οnblur=function(){
var textvalue=textObj2.value
alert("文本框=="+textvalue);
}
//得到div对应的dom对象
var divObj=document.getElementById("div1");
divObj.οnmοuseοver=function(){
divObj.style.width="100px";
divObj.style.height="100px";
}
divObj.οnmοuseοut=function(){
divObj.style.width="200px";
divObj.style.height="200px";
}
}
</script>
</head>
<body>
<input type="text" id="text1" value="测试onchange事件" οnclick="testchange();"><br>
<input type="text" value="测试聚焦/失焦事件" οnfοcus="testjujiao();" οnblur="testshijiao();">
<input type="text" id="text2" value="测试聚焦/失焦事件"><br>
<img id="div1" src="imgs/avatar2.png"> </img><br>
</body>
</html>
7) onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
注意: 1.设置在form表单上
2.提交表单数据的按钮一定是type="submit"
3.οnsubmit="return 事件处理函数();"
4.对应的事件处理函数一定有返回值，且返回值是boolean值
true---提交表单数据到后端处理程序
false-----不提交表单数据到后端处理程序
8) onkeydown 事件会在用户按下一个键盘按键时发生。
注意:onkeydown在设置的时候通常设置给body,对应处理函数要有event参数
参数event---键盘对象
event对象.keyCode----得到键盘按键的数字值
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function testsubmit(){
//得到输入用户名的文本框对象
var testObj=document.getElementById("text1");
var username=testObj.value;
if(username==""){
alert("=用户名不能为空");
return false;
}else{
return true;testkeydown
}
}
function testkeydown(event){
//得到键盘按钮的数字值
var numcode=event.keyCode;
if(numcode==38){
alert("向上移动");
}
if(numcode==39){
alert("向右移动");
}
if(numcode==40){
alert("向下移动");
}
if(numcode==37){
alert("向左移动");
}
if(numcode==32){
alert("空格/暂停游戏");
}
}
</script>
</head>
<body οnkeydοwn="testkeydown(event);">
<form action="login" method="get" οnsubmit="return testsubmit();" >
<input type="text" id="text1" name="username" value="用户名"><br>
<input type="submit" id="but1" value="提交表单数据">
</form>
</body>
</html>
2.事件的设置方式
1.在html元素标记中设置事件，在script中处理事件
2.在script标记中通过html元素的dom对象设置/处理事件
JavaScript中的BOM对象
BOM---浏览器对象模型--Browser Object Model
主要就是window对象
1.常见属性
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
//得到浏览器窗口的宽度
var w=document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth;
var h=document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight;
alert(w+"X"+h);
}
</script>
</head>
<body>
<h3>
1.常见属性
获取浏览器窗口的大小【宽高 不包括工具栏和滚动条】<br>
对于 Internet Explorer 8、7、6、5<br>
document.documentElement.clientHeight<br>
document.documentElement.clientWidth<br>
或者<br>
document.body.clientHeight<br>
document.body.clientWidth<br>
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:<br>
window.innerHeight - 浏览器窗口的内部高度<br>
window.innerWidth - 浏览器窗口的内部宽度<br>
</h3>
</body>
</html>
2.常见方法
打开/关闭窗口
window.open(URL,name,features,replace)
URL:一个可选的字符串，声明了要在新窗口中显示的文档的 URL
“about:blank”空白窗口
name:一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。
features:一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数,新窗口将具有所有标准特征。
replace:一个可选的布尔值。规定了装载到窗口的 URL 是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。支持下面的值：
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
close() 方法用于关闭浏览器窗口。
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
var butobj=document.getElementById("but1");
var butobj2=document.getElementById("but2");
butobj.οnclick=function(){
var url="http://www.baidu.com";
var name="testopen";
var features="width=500px,height=500px";
window.open(url,name,features,true);
}
butobj2.οnclick=function(){
window.close();
}
}
</script>
</head>
<body>
<h3>
2.常见方法
打开/关闭窗口
打开窗口
window.open(URL,name,features,replace)<br>
URL---新窗口中显示的文档的 URL<br>
name--新窗口的名称。这个名称可以用作标记a和form的属性target的值。<br>
features---新窗口要显示的标准浏览器的特征。<br>
replace ---设置是否添加历史访问记录支持下面的值：<br>
true - URL 替换浏览历史中的当前条目。<br>
false - URL 在浏览历史中创建新的条目。<br>
</h3>
<input type="button" id="but1" value="打开新窗口open">
<h3>
关闭窗口
window.close() 方法用于关闭浏览器窗口。<br>
<input type="button" id="but2" value="关闭当前浏览器窗口close">
</h3>
</body>
</html>
弹出框
警告框:window.alert("sometext");
确认框:window.confirm("sometext");
提示框:window.prompt("sometext","defaultvalue");
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
var butobj=document.getElementById("but1");
butobj.οnclick=function(){
// window.alert("警告框");
alert("警告框");
}
var butobj2=document.getElementById("but2");
butobj2.οnclick=function(){
var flag=window.confirm("确定要退出吗？");
if (flag){
window.close();
}
}
var butobj3=document.getElementById("but3");
butobj3.οnclick=function(){
var age=window.prompt("请输入年龄","18");
if (age==null || age.length==0 ){
window.alert("年龄不能为空");
}else{
var flag=window.isNaN(age);
if(!false){
if(age>=18){
alert("成年人");
}else{
alert("未成年人");
}
}
}
}
}
</script>
</head>
<body>
<h3>警告框:window.alert("sometext")</h3>
<input type="button" id="but1" value="测试警告框">
<h3>
确认框:window.confirm("sometext");<br>
当你点击"确认",确认框返回ture<br>
当你点击"取消",确认框返回false<br>
</h3>
<input type="button" id="but2" value="测试确认框">
<h3>
提示框:window.prompt("sometext","defaultvalue");<br>
"sometext"--设置提示内容<br>
"defaultvalue"--提示输入内容的默认值<br>
当你点击"确认",得到提示框中的输入值<br>
当你点击"取消",那么返回的值位null.<br>
</h3>
<input type="button" id="but3" value="测试提示框">
</body>
</html>
3.常见子对象
screen--屏幕
1.总宽度和总高度 --- screen.width / screen.height<br>
2.可用宽度和可用高度----screen.availWidth / screen.availHeight<br>
3.色彩深度----screen.colorDepth<br>
4.色彩分辨率----screen.pixelDepth
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
var butobj1= document.getElementById("but1");
butobj1.οnclick=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>
</head>
<body>
<h3>
window.screen 对象包含有关用户屏幕的信息<br>
1.总宽度和总高度 --- screen.width / screen.height<br>
2.可用宽度和可用高度----screen.availWidth / screen.availHeight<br>
3.色彩深度----screen.colorDepth<br>
4.色彩分辨率----screen.pixelDepth
</h3>
<input type="button" id="but1" value="测试screen对象">
</body>
</html>
location---页面的地址 (URL)
location.href 属性返回当前页面的 URL。
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=function(){
var mynameObj= document.getElementById("myname");
var mypassObj= document.getElementById("mypass");
var butObj= document.getElementById("but1");
butObj.οnclick=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>
</head>
<body>
<h3>
location---页面的地址 (URL)<br>
location.href 属性返回当前页面的 URL。<br>
location.search 属性是一个可读可写的字符串，可设置或返回当前 URL 的查询部分（问号 ? 之后的部分）<br>
</h3>
<input type="text" name="username" id="myname" value="请输入用户名"><br>
<input type="password" name="password" id="mypass"><br>
<input type="button" value="登录" id="but1">
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
window.οnlοad=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>
</head>
<body>
<h1></h1>
</body>
</html>
history---历史对象
history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
navigator--浏览器的信息 [了解]
window.navigator 对象包含有关访问者浏览器的信息。
<script>
document.write("<h1>浏览器代号:"+window.navigator.appCodeName+"</h1>");
document.write("<h1>浏览器名称:"+window.navigator.appName+"</h1>");
document.write("<h1>浏览器版本:"+window.navigator.appVersion+"</h1>");
document.write("<h1>启用Cookies:"+window.navigator.cookieEnabled+"</h1>");
document.write("<h1>硬件平台:"+window.navigator.platform+"</h1>");
document.write("<h1>用户代理:"+window.navigator.userAgent+"</h1>");
document.write("<h1>用户代理语言:"+window.navigator.systemLanguage+"</h1>");
</script>
