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;
             650px;
            height: 120px;
            margin: 3px;
        }
        #panel{
            border:solid #fff 1px;
            650px;
            height: 120px;
            margin: 3px;
        }
        #send{
        background-color:#eee;border:solid #eee 1px;
         650px;
        height: 30px;
        margin: 3px;
        }
        #container div,#panel div{
            background-color: dodgerblue;
            margin:2px;
            padding:10px;
             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()