一、事件对象

  1、每个元素身上是天生存在的,不需要我们去定义,只需要我们给这个事件绑定一个方法,当事件触发的时候,就会执行这个方法

  2、事件绑定的方法:

    (1)、DOM0级绑定:div . onclick=function()  { }

    (2)、DOM2级绑定:div . addEventLister()  ||  div . attachEvent()

    二者的区别:

      (1)、onclick是这个元素私有的属性,而addEventLister()是公有的属性,从EventTarget(事件源)对象上继承来的

          IE低版本的attchaEvent是公有的

      (2)、div . onclick存在事件冒泡机制,没有捕获机制

div . addEventListener()可有冒泡,可有捕获

           div . attachEvent()只有冒泡机制

    attachEvent()和addEventListener()的区别

    (1)、attachEvent只用在Ie8以下,addEventListener()适合标准浏览器

    (2)、attachEvent的事件名带on,而addEventListener事件名不带on

    (3)、attachEvent函数里面的this是window,而addEventListener函数里面的this是指当前元素对象

    (4)、attachEvent只有冒泡没有捕获,addEventListener可有冒泡也可有捕获

二、Arguments

  每个函数都有一个arguments对象,它是这个函数所有参数构造的集合,它是一个数组

           

  上面的控制台是arguments数组中有一个元素叫mouseevent;

  所以,每个事件的方法中,浏览器都会给它一个参数叫mouseevent。我们所有的鼠标的消息都临时存在这个mouseevent

三、事件的兼容问题

  mouseevent有兼容性:

    

  Event对象的兼容性:

    clientX和clientY是浏览器鼠标到浏览器窗口左上角的距离位标

    pageX和pageY是鼠标到网页左上角的距离,但是Ie低版本没有这个属性

    在Ie怎么算pageY的值:用clientY+scrollTop

  事件源兼容性:

    事件源:点击那个元素,那个元素就是事件源

    标准浏览器的事件源是ev . target

    Ie6-8 没有这个属性,但是Ie有ev . scrElement

  阻止事件冒泡的兼容性:

    event . stoppropagation?event . stoppagation : event.cancelBubble=true;

  阻止事件默认行为的兼容性:

    event . prevenDefault?event . prevenDefault : event.returnvalue=false;

事件对象,arguments、事件的兼容问题的更多相关文章

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

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

  2. js跨浏览器事件对象、事件处理程序

    项目中有时候会不用jquery这么好用的框架,需要自己封装一些事件对象和事件处理程序,像封装AJAX那样:这里面考虑最多的还是浏览器的兼容问题,原生js封装如下:var EventUtil={ //节 ...

  3. JavaScript事件对象与事件的委托

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

  4. JS事件流、事件监听、事件对象、事件委托

    JS事件流: 01.DOM级别和DOM事件 02.JS事件流:页面中接收事件的顺序 事件冒泡阶段-->处于目标阶段-->事件捕获阶段 (事件捕获总发生在事件冒泡前面) 03.捕获:从外向里 ...

  5. 【2017-05-03】winform打印控件、事件对象和事件数据、MDI窗体容器

    一.打印控件 第一步先把打印对象搞出来. - printDocument    打印对象(将要打印的内容放到该对象里,从该对象里取内容打印) 设置他的PrintPage事件(对于要打印的每一页触发一次 ...

  6. 从零开始的全栈工程师——js篇2.21(事件对象 arguments 阻止事件默认行为兼容 事件委托 事件源对象)

    一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=f ...

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

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

  8. JavaScript的事件概述以及事件对象,事件流

    事件处理程序 JavaScript 事件对象是由访问 Web 页面的用户引起的一系列操作,例如:用户点击页面上的某个按钮或者鼠标移动到页面的某个图片上而产生一系列的互动的反馈. 我们通过为指定事件绑定 ...

  9. JavaScript事件对象与事件处理程序

    在学习之前建议请看一下事件流.事件冒泡.事件捕获 一.事件对象 事件对象:在DOM触发事件时,会产生一个事件对象event,这个事件对象包含着所有与事件相关的信息.既然event是事件对象,那么它必然 ...

  10. DOM事件处理程序-事件对象-键盘事件

    事件流: 事件流--描述的是从页面中接受事件的顺序 IE  ---事件冒泡流:即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播至最不具体的那个节点(文档). Netsc ...

随机推荐

  1. BZOJ_3489_ A simple rmq problem_KDTree

    BZOJ_3489_ A simple rmq problem_KDTree Description 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这 ...

  2. 使用基于Caffe的MobileNet分类踩坑备忘录

    首先要帮Caffe甩个锅:Caffe对图像处理进行了很高明的封装,以protobuffer形式组织的搭积木式的网络构建也很灵活方便,这里的坑都是自己腿不好,走路不稳崴进去的. 1. Caffe的一个i ...

  3. Java中的标识符,类名和包名规则

    Java中的包.类.方法.参数和变量的名称 标识符的命名规则 1.变量必须以字母.下划线(_)或美元符号($)开头 2.余下的字符可以是下划线.美元符号或任何的字母或数字 3.不能使用JavaScri ...

  4. ElasticSearch基础之映射mapping

    [01]什么是mapping? 首先去看看官方文档,非常重要:https://www.elastic.co/guide/en/elasticsearch/reference/current/mappi ...

  5. JSON 下 -- jansson 示例

    JSON 下 —— jansson 示例 参考网址: jansson 库的下载: http://www.digip.org/jansson/ 安装jansson 步骤: http://blog.csd ...

  6. ssl 证书申请

    https(全称:Hyper Text Transfer Protocol over Secure Socket Layer),是以安全为目标的 http 通道,简单讲是 http 的安全版.即 ht ...

  7. 牛客 - 700I - Matrix Again - 二维RMQ - 二分

    https://ac.nowcoder.com/acm/contest/700/I 二维RMQ,贴个板子,注意爆内存,用char就可以了,char也可以存负数. 然后二分枚举对角线长度,理由很简单. ...

  8. Codeforces - 65D - Harry Potter and the Sorting Hat - 简单搜索

    https://codeforces.com/problemset/problem/65/D 哈利波特!一种新思路的状压记忆化dfs,记得每次dfs用完要减回去.而且一定是要在dfs外部进行加减!防止 ...

  9. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  10. jQuery 设置图片 src 的2种方法

    // 方法1 $('#imgValidateCode').attr("src", data.CodeUrl); // 方法2 var self = $("#refresh ...