事件对象的作用和案例

事件对象，就是在响应某些事件的处理函数内部第一个传递进来的参数。不同的事件，参数的内容也不同，我们可以根据每一个事件对象能用的功能来实现特殊的需求，下面就是几个案例。

获得鼠标坐标信息

通过事件流对象可以获取到鼠标在浏览器中得各种信息，比如坐标等，可以使用 console.log(event) 打印一下 onclick 事件都有哪些成员。

<script type="text/javascript">
    var hh = document.getElementsByTagName("h2")[0];
    hh.onclick = function (event) {
        console.log(event.clientX + "--------" + event.clientY);  // 相对DOM区域坐标
        console.log(event.pageX + "--------" + event.pageY);      // 相对DOM区域坐标（包含滚动条距离）
        console.log(event.screenX + "--------" + event.screenY);  // 相对屏幕的坐标
    }
</script>

键盘的按键监听

假设一个表单，你想即时获取用户输入的内容，那么就可以通过事件对象来实现。下面的例子当你在 input 中输入内容的时候，console.log 就会打印你按下按键的 ASCII 码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <title>js lesson</title>
    </head>
<body>
    <h2>事件对象</h2>
    <input type="text">
</body>
</html>
<script type="text/javascript">
    var put = document.getElementsByTagName("input")[0];

    put.onkeydown = function(event) {
        console.log(event);
        console.log(event.keyCode);
    }
</script>

阻止事件流产生

关于事件流的描述，请参考：http://www.mycode.net.cn/language/javascript/1224.html 如果想禁用事件流，可以通过事件对象的 stopPropagation 方法来阻止事件向下传递。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <title>js lesson</title>
        <style>
            div {
                width: 400px;
                height: 300px;
                background-color: pink;
            }
            p {
                width: 300px;
                height: 200px;
                background-color: lightsteelblue;
            }
            span {
                font-size: 22px;
                background-color: darkslategray;
                color: #FFF;
            }
        </style>
    </head>
<body>
    <h2>DOM 操作</h2>
    <div>
        <p><span>Today is Sunday</span></p>
    </div>
</body>
</html>
<script type="text/javascript">
    var sp = document.getElementsByTagName("span")[0];
    var pt = document.getElementsByTagName("p")[0];
    var dv = document.getElementsByTagName("div")[0];

    sp.addEventListener("click", function(event) {
        console.log("This is span tag");
        event.stopPropagation();
    });
    pt.addEventListener("click", function(event) {
        console.log("This is p tag");
        event.stopPropagation();
    });
    dv.addEventListener("click", function(event) {
        console.log("This is div tag");
        event.stopPropagation();
    });
</script>

阻止浏览器默认动作

在表单的 submit 按钮被点击时，有可能用户输入的信息不满足要求，如果继续提交表单，那么页面会被跳转，到后台才发现信息不对，再弹回输入页面让用户重新输入。这种情况在十年前简直就太常见了，如果你想有更好的用户体验，那么就在表单提交前就验证信息是否正确吧。这里我们就可以实现如果用户输入信息错误，那么阻止浏览器默认的提交动作并让用户重新输入。同样，主流浏览器和IE6/IE7/IE8有不同区别，主流浏览器使用 event.preventDefault();，IE6/IE7/IE8 使用 event.returnValue = false; 我们也可以直接返回一个 false 告诉浏览器提交失败了，但这只在 dom 一级事件响应函数中有效，dom 二级只能通过上面的函数实现。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <title>js lesson</title>
    </head>
<body>
    <h2>事件对象</h2>
    <form action="/register.php">
        <input type="text">
        <input id="submit" type="submit">
    </form>
</body>
</html>
<script type="text/javascript">
    var form = document.getElementsByTagName("form")[0];
    /*----------- dom 一级方式阻止默认动作 -----------*/

    // form.onsubmit = function() {
    //   console.log("提交被阻止了。")
    //   return false;
    // }

    /*----------- dom 二级方式阻止默认动作 -----------*/

    /* IE6/IE7/IE8*/
    // form.attachEvent("onsubmit", function(event) {
    //   console.log("提交被阻止了。")
    //   event.returnValue = false;
    // });

    /* 主流浏览器 */
    form.addEventListener("submit", function(event) {
        console.log("提交被阻止了。")
        event.preventDefault();
    });
</script>

Dylan's blog