【JavaScript笔记】Event事件对象1

概念：

在触发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