一,this关键字和上下文

var box = document.getElementById("box");

  普通的函数如果没有给他传递参数,函数本身是没有参数的。

    

    test();  //0

    function test () {
    alert(arguments.length);
    }

  但是在事件对象中是有参数的,他是通过浏览器把这个对象作为参数传递过来的。

     box.onclick = function() {

      alert(arguments.length);// 1

      alert(arguments[0]);  //这个参数是MouseEvent,鼠标事件
    }

  用arguments对象获取参数太过繁琐,所有一般给函数传递一个参数的方法来代替arguments,具体如下:  

  box.onclick = function(evt){
    var e = evt||window.event;   //window.event 兼容IE
    alert(e);  //  1
  }

二,clientX, clientY

document.onclick = function(evt){
  var e = evt || window.event;
  alert(e.clientX + "," + e.clientY);
  alert(e.screenX+","+ e.screenX);
}

1.clientX,clientY鼠标距离左边框的距离,鼠标距离上边框的距离

2.screenX,screenY鼠标距离屏幕区左边的距离,鼠标距离屏幕区上面的距离

end

JS:事件对象1的更多相关文章

  1. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

  2. JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习

    JS事件对象,筋斗云导航练习,跟随鼠标练习,放大镜练习,进度条练习 btn.onclick = function(event) { 语句 } 其中event就是事件对象,在这个方法中指向的对象是onc ...

  3. JS—事件对象

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. 举例鼠标操作导致的事件对象中,会包含鼠标位 ...

  4. JS事件对象与事件委托

    事件对象 包含事件相关的信息,如鼠标.时间.触发的DOM对象等 js默认将事件对象封装好,并自动的以参数的形式,传递给事件处理函数的第1个参数,如下: document.getElementsByTa ...

  5. JS 事件对象和事件冒泡

    1.事件对象 js的事件对象中保存了当前被触发事件的一些相关的属性信息,如事件源.事件发生时的鼠标位置.事件按键等. 事件对象的获取方法: IE中可以window.event直接获取,而Firefox ...

  6. js事件对象--DOM中的事件对象/IE中的事件对象/跨浏览器的事件对象

    事件对象    在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息.包括导致事件的元素.事件的类型,以及其他与特定事件相关的信息.例如,鼠标操作导致的事件对 ...

  7. js事件对象

    哎,事件也有对象呦.程序员一直在讲对象对象,那么,过年是不是该带个对象回家呢?好了,既然事件有对象,承认这个事实吧!哈哈,那么,其就有属性,接下来,就放个 例子来讲讲,顺便把常用的属性也添加进去.. ...

  8. js 事件对象

    /* 事件绑定的格式: 元素节点.on + 事件类型 = function(){ } 元素节点 事件类型 on+事件类型:事件处理函数 [注]上述三者一绑定:生成一个新的事件对象. [注]触发事件以后 ...

  9. js 事件对象event

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

随机推荐

  1. myeclipse 第一步

    今天查myeclipse的一个不常用快捷键的时候,意外发现了一个学习myeclipse开端的博文(别问我是怎么查到这篇博文的....两个字:顺手),感觉比较详细,特意记下来, 别人的分享博客: htt ...

  2. UVA-11991 Easy Problem from Rujia Liu?

    Problem E Easy Problem from Rujia Liu? Though Rujia Liu usually sets hard problems for contests (for ...

  3. 一些PHP性能优化汇总

    PHP优化对于PHP的优化主要是对php.ini中的相关主要参数进行合理调整和设置,以下我们就来看看php.ini中的一些对性能影响较大的参数应该如何设置. # vi /etc/php.ini (1) ...

  4. 非常简单的升级phpnow自带的php版本到5.3的方法

    下载PHP5.3 下载地址百度一下“PHP5.3下载”就有很多网站提供下载的,也可以去官网下载最新的,记得下载ZIP压缩的噢 2 解压与命名 将下载的PHP5.3压缩包解压至phpnow的安装目录,命 ...

  5. 2016 GitHub章鱼猫观察报告之开源统计

    导读 GitHub 又发布了一年一度的章鱼猫观察报告.在这个报告中,分别对开源和社区做了一些有趣的统计,现将其中一些有趣的数据和趋势撷取出来分享给大家.完整的报告请移步Github. GitHub 上 ...

  6. 多线程更新UITableView时容易导致的问题

    我请求同一个接口两次, 第一次是那缓存, 第二次是那网络数据在请求成功回调的主线程异步的, 先赋值数据源, 然后调用uitableview reloaddata的方法, 这时候问题来了 reloadd ...

  7. PHP中计划任务

    PHP不支持多线程,有时候处理问题不是那么爽,今天谈论一下PHP定时执行的方法 PHP定时执行的三种方式实现 .windows 的计划任务 .linux的脚本程序 .让web浏览器定时刷新 windo ...

  8. window跳转页面

    1.直接的事件跳转 window.location.href="你所要跳转的页面"; 2.新窗口跳转 window.open('你所要跳转的页面'); 3.返回上一页 window ...

  9. ASP.NET正则表达式(URL,Email)

    public static bool IsUrl(this string str)    {        if (str.IsNullOrEmpty())            return fal ...

  10. Linux命令行上程序执行的那一刹那!

    转自:http://www.cppblog.com/cuijixin/archive/2008/03/14/44463.html by falcon<zhangjinw@gmail.com> ...