Day11 event事件（上）

event（事件对象）概念及作用

在触发DOM上某个事件时，会产生一个事件对象event,这个对象包含着所有事件相 关的信息，包含导致事件的元素，事件的类型以及其他的与特定事件相关的信息。
它是事件绑定中的一个隐藏的参数，可以通过arguments[0]来获取

获取事件对象的方式

• 在W3C标准中，直接在函数中声明该参数即可
• 老版本的IE浏览器--window.event;
  兼容写法

document.onclick=function(ev){
                var ev=ev||window.event;
                console.log(ev);
            }

event.button属性介绍--鼠标事件

如果当前event是鼠标事件，则会有一个button属性，它是一个数字：

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

不过老版本的IE并没有遵守W3C的规范，它的button属性含义如下：

1鼠标左键 2鼠标右键 3左右同时按 4滚轮 5左键加滚轮 6右键加滚轮 7三个同时

ev.which，既可以获取鼠标键的值（1.2.3），还可以获取键盘键入值的键盘编码，IE8不支持；onmousedown：当鼠标按下

鼠标事件中获取鼠标的位置属性介绍(clientX、pageX、offsetX、screenX)

鼠标位置

clientX,clientY:鼠标相对于可视区的位置。
pageX,pageY:鼠标相对于文档的位置。
offsetX,offsetY:鼠标相对于操作元素(鼠标点击元素)到盒子边缘(左上)的位置.
screenX,screenY:鼠标相对于显示屏的位置.

键盘事件

onkeydown + onkeyup =onpress

keyCode/which兼容 ： 获取键盘上按键对应的unicode编码

event.keyCode || event.which IE不支持(ie8)

组合键ctrlKey、altKey、shiftKey （例如：ev.ctrlKey）

if(event.keyCode == 13 && event.ctrlKey) { //ctrl+enter }

事件流

• 事件流描述的是从页面中接收事件的顺序。
• 事件的冒泡
  IE 的事件流叫做事件冒泡，即事件开始时由最具体的元素（文档中嵌套层次最深的那个节 点）接收，然后逐级向上传播到较为不具体的节点（文档） 。
  取消冒泡：具体元素对象（冒泡元素）的事件不会冒泡到父级（外层）。
  非标准(ie8及以下)： ev.cancelBubble=true;
  标准：ev.stopPropagation();

应用

1．光标的实时显示

2.png

2．跟随鼠标的提示框

3.jpg
3．输入框默认提示(placeholder)onfocus/onblur
4.png

4．扩展案例：表格的即时编辑
5．CSS模拟下拉菜单（select）

5.png

综合应用

6.png