var target = event.target || event.srcElement; console.log(target.tagName); //div
首先说EventEvent 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!
一般开发中使用Event事件状态时都会利用形参的方式,这样就会带来一个问题,这个兼容浏览器问题应该怎样被解决,利用以下代码作为处理
检测现在使用什么事件类型
Event.type:可以检测现在使用什么事件类型click还是其他
console.log(event.type);//click
Event中的this
Event.target:指向触发了的元素很像this
在IE里面使用Event.srcElement
Event.targettagName:tagName 属性返回元素的标签名。HTML 返回 tagName 属性的值是大写的。
清除事件的默认行为
a.onclick = function(){return false;};普通方法可以直接返回false解决
event.preventDefault(); //a标签不在跳转,大多数浏览器可以使用
event.returnValue = false; //a标签不在跳转IE678方法
Evnet几个常用的事件属性
鼠标事件鼠标坐标
client鼠标在可视区的xy坐标
console.log(event.clientX);
console.log(event.clientY);page鼠标在页面文档中的坐标ie678不兼容,可以利用可视区-滚动条距离代替
console.log(event.pageX);
console.log(event.pageY);screen得到鼠标在电脑的屏幕坐标
console.log(event.screenX);
console.log(event.screenY);
键盘被按下事件
<script> // keyup按键弹起时触发 不区分字母大小写 document.onkeyup = function () { // key可以识别用户按下哪个键 console.log(event.key); // keyCode可以识别用户按下键盘的ASCllC console.log(event.keyCode); } // keydown 按键按下时触发可以识别功能键 不区分字母大小写 document.onkeydown = function () { console.log("按下"); } // keypress按下按键时触发 不识别功能键alt shift 区分字母大小写 document.onkeypress = function () { console.log("onkeypress"); console.log(event.keyCode); } blur() 从 checkbox 上移开焦点。 click() 模拟在 checkbox 中的一次鼠标点击。 focus() 为 checkbox 赋予焦点。 </script>
值得一提的是onkeyup触发条件是键盘按键弹起时才会触发,也就是说先打字,后触发,其他两个事件onkeypress/onkeydown,就会先触发后打字。