/*
事件绑定的格式：
元素节点.on + 事件类型 = function(){

}

元素节点
事件类型
on+事件类型：事件处理函数
【注】上述三者一绑定：生成一个新的事件对象。
【注】触发事件以后，系统会去调用相关的事件处理函数。

事件对象获取：系统调用相关的函数的时候，会直接将生成的事件对象，当做参数传入到我们的函数内部。

已下代码演示用到的html结果：

<body>

    <button id = "btn1">按钮</button>

</body>

*/

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                /*所以

                oBtn.onclick = function(){}  就是一个事件对象

                oBtn 也是一个对象，所以我们把上面中的.onclick = function(){}看作是 oBtn对象的一个方法（函数）；

                我们把这个事件函数写在这以后，什么事件调用的呢？

                我们都知道，只有按钮被点击时才会调用这个事件函数，所以这个函数是系统给调用的。

                【注】我们自己调用得在页面写如下代码

                    oBtn.onclick();//我们自己调用

                */

            //}

继续看：

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(){

                    alert(1);

                } 

                oBtn.onclick();//我们自己调用     

            }

// 这样页面加载过程中就会弹出 消息框   1，点击按钮后也会弹出 消息框 1；

/* 我们再来看一下 oBtn.onclick = function(){} 在调用的时候我们并没有传参，我们利用arguments（函数内置的数组 arguments（只要声明一个
函数，系统就会自动分配一个arguments数组）用来存函数内的参数）；*/

//测试一 我们自己调用时 给传入实参会怎么

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(){

                    alert(arguments);

                } 

                oBtn.onclick(10);//我们自己调用   给他一个实参  10  

            }

//给我们的弹窗为 [object Arguments] 说明是一个Arguments对象

/*我们再来看一下我们传入的10 有没有存进去*/

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(){

                    alert(arguments[0]);//arguments函数内数组的0号下标

                } 

                oBtn.onclick(10);//我们自己调用   给他一个实参  10  

            }

//我们的测试结果是 10 说明我们的 实参已经传入了进去。

/*测试二 我们来看一下 系统给我们调用时 会给arguments 函数内数组 传入什么*/

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(){

                    alert(arguments[0]);//arguments函数内数组的0号下标

                }

                //点击页面上的按钮，让系统自己调用

            }

//点击页面上的按钮 给我们弹出 [object MouseEvent] 翻译出来是鼠标事件对象 ，刚好click就是鼠标事件类型的一种，
//所以系统在调用时传入的参数是一个 事件对象

/*
通过上面的arguments[0]的方式我们可以拿到 这个事件函数的 事件对象，但是我们都知道，在编程中能不用arguments就不用
arguments，所以我们准备给事件函数添加一个自定义形参ev（因为事件的英语单词为event，所以我们就自定义了一个ev方便代码阅读）
即oBtn.onclick = function(ev){}；具体代码如下*/

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(ev){

                    alert(ev);//查看我们的形参

                } 

            }

效果与上图相同

可以看出通过自定义形参的方式依然可以得到 事件对象
但是在IE8以下不支持这中形式，但是IE给我们提供了一种方式 通过window.event
具体代码如下

            window.onload = function(){

                var oBtn = document.getElementById('btn1');

                oBtn.onclick = function(){

                    alert(window.event);//IE8下的方法 ，看看能弹出点什么

                } 

            }

//弹出的内容为 [object PointerEvent] 也是鼠标事件对象的意思，所以我们可以通过这个方法获取，
//怎么才能兼容所有的浏览器呢，这里有个获取事件对象的固定格式写法，具体代码如下

            oBtn.onclick = function(ev){

                var e = ev || window.event;

                //alert(e);

            }

//利用 或运算的短路操作给 变量 e 赋值 。
//var e = ev || window.event; 这句语句的意思是 变量 e 如果浏览器有 ev 形参这种方式 或运算后面的 window.event 就不计算了，
//所以e 也就等于 ev 了，如果没有ev这种形式，就执行后面的语句 e也就等于window。event了；

/*
费劲心思的拿到 事件对象 是因为 事件对象有很多属性要加在事件对象上。
例如鼠标事件上的 .button .clientX .clientY .pageX .pageY .screenX .screenY
修改键（快捷键）属性 .shiftKey .ctrlKey .altKey .metaKey
加在键盘事件上的 keydown keyup keypress

js 事件对象的更多相关文章

  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:事件对象1

    一,this关键字和上下文 var box = document.getElementById("box");. 普通的函数如果没有给他传递参数,函数本身是没有参数的. test( ...

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

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

  8. js事件对象

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

  9. js 事件对象event

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

随机推荐

  1. PHP--traits

    从PHP5.4.0起,PHP实现了代码复用的一个方法,称为traits. traits试图用来解决像PHP这样的面向对象语言中只支持单继承的问题.它的作用是允许我们在不使用继承的情况下为一个类增加功能 ...

  2. 学习windows编程 day6 之模拟记事本

    //短的函数最好定义为宏 #define BUFFER(x,y) *(y*cxBuffer+x+pBuffer)//取出一个字符 //字符消息 //WM_CHAR,WM_DEADCHAR,WM_SYS ...

  3. Thread的setDaemon(true)方法

    定义:守护线程--也称“服务线程”,在没有用户线程可服务时会自动离开.优先级:守护线程的优先级比较低,用于为系统中的其它对象和线程提供服务. 设置:通过setDaemon(true)来设置线程为“守护 ...

  4. Networx蓝屏问题

    本人系统win7专业版64位. 从5月底开始就时不时有蓝屏发生,而且可以说是没有任何征兆就"啪"的一下蓝了... 有时候是隔个四五天蓝屏一次,有时候一天都能蓝好几次,实在是让人恼火 ...

  5. Centos下新建用户及修改用户目录

    Centos下新建用户及修改用户目录 Hillgo 关注 2015.09.22 01:32* 字数 154 阅读 3492评论 0喜欢 3 添加及删除用户 添加用户 test: adduser tes ...

  6. 一个简单的使用Quartz和Oozie调度作业给大数据计算平台执行

    一,介绍 Oozie是一个基于Hadoop的工作流调度器,它可以通过Oozie Client 以编程的形式提交不同类型的作业,如MapReduce作业和Spark作业给底层的计算平台(如 Cloude ...

  7. Mysql高级查询 内连接和外连接详解

    一.内连接(INNER JOIN) 1.等值连接 概述:指使用等号"="比较两个表的连接列的值,相当于两表执行笛卡尔后,取两表连结列值相等的记录. 语法: SELECT 列 FRO ...

  8. yolov3实践（二）

    这次给大家带来一个有趣的项目,项目主要是Python写的,基于Keras,backend是tf. 首先,当我们回顾视觉目标检测这个任务时,我们可能纠结于如何使这个项目变得更加work,我理解的更加wo ...

  9. D - Maximizing Advertising

    题目链接:https://cn.vjudge.net/contest/250168#problem/D 题目大意:给你一些点的坐标,这些点属于两个帮派,让你将这些点分进两个不能重叠的矩形中,问你最多两 ...

  10. 图片的Base64编码

    Base64编码是一种图片处理格式,通过特定的算法将图片编码成一长串字符串,在页面上显示的时候,可以用该字符串来代替图片的url属性. 我们可以来看一下实际的效果 Base64编码效果 在上图中,我们 ...