Event事件详解

　　首先提到event，先要明白event的产生，也要先明白焦点，什么是焦点。焦点 : 使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入。

我们可以通过一些方式给元素设置焦点。而并不是所有元素都能够接收焦点的，能够响应用户操作的元素才有焦点。例如：

<input type="text" />   <a href="http://www.baidu.com">百度</a>

　　说到input，平时用的较多的是onfocus : 当元素获取到焦点的时候触发，onblur : 当元素失去焦点的时候触发。当然还有是不常用：obj.select() -选择指定元素里面的文本内容。

　　

//点击btn时，选中text中的内容

oBtn.onclick = function() {

    oText.select();

}

　　接下来才是event : 事件对象 , 当一个事件发生的时候，和当前这个对象发生的这个事件有关的一些详细的信息都会被临时保存到一个指定地方-event对象，供我们在需要的调用。而刚刚说的，event会保存相关信息，比如说用来鼠标位置、键盘按键。Event对象的兼容：ev = ev || window.event。而接踵而来的就有clientX[Y] ，它是--当一个事件发生的时候，鼠标到页面可视区的距离。我们可以通过一段代码查看event对象中的属性。

function fn1(ev) {

    var ev = ev || event;
    for ( var attr in ev ) {
        console.log( attr + ' = ' + ev[attr] );
    }

}
document.onclick = fn1;    

　

　event对象的所有相关属性，都会打印在控制台上。

　　而由event延伸出来的一个小Demo，就是可以随鼠标任意移动的div。

　　详见：随鼠标任意移动的div

　　代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height:100px; background: red; position: absolute;}
</style>
<script>
window.onload = function() {

    //onmousemove : 当鼠标在一个元素上面移动的触发
    //触发频率不是像素，而是间隔时间，在一个指定时间内（很短），如果鼠标的位置和上一次的位置发生了变化，那么就会触发一次

    var i = ;

    var oDiv = document.getElementById('div1');

    document.onmousemove = function(ev) {
        //document.title = i++;

        var ev = ev || event;

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        oDiv.style.left = ev.clientX + 'px';
        oDiv.style.top = ev.clientY + scrollTop + 'px';

    }

}
</script>
</head>

<body style="height: 2000px;">
    <div id="div1"></div>
</body>
</html>

　　

提到事件，一定会想到事件冒泡 : 当一个元素接收到事件的时候，会把他接收到的所有传播给他的父级，一直到顶层window.事件冒泡机制。而阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 比较简单一个就是模拟的下拉列表。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');

    oBtn.onclick = function(ev) {
        var ev = ev || event;
        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡
        oDiv.style.display = 'block';
    }

    document.onclick = function() {
        oDiv.style.display = 'none';
    }

}
</script>
</head>

<body>
    <input type="button" value="按钮" id="btn" />
    <div id="div1"></div>
</body>
</html>