草庐IT

事件对象的兼容

qianfanqf 2023-03-28 原文

每个事件函数天生有一个参数叫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;
  1. event 使用前提，必须有事件 不同的对象产生的事件不同
  2. event 代表事件的状态，例如触发event对象的元素、鼠标的位置及状态、按下的键等等。
  3. event 对象只在事件发生的过程中才有效。
  4. 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);
  }
事件对象codeeventlanguage-jsJavaScript

有关事件对象的兼容的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法？ - 2

    总的来说，我对ruby​​还比较陌生，我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础，我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后，我想到了这种方法，可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法，但它确实有效。有没有人有更好的建议，或者这是一个很好的方法？#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单，其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在？solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  4. Ruby 写入和读取对象到文件 - 2

    好的，所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象？所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是，我该如何再次将这个id变回一个对象？我知道我可以自己挑选信息并制作一个接受该信

  5. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象，为什么它会起作用？ - 2

    如果您尝试在Ruby中的nil对象上调用方法，则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而，有一个tryRails中的方法，如果它被发送到一个nil对象，它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常？ 最佳答案 像Ruby中的所有其他对象

  6. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议？谢谢，马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单，因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法，但您没有调

  7. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  8. ruby - 一个 YAML 对象可以引用另一个吗？ - 2

    我想让一个yaml对象引用另一个，如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗？ 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  9. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象，使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么？更好的是，我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中，保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象，我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行，还是通过对对象本身做一些疯狂的事情，或者甚至通过删除它并使用相同的ID重新插入来做到这一点，这是问题的一部分。

  10. ruby-on-rails - ActiveRecord 对象相等 - 2

    根据ActiveRecord::Base的文档:==(comparison_object)Returnstrueifcomparison_objectisthesameexactobject,orcomparison_objectisofthesametypeandselfhasanIDanditisequaltocomparison_object.id.Notethatnewrecordsaredifferentfromanyotherrecordbydefinition,unlesstheotherrecordisthereceiveritself.Besides,ifyoufet

随机推荐