DOM事件

JavaScript与HTML之间的交互式通过事件实现的
DOM事件包括：
鼠标事件、键盘事件、框架/对象事件、表单事件、剪贴板事件、打印事件、拖动事件、多媒体事件、动画事件、过渡事件、其他事件。
我们用的较多的事件就是：鼠标事件、键盘事件、框架/对象事件和表单事件。

1.鼠标事件

onclick   //当用户点击某个对象时调用的事件句柄。
onfocus   //获取焦点
onblur    // 遗失焦点
onmouseover  //鼠标移到某元素之上触发
onmouseout  //鼠标从某元素移开触发
onload      //页面加载时触发
onchange    //域的内容改变时发生
onsubmit   //表单中的确认按钮被点击时发生
//有事件一定有对应一个处理结果，用函数表示
onresize//浏览器的尺寸发生改变
onscroll //窗口滚动
onchange事件支持的标签input,select,textarea

1.1获取焦点,遗失焦点

onfocus//  获取焦点
onblur  // 遗失焦点

<input id="app" type="text">
    <script>
        /* 
        onfocus  获取焦点
        onblur   遗失焦点
         */
       var app = document.getElementById("app");
       app.onfocus = function(){
           this.style.backgroundColor = "red"
       }
       app.onblur =  function(){
           this.style.backgroundColor = "yellow"
       }
    </script>

1.2 onmouseover 和 onmouseout

 onmouseover  //鼠标悬停在元素上的时候触发
 onmouseout  //鼠标移开的时候触发

  <p id="p">hello world</p>
    <script>
        /* 
        mouseover  鼠标悬停在元素上的时候触发
        mouseout  鼠标移开的时候触发
         */
        var p =  document.getElementById("p");
        p.onmouseover = function(){
            this.style.background = "red" //鼠标停留为红色
        }
        p.onmouseout =  function(){
            this.style.background = "green"//鼠标移开为绿色
        }
    </script>

1.3 onload : 页面加载完触发

<p id="p">hello</p>
/* 页面加载完毕之后才会触发 */
window.onload = function () {
    var p = document.getElementById("p");
    p.onclick = function () {
        console.log("hello world")
    }
}

1.4 onsubmit :表单中的确认按钮被点击时发生

 <form id="form"  onsubmit="alert(1)"  >
        <p>
            用户名: <input type="text" name="user">
        </p>
        <p>
            密码: <input type="password" name="pwd">
        </p>
        <input type="submit" id="input">
    </form>

2.键盘事件

onkeydown:用户按下一个键盘按键时发生
onkeypress:在键盘按键按下并释放一个键时发生
onkeyup:在键盘按键松开时发生
keyCode:返回onkeypress，onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

2.1 onkeydown

 <p>还可以输入<em id="em" style="color:red">0</em>/30</p>
    <textarea  id="txt" cols="30" rows="10"></textarea>
    <script>
        var txt =  document.getElementById("txt");
        var em =  document.getElementById("em")
        txt.onkeydown = function(){
            var length = this.value.length;
            if(length<=30){
                em.innerHTML =  this.value.length;
            }else{
                alert("只能输入30个字符")
            }
        }
    </script>

2.2 onkeypress , onkeyup

<input type="text" id = "input">
    <script>
        /* 
        event.key  获取按下键盘对于的值
        event.keyCode  13回车
        R  82
         */
        var input  = document.getElementById("input");
        input.onkeydown = function(event){
            console.log(event.keyCode)
            if(event.keyCode == 82){
                console.log("放下")
            }
        }
        input.onkeypress =  function(){
            console.log("press")
        }
        input.onkeyup = function(){
            console.log("放开")
        }
    </script>

3.内联事件

 <button id="btn"  data-aid="123456" onclick="go(event)">btn</button>
    <script>
        /* 
        定义data-aid="123456"
        获取自定义属性值 event.target.dataset.aid 
        */
        function go(event){
            console.log("hello world");
            console.log(event.target.dataset.aid)
        }
    </script>