事件对象——event
2023-09-14 08:58:55 时间
一、介绍
把一个click时间log出来是这样的:
{ altKey:false, bubbles:true, button:0, buttons:0, cancelBubble:false, cancelable:true, clientX:1, clientY:3, composed:true, ctrlKey:false, currentTarget:null, defaultPrevented:false, detail:1, eventPhase:0, fromElement:null, isTrusted:true, layerX:1, layerY:147, metaKey:false, movementX:0, movementY:0, offsetX:1, offsetY:0, pageX:1, pageY:147, path:(5) [div, body, html, document, Window], relatedTarget:null, returnValue:true, screenX:1, screenY:94, shiftKey:false, sourceCapabilities:InputDeviceCapabilities, srcElement:div, target:div, timeStamp:12270.44, toElement:div, type:"click", view:Window , which:1, x:1, y:3 }
二、详细的一些注意点
在IE8,事件触发有一个对象叫做event,event里面装着各种事件的相关属性值
但是Firefox不支持event,直到现在最新版本都不支持,chrome和IE9支持ev和event
chrome | IE9+ | FF | IE8- | |
ev | √ | √ | √ | |
event | √ | √ | √ |
document.onkeydown=function (ev) { var oEvent=ev||event; alert(oEvent.keyCode); };
1.兼容事件对象 var oEvent=ev||event;
2.阻止事件冒泡 oEvent.cancelBubble = true;
document.onclick=function (ev) { var oEvent=ev||event; oEvent.cancelBubble = true; };
3.默认行为
禁止默认事件,return false可以去除浏览器自带行为。
4.ctrl+回车
onkeydown事件会多出keyCode属性
var oTxt1=document.getElementById('txt1'); oTxt1.onkeydown=function (ev) { var oEvent=ev||event; if(oEvent.keyCode==13 && oEvent.ctrlKey) { oTxt2.value+=oTxt1.value+'\n'; oTxt1.value=''; } };
除了ctrlKey外,还有shiftKey和altKey
相关文章
- 从八道面试题看JavaScript DOM事件机制
- window.addEventListener来解决让一个js事件执行多个函数
- jQuery入门(3)事件与事件对象
- Autodesk基于Mesos的可扩展事件系统
- Node.js自定义对象事件监听与发射
- 第一百七十节,jQuery,事件对象,event 对象,默认行为,冒泡
- 第一百二十节,JavaScript事件对象
- 2015.8.3-20js(event事件对象和键盘事件)
- zepto的tap事件的点透问题的几种解决方案
- Python tkinter库之Canvas按键事件移动物体 (模拟推箱子小游戏)
- 屏蔽DataGridView控件DataError 事件提示的异常信息
- Dev gridcontrol 捕获按键事件
- 微信小程序开发系列 (三) :微信小程序如何响应用户点击事件和微信平台 API 的使用方法介绍
- flutter 加了从上往下动画,又有叠加stack,导致点击事件穿透了
- ASP.NET Web Forms - 事件
- Qt5中event事件的传递
- Qt QEvent(所有事件的翻译)
- Python基础之多线程事件Event
- 控件移动的事件过滤器
- Vue学习之--------组件自定义事件(绑定、解绑)(2022/8/21)
- 小程序开发之点击事件
- monkey源代码分析之事件注入方法变化
- 实现现下列哪一种接口的对象,并不需要在web.xml文件内进行额外的设定,Servlet容器就能够回应该对象加入HTTP会话所发生的事件?(选择1项)
- 事件模型指的是对象之间进行通信的设计模式
- 动画Completed事件里获取执行该动画的UI对象
- WPF中的Command事件绑定
- 详解javaScript的事件中,复杂数据类型的传参(数组,对象,函数)
- Servlet事件监听器是什么?
- Android kotlin使用RecyclerView自定义adapter实例和点击事件