美文网首页
Day11 event事件(上)

Day11 event事件(上)

作者: azure_1122 | 来源:发表于2018-01-09 18:35 被阅读0次

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

相关文章

网友评论

      本文标题:Day11 event事件(上)

      本文链接:https://www.haomeiwen.com/subject/inrwnxtx.html