event事件对象

概念：

在触发DOM上的某个事件时，会产生一个事件对象event,这个对象包含着所有事件相关的信息

获取事件对象 - event：

事件对象：标准浏览器的事件对象是事件处理函数中的一个隐藏的（第一个）参数，可以通过参数获取对象

document.onmousedown = function(ev){//鼠标按下  ev:事件对象
    console.log(ev);
    // console.log(arguments[0])
}

document.onkeydown = function(ev){//键盘按下事件
    console.log(ev);
}

老版本的IE浏览器默认自带event对象，无需再次声明.

//兼容的方式获取事件对象
document.onmousedown = function(ev){
    var ev = ev || window.event;//兼容方式获取事件对象。
}

事件类型：

1、获取焦点、失去焦点

var oInp = document.querySelector('input');
oInp.onfocus = function() {   
    console.log('获取焦点');
}

oInp.onblur = function() {
    console.log('失去焦点');
}

2、鼠标左键、右键的点击

//onclick：当用户用鼠标左键单击对象时触发
document.onclick = function() {
    console.log('鼠标左键单击了');
}

//oncontextmenu：当用户使用鼠标右键单击客户区打开上下文菜单时触发
document.oncontextmenu = function() {
    console.log('鼠标右键单击了');
}

3、键盘的按下、弹起

// onkeydown：但用户按下键盘按键时触发
document.onkeydown = function() {
    console.log('键盘按下了');
}

// onkeyup：当用户释放键盘按键时触发
document.onkeyup = function() {
    console.log('键盘按键释放了');
}

4、onload：在浏览器完成对象的装载后立即触发

window.onload = function() {
    console.log('浏览器完成了对象装载');
}

5、onmousedown：当用户用任何鼠标按钮单击对象时触发

document.onmousedown = function() {
    console.log('使用鼠标单击了对象');
}

6、onmouseup：当用户在鼠标位于对象之上时释放鼠标按钮时触发

document.onmouseup = function() {
    console.log('鼠标在对象上释放了');
}

7、onmousemove：鼠标在某个区域内进行移动

document.onmousemove = function() {
    console.log('鼠标在此区域内移动');
}

8、onmouseover：当用户将鼠标指针移动到对象内时触发

document.onmouseover = function() {
    console.log('鼠标指针移动到对象内时触发');
}

9、onmouseout：当用户将鼠标指针移出对象边界时触发

document.onmouseout = function() {
    console.log('鼠标指针移出对象边界时触发');
}

10、onresize：当对象的大小将要改变时触发

window.onresize = function() {
    console.log('对象的大小将要改变时触发');
}

11、onscroll：当用户滚动对象的滚动条时触发

window.onscroll = function() {
    console.log('用户滚动对象的滚动条时触发');
}

event属性：

    鼠标

1.标准浏览器的鼠标事件，会有一个button属性，它是一个数字，代表鼠标按键。

        0代表鼠标按下了左键  1代表按下了滚轮    2代表按下了右键

document.onmousedown = function(e) {
    var e = e || window.event;
    alert(e.button);
}

2.which属性：获取鼠标的按键和键盘的键码(键盘按键Unicode编码),低版本浏览器不支持

        1代表鼠标按下了左键  2代表按下了滚轮    3代表按下了右键

                enter -> 13        space -> 32       

document.onmousedown = function(e) {
    var e = e || window.event;
    alert(e.which);
}

document.onkeydown = function(e) {
    var e = e || window.event;
    alert(e.which);
}

3.鼠标事件中获取鼠标的位置属性

        clientX,clientY：鼠标相对于可视区的位置

document.onmousemove = function(e) {
    var e = e || window.event;
    console.log(e.clientX, e.clientY);
}

        pageX,pageY：鼠标相对于文档的位置

document.onmousemove = function(e) {
    var e = e || window.event;
    console.log(e.pageX, e.pageY);
}

        offsetX,offsetY：鼠标相对于操作元素(鼠标位置)到元素边缘(左上)的位置；鼠标相对于当前操作元素左上角的距离,和定位没有关系

document.querySelector('.box').onmousemove = function(e) {
    var e = e || window.event;
    console.log(e.offsetX, e.offsetY);
}

        screenX,screenY :鼠标相对于屏幕的位置

document.onmousemove = function(e) {
    var e = e || window.event;
    console.log(e.screenX, e.screenY);
}

键盘

1.键盘事件的类型

        onkeydown + onkeyup = onpress

2.which具有兼容问题，低版本IE浏览器不支持。

//keyCode:keyCode和which 获取键盘上按键对应的unicode编码

document.onkeydown = function(ev){
    var ev = ev||event;
    alert(ev.keyCode);
}

//案例：WASD控制一个盒子移动

var oBox = document.querySelector('.box');
    document.onkeydown = function(ev){
        var ev = ev||event;
        if(ev.keyCode === 65){
            oBox.style.left = oBox.offsetLeft - 5 +'px';
        }
        if(ev.keyCode === 68){
            oBox.style.left = oBox.offsetLeft + 5 +'px';
        }
        if(ev.keyCode === 83){
            oBox.style.top = oBox.offsetTop + 5 +'px';
        }
        if(ev.keyCode === 87){
            oBox.style.top = oBox.offsetTop - 5 +'px';
        }
    }

3.常见的键码

        组合键event.ctrlKey、event.altKey、event.shiftKey 分别代表ctrl alt shift键

---

浏览器的默认行为：

1.javascript中的默认行为是指javascript中事件本身具有的属性，如<a>标签可以跳转，文本框可输入文字、字母、图片路径等，右键浏览器会出现菜单等行为便被称为浏览器的默认行为。

2.阻止浏览器的默认行为

        ev.preventDefault(); 标准浏览器阻止默认事件,DOM事件使用此方法取消默认事件。

        ev.returnValue = false; 非标准浏览器（IE8）阻止默认事件

---

事件流：

1.事件流描述的是从页面中接收事件的顺序。

2.事件流包括三个阶段：事件捕获阶段、目标阶段(当前操作的元素)和事件冒泡阶段。

3.两大浏览器运营商：微软(microsoft)  网景(netscape)

        微软(microsoft) - 冒泡

        网景(netscape) 捕获

4.IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点,一直到文档document