DOM事件总结

1.事件处理

    <input type="text" onclick="console.log(this.value)">
    <input type="text" onclick="console.log(value)">
    <input type="text" onclick="console.log(event.type)">

    <!--表单, 表单内事件处理程序扩展了表单的作用域-->
    <form action="">
        <input type="text" name="username">
        <input type="text" onclick="console.log(username.value)">
    </form>

    <div id="outer">
        <div id="inner">
            <div id="box">click here!</div>
        </div>
    </div>

        // 表单内事件处理程序
        function formHandle() {
            with (document){
                with (this.form){
                    with (this){
                        // handle ..
                    }
                }
            }
        }
        // try
        function hasTry() {
            try{
                // ..
            } catch (err){
                // ..
            }
        }

        var outerBox = document.getElementById("outer"),
            innerBox = document.getElementById("inner"),
            box = document.getElementById("box");
        function showId(event) {
            console.log(this.id + "--" + event.eventPhase);
            console.log(event.target);  // 事件的目标
            console.log(event.type);  // 事件的类型
//            event.stopPropagation();  // 阻止事件冒泡
            // removeEventListener()参数要与绑定监听函数完全对应才能解除监听
            if(this.removeEventListener){
//                this.removeEventListener("click", showId, false);
                event.currentTarget.removeEventListener("click", showId, false); // 作用相当
            }else if(this.detachEvent){
                this.detachEvent("onclick", showId);
            }
        }
        // addEventListener()接受三个参数：事件、处理函数、boolean
        // boolean值为true时，则在事件捕获时调用程序，false时在事件冒泡时调用程序，默认为false
        // 在事件捕获触发, outer  inner  box
//        box.addEventListener("click", showId, true);
//        outerBox.addEventListener("click", showId, true);
//        innerBox.addEventListener("click", showId, true);
        // 在事件冒泡触发, box  inner  outer
        if(box.addEventListener){
            box.addEventListener("click", showId, false);
            outerBox.addEventListener("click", showId, false);
            innerBox.addEventListener("click", showId, false);
        }
        // IE浏览器不支持addEventListener和removeEventListener函数
        // 替代的是 attachEvent和detachEvent，只接受前两个参数，只支持事件冒泡
        // 注意 "onclick"
        else if(box.attachEvent){
            box.attachEvent("onclick", showId);
            outerBox.attachEvent("onclick", showId);
            innerBox.attachEvent("onclick", showId);
        }

        // 使用绑定监听函数，则函数作用域为绑定的元素对象
        // 使用DOM0（事件赋值）,函数的作用域通常为全局作用域

2.UI事件

    <img src="https://ss3.bdstatic.com/lPoZeXSm1A5BphGlnYG/skin/2.jpg?2" id="img" width="500" height="300">
    <a href="https://www.baidu.com">百度</a>
    <br>
    <hr>
    <label for="user">user:</label><input type="text" name="user" id="user">
    <hr>
    <div id="box" style="width: 400px;background-color: orange">
        <label for="person">person:</label><input type="text" name="person" id="person">
    </div>

        // load, img  script  link...
        var img = document.getElementById("img");
        img.addEventListener("load", function (e) {
            console.log("img is loded!src is " + e.target.src);
        })
        // resize
        window.addEventListener("resize", handler);
        // scroll
        window.addEventListener("scroll", handler);

        var userInp = document.getElementById("user");
        var personInp = document.getElementById("person");
        var box = document.getElementById("box");
        // foucsin，支持冒泡
        // focus，不支持事件冒泡
        box.addEventListener("focusin", handler);  // 点击input打印
        box.addEventListener("focus", handler);  // 点击input不打印
        // foucsout，支持冒泡
        // blur，不支持事件冒泡
        // 用到了 事件委托，利用事件冒泡将统一类型的事件放在外层元素统一管理
        box.addEventListener("focusout", handler);  // 点击input打印
        box.addEventListener("blur", handler);  // 点击input不打印

        userInp.addEventListener("focus", handler);  // focus!
        userInp.addEventListener("blur", handler);  // blur!

        function handler(event) {
            switch (event.type){
                case "resize":
                    console.log(this.innerWidth + "--" + this.innerHeight);
                    break;
                case "scroll":{
                    if(document.compatMode === "CSS1Compat"){ // 标准模式
                        console.log("level top " + document.documentElement.scrollTop);
                    }else{
                        console.log("level top " + document.body.scrollTop);
                    }
                    break;
                }
                case "focusin":
                    console.log(event.target.tagName + " focusin");
                    break;
                case "focus":
                    console.log("focus");
                    break;
                case "focusout":
                    console.log(event.target.tagName + " focusout");
                    break;
                case "blur":
                    console.log("blur");
                    break;
            }
        }

3.鼠标滚轮

    <div id="box1" style="width: 300px;height: 300px;border: 1px solid #000"></div>
    <div id="box2" style="width: 300px;height: 300px;background-color: aqua"></div>
    <div id="box3" style="width: 300px;height: 300px;background-color: red"></div>

        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");
        // click
        box1.addEventListener("click", handler);
        //dbclick
        box2.addEventListener("dblclick", handler);
        // mousedown
        box3.addEventListener("mousedown", handler);
        // mouseup
        box3.addEventListener("mouseup", handler);
        // mouseenter
        box1.addEventListener("mouseenter", handler);
        // mouselevel
        box1.addEventListener("mouseleave", handler);
        // mouseover
        box1.addEventListener("mouseover", handler);
        // mousemove
//        box2.addEventListener("mousemove", handler)
        // 鼠标位置
        box3.addEventListener("click", function (e) {
            console.log("鼠标在视口位置： " + e.clientX + "--" + e.clientY);
            console.log("鼠标在页面位置: " + e.pageX + "--" + e.pageY);
            console.log("鼠标在屏幕位置：" + e.screenX + "--" + e.screenY);
        })

        function handler(event) {
            switch (event.type){
                case "click":
                   console.log("click!");
                   break;
                case "dblclick":
                    console.log("dblclick!");
                    break;
                case "mousedown":
                    console.log("mousedown!");
                    break;
                case "mouseup":
                    console.log("mouseup!");
                    break;
                case "mouseenter":
                    console.log("mouseenter!");
                    break;
                case "mouseleave":
                    console.log("mouseleave!");
                    break;
                case "mouseover":
                    console.log("mouseover!");
                    console.log("相关元素：" + event.relatedTarget.id);
                    break;
                case "mousemove":
                    console.log("mousemove! " + event.clientX);
                    break;
            }
        }

4.键盘和文件事件

        var inp = document.getElementById("inp");
        // keydown
        inp.addEventListener("keyup", function (e) {
            console.log(event.keyCode);
            switch (e.keyCode){
                case 187:
                    console.log("按下了 = ，解除绑定");
                    e.target.removeEventListener("keyup", arguments.callee);
            }
        })
        // keyup

        //textInput
        inp.addEventListener("textInput", function (e) {
            console.log("当前输入内容：" + e.data);
            console.log("内容：" + this.value);
        })