70 详解1

00 事件Event

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title> 
        <script>
            /*
            课程大纲
                1、事件基础

                2、事件处理函数

                3、事件对象

                4、事件默认行为及阻止方式

                5、Dom2级事件处理程序

                6、事件委托机制
            */

            /*
                JavaScript事件是由访问Web页面的用户引起的一系列操作。
                当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。


                JavaScript可处理的事件类型为：鼠标事件、键盘事件、HTML事件
                所有的事件处理函数都会有两个部分组成，on + 事件名称
            */
        </script>
    </head>
    <body>
        
</body>
</html>

01 触发事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test">aaa</div>

        <script>
            var oDiv = document.getElementById("test")
            /*
                点击事件
            */
            oDiv.onclick = function(){
                alert(this.innerText)
            }


            /*
                鼠标移入事件            onmouseover （鼠标移入时触发）
            */
            oDiv.onmouseover = function(){
                alert(this.innerText)
            }


            /*
                onclick包含了 
                    mousedown事件和mouseup事件
                        mousedown（鼠标按下时触发）
                        mouseup（鼠标松开时触发）

                console.log
                    在控制台显示开发内容
            */
            oDiv.onmousedown = function(){
                console.log("mousedown")
            }
            oDiv.onmouseup = function(){
                console.log("mouseup")
            }
            oDiv.onclick = function(){
                console.log("onclick")
            }
        </script>
    </body>
</html>

02 html事件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <form action="">
            <input type="text">
            <input type="submit" value="提交">
        </form>
        <script>
            var oForm = document.getElementsByTagName("form")[0]
            var oInput = document.getElementsByTagName("input")


            oForm.onsubmit = function(){
                console.log("sumbit")
                return false
            }
            oInput[0].onfocus = function(){         //onfocus   得到焦点（当光标在规定位置时触发）
                console.log("aaa")
            }
            oInput[0].onblur = function(){          //onblur    失去焦点（当光标移出规定位置时触发）1
                console.log("blur")
            }
            oInput[0].onchange = function(){        //onchange  内容改变的同时失去焦点（触发
                console.log("change")
            }
            oInput[0].oninput = function(){         //oninput   内容改变（当内容改变的时候触发）
                console.log("input")
            }
        </script>
    </body>
</html>

03 事件对象

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /*
                事件对象
                    当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。
                    包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。

                    通过事件绑定的执行函数是可以得到一个隐藏参数的。
                    说明，浏览器会自动分配一个参数，这个参数其实就是event对象。

                Event对象的获取方式
                e.clientX, e.clientY, e.pageX, e.pageY, e.offsetX, e.offsetY
            */
        </script>


         <style>
            div{
                width: 200px;
                height: 200px;
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div id="test">aaa</div>

        <script>
            var oDiv = document.getElementById("test")
            oDiv.onclick = function(e){         //用e 或 event来获取事件对象   
                console.log(e)              //（IE浏览器不适用）
                console.log(window.event)       //IE浏览器可用


                var evt = e || event
                console.log(evt)        //浏览器都适配
            }
        </script>
    </body>
</html>