3、JS函数与DOM事件
js函数是用function关键字定义，由函数名、参数列表和
函数体构成的代码
分类：自定义函数、内建函数
自定义函数语法:定义函数不会执行函数内容，需要调用函数
function 函数名([参数列表]){
函数体
[return 数据]
}
调用函数： 函数名([参数值列表])
内建函数是JavaScript已经封装好的自带函数
警告框： alert()
确认框： confirm("确认信息") 有两个按钮，一个取消，一个确认，点了取消返回false,点了确认返回true
提示框： prompt(参数[,参数]) 第一个参数代表提示信息，第二参数代表提示信息的默认值，有两个按钮，一个取消，一个确认，点了取消返回null,点了确认返回输入的内容
eval(): 将字符串参数作为js代码执行
DOM事件是由DOM中的事件源触发，可以引发事件响应的操作
分类:
鼠标事件、键盘事件、表单事件、页面事件
事件源： html中的元素
事件 ： 给元素绑定的操作/行为
事件处理函数 ： 给出行为
事件对象 ： event 记录事件的状态
键盘事件是由键盘操作触发的DOM事件
onkeydown ： 键盘按下事件
onkeyup : 键盘抬起事件（放开之前按下的键）
onkeypress : 按下并抬起事件（系统键不识别）
鼠标事件是由鼠标操作触发的DOM事件
onclick事件 鼠标左键点击一下事件
ondblclick事件 鼠标左键双击事件
document常用方法
向网页写数据： document.write("数据")
通过id属性值获取一个元素： var 元素 = document.getElementById("id属性值")
通过name属性值获取元素数组： var arr = document.getElementsByName("name属性值");
通过标签名获取元素数组： var arr = document.getElementsByTagName("标签名");
获取元素（输入框、文本域、密码框、下拉框）的值 ： 元素.value
给元素（输入框、文本域、密码框、下拉框）的value赋值 ： 元素.value=值
如果是span、p、div等 通过"元素.textContent"获取元素的文本内容 （不包含标签）
如果是span、p、div等 通过"元素.innerHTML"获取元素的文本内容 （包含标签）
获取元素的属性值： 元素.属性名 比如获取元素的name属性值： “元素.name”
给元素的属性值赋值： 元素.属性名 = 值 比如给元素的name属性赋值 ： "元素.name=值"
p、div、span、tr、使用textContext/innerHtml，其他用value
表单事件是由表单及表单域操作触发的DOM事件
onfocus事件 获取焦点事件
onblur事件 失去焦点事件
onsubmit事件 表单提交事件
最主要的事件
键盘事件：
onkeydown、键盘按下
onkeyup、键盘抬起
onkeypress
鼠标事件：onclick 、
ondblclick 、
onmousemove 、鼠标移动
onmouseover 、鼠标移上
onmouseout
表单事件： onsubmit、onfocus、onblur、onchange（内容改变并且失去焦点）
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 9 <input type="button" value="del" onClick="del()"/> 10 <input type="button" value="click" onclick="ck()"> 11 <input type="button" value="dbclick" ondblclick="ck()"> 12 <script> 13 var string = "wang zhan gong cheng" 14 var sub = "gong cheng" 15 var index = string.indexOf(sub) 16 var subStr = string.slice(index, index+sub.length) 17 subStr = subStr.charAt(0).toUpperCase()+subStr.slice(1) 18 console.log("程序处理前："+sub) 19 console.log("程序处理后："+subStr) 20 21 var arr=["上午好","中午好","下午好","傍晚好","晚上好"] 22 var datetime = new Date(); 23 document.write("当前时间："+datetime.toLocaleString()+"<br>") 24 var h = datetime.getHours() 25 if (h>=8 && h<11){ 26 document.write(arr[0]) 27 }else if(h>=11 && h<13){ 28 document.write(arr[1]) 29 }else if(h>=13 && h<17){ 30 document.write(arr[2]) 31 }else if(h>=17 && h<19){ 32 document.write(arr[3]) 33 }else if(h>=19 && h<24){ 34 document.write(arr[4]) 35 } 36 37 长度可变 可以存储不同类型数据 38 var arr=[值列表] 39 var arr2 =new Array(5) 40 var arr3= new Array("liu","zhang","li") 41 二维数组两个维度，每个元素都是一维数组的数组 42 43 var arr=[ 44 [], 45 [], 46 ] 47 String 48 slice() 49 indexOf() 50 split() 51 for(var i in arr){} 52 将数组的每个元素以指定的分隔符组成字符串返回 53 var s=arr3.join(",") 54 arr.toString() 55 56 有参数可以一个可以两个 57 function test02(a,b){ 58 alert(a+b) 59 } 60 test02(new Date().toISOString(),"123") 61 62 //有参数有返回值 63 function test03(i,j){ 64 return i+j 65 } 66 67 var sum= test03(10,20) 68 alert(sum) 69 70 71 function del(){ 72 if (confirm("确定删除?")){ 73 alert("删除成功") 74 }else{ 75 alert("取消删除") 76 } 77 } 78 var msg=prompt("请输入姓名：","你是谁") 79 alert(msg) 80 81 function ck(){ 82 document.write(event.target+":"+event.type+"<br>") 83 document.write(event.clientX+"<br>") 84 document.write(event.clientY+"<br>") 85 document.write("<a href='test16.html'>返回</a>") 86 } 87 88 89 </script> 90 </body> 91 </html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
#container{
border:solid #fff 1px;
width: 650px;
height: 120px;
margin: 3px;
}
#panel{
border:solid #fff 1px;
width:650px;
height: 120px;
margin: 3px;
}
#send{
background-color:#eee;border:solid #eee 1px;
width: 650px;
height: 30px;
margin: 3px;
}
#container div,#panel div{
background-color: dodgerblue;
margin:2px;
padding:10px;
width: 100px;
height: 35px;
color:#fff;
float:left;
text-align: center;
}
textarea{
margin: 3px;
}
#panel div.on{position:absolute;opacity:0.5;}
</style>
</head>
<body style="background-color:#999 "><!--ondblclick="back()"-->
<input type="button" value="按钮" onclick="ck()"><br>
<textarea cols="40" rows="5" id="text1" onkeyup="fun()" ></textarea>
<span id="span1">0</span>/100<br>
<p style="color: red" id="msg"></p><br>
<div id="container" onclick="fun(event)"></div>
<div id="panel"onclick="fun(event)"></div>
<div id="send">
人员：<input type="text" id="member">
<select id="gener">
<option value="先生">男</option>
<option value="女士">女</option>
</select>
<input type="button" value="提交" style="background-color: #ccc" onclick="fun2()">
<br>
</div>
<br>
<div>
<form action="" onsubmit="fun3()">
用户名： <input type="text" id="name"><br>
密码：<input type="text" id="pass"><br>
<input type="submit" id="login">
</form>
</div><br>
<div id="container2"></div>
<div id="panel2">
<textarea
rows="9"
cols="50"
onkeydown="getKey(event)">
</textarea>
</div>
<div onclick="fun7()">
<a href="test03.html" onclick="fun7(event)">点击</a>
</div>
<script>
function ck() {
console.log("按钮上发生的事件类型：" + event.type)
}
var text1 = document.getElementById("text1");
var span1 = document.getElementById("span1");
var msg=document.getElementById("msg");
function fun() {
var len = text1.value.length;
span1.innerHTML = len
if (len >= 100) {
text1.disabled = true
document.getElementById("msg").innerHTML="[已经输入100个字符，禁止输入]"
}
}
function fun(event){
console.log(event.clientX)
console.log(event.clientY)
}
document.ondblclick=function (){
if (event.target.id !=="text1"){
text1.disabled=false;
text1.value="";
span1.innerHTML="0";
msg.innerHTML="";
}
}
function fun2(){
var input1=document.getElementById("member")
var div2=document.getElementById("panel")
var gener=document.getElementById("gener").value
if (input1.value.length===0){
alert("请输入人员信息")
}else{
div2.innerHTML+="<div name='member' onmousedown='Start(event)' onmousemove='Move(event)' onmouseup='Stop(event)' >"+gener+"</div>"
}
}
function fun3(){
var name=document.getElementById("name")
var pass=document.getElementById("pass")
if (name.value.length==0 ){
alert("账号不能为空")
}
if (pass.value.length==0) {
alert("密码不能为空")
}
}
function Stop(event){
if(163<event.clientY<283){
var obj=event.target;
obj.className="";
/* 将动被拖的div放入container */
document.getElementById("container").appendChild(obj);
}
}
function Move(event){
var obj=event.target;
obj.style.left=event.clientX-50+"px";
obj.style.top=event.clientY-30+"px";
}
function Start(event){
var obj=event.target;
obj.style.left=event.clientX-50+"px";
obj.style.top=event.clientY-30+"px";
obj.className="on";
}
function fun7(event){
alert("响应")
event.preventDefault() //阻止默认
event.stopPropagation() //停止冒泡
}
// function back(){
// var obj=event.target
// if (obj.id!=="text1"){
// document.getElementById("text1").value=""
// document.getElementById("text1").disabled=false
// document.getElementById("span1").innerHTML="0";
// document.getElementById("msg").innerHTML=""
// }
// }
function getKey(event) {
key = event.keyCode;
document.getElementById("container").innerText+=key+"-"+event.type;
}
</script>
</body>
</html>
Js事件
鼠标事件：
单击事件： onclick()
双击事件：ondblclick()
鼠标移动： onmousemove()
鼠标移上： onmouseover()
鼠标移出： onmouseout()
键盘事件：
键盘按下： onkeydown()
键盘抬起： onkeyup()
键盘按下彬=并抬起： onkeypress()
表单事件：
onsubmit()
失去焦点事件：onblur()
获取焦点事件：onfocus()
内容改变事件：onchange()
