您现在的位置是:首页 > Javascript
当前栏目
事件对象的兼容
2023-03-31 11:00:10 时间
每个事件函数天生有一个参数叫event,它是事件对象,如果想修改event的名称,事件函数的第一个参数就是用来修改的
<div id="div"></div>
var oDiv = document.getElementById("div");
oDiv.onclick = function() {
console.dir(arguments);
};
document.body.onclick = function(e) {
console.dir(e); //MouseEvent
当我们触发#div的点击行为的时候,会执行对应绑定的方法
不仅仅把绑定的方法执行了,而且浏览器还默认的给这个方法传递了一个参数值,叫做MouseEvent
,叫做鼠标事件对象,是一个对象属性类型的值
-
它是一个对象数据类型的值,里面包含了很多的属性名和属性值,这些都是用来记录当前鼠标的相关信息的。
鼠标移动的坐标:
page:针对于整个页面的左顶点 常用
console.log("page",e.pageX,e.pageY);
client:针对于可视窗口的左顶点 不常用
console.log("client",e.clientX,e.clientY);
offset:针对于父元素的左顶点 常用于拖拽
console.log("offset",e.offsetX,e.offsetY);
案例:跟随鼠标移动
<script> //事件元素:大白板 //事件类型:onmousemove //事件对象:获取鼠标的坐标,将坐标赋值给box的left和top // (一个元素要在页面发生位移,本质就是在修改left和top) var oTiger = document.querySelector("#tiger"); //给整个页面绑定:鼠标移动事件 document.onmousemove = function(evt){ //兼容的方式获取event对象 var e = evt || event; // 鼠标在页面的位置 = 滚动条滚动的距离 + 可视区域的坐标。 //注意,如果想通过 style.left 来设置属性,一定要给 box1开启绝对定位。 oTiger.style.left = e.pageX - oTiger.offsetWidth/2 + "px"; oTiger.style.top = e.pageY - oTiger.offsetHeight/2 + "px"; }
-
MouseEvent
,往上找是UIEvent
,然后是Event
,最后是Object
,这是它的原型链 -
MouseEvent
记录的是页面中唯一一个鼠标每一次触发时候的相关信息,和到底是在哪个元素上触发的没有关系事件对象本身的获取存在兼容问题
标准浏览器中是浏览器给方法传递的参数,
我们只需要定义形参e就可以获取到。
而IE6~8中浏览器不会给方法传递参数e,我们如果需要的话,
在IE6,7,8下只能用
window.event
中获取查找
var e = evt || event;
- event 使用前提,必须有事件 不同的对象产生的事件不同
- event 代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
- event 对象只在事件发生的过程中才有效。
- event 的某些属性只对特定的事件有意义。比如,
fromElement
和toElement
属性只对onmouseover
和onmouseout
事件有意义。
传进来这个e,在iE9以上才有
在IE6,7,8时,e是不会传进去的
window.event
谷歌下也有,IE6,7,8下也有,但是火狐下没有window.event
所以IE6,7,8下只能用window.event
而IE9,谷歌,火狐等标准浏览器,e都是可以用的
oDiv.onclick = function (e) {
console.dir(e);
//->IE6,7,8下是存在window.event里面的
console.dir(window.event);
}
相关文章
- TiDB Binlog 组件正式开源
- 使用Visual Studio Code对Node.js进行断点调试
- 推荐!数据可视化的十种优秀JavaScript图表库
- Node.js在复杂集成场景下占据统治地位的五个理由
- 玩转Node.js单元测试
- Node.js中内存泄漏分析
- Angular对React:一场关于Web开发者支持率的史诗对决
- 热点推荐:什么是后端开发?
- 谈谈Spring boot 启动层面的开发
- 使用NodeJS将文件或图像上传到服务器
- 编写React组件的最佳实践
- JavaScript MV*框架最值得关注的七个亮点
- 前端开发指南:如何利用PHP Cake框架构建应用
- 基于React与Vue后,移动开源项目Weex如何定义未来
- NodeJS和C++之间的类型转换
- jQuery中的常用到的三十九个技巧
- 官宣|Google Developers中国网站发布!
- NodeJS和C++之间的类型转换
- .NET Core首例Office开源跨平台组件(NPOI Core)
- 如何写出漂亮的React组件