下面讨论一下 js 中的 Event 对象，主要从以下三个方面详细的描述(点击标题可跳转到对应部分)：

　　　1.什么是event

　　　2.怎么用event，用他该注意什么，几个简单实际应用

　　　3.event在不同浏览器的存在的兼容问题，及如何去解决

 1.  什么是event

　　Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态等等。说的通俗一点就是，event是JS的一个系统内置对象。平时无法使用，当DOM元素发生按键、鼠标等等各种事件时，系统会自动根据DOM元素触发的事件生成一个event对象。然后你可以直接取、使用这个新创建的对象去查询一些信息或者完成一些功能(ps：当然存在浏览器差异，后续再说)。

　　那我们执行一段简单的代码，了解一下这个 event 对象里面都有些啥：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button onclick="func()" style="width: 80px; height: 40px;">点我</button>

    </body>

    <script type="text/javascript">

        function func(){

            console.log(event);

        }

    </script>

</html>

　　然后我们看一下控制台的打印结果：

　　　　

　　这是一个很简单的测试，从控制台的结果不难看出，这里面包含很多信息，这是以对象属性的方式呈现的。同样这些信息也都是 event 的属性，可以直接通过链式语法点出来。所以我们在需要这些属性信息时可以直接打印出来，然后视情况使用。

　　关于 event 的所有属性，在这就不一一介绍了，W3C 介绍的很清楚，需要了解可以直接 点这里 查看 W3C 的event属性介绍。

 2.  怎么用event，用他该注意什么

　　要注意只有在事件发生的过程中， event对象才生效。所以我们一般通过事件绑定函数，调用函数的方式使用、查看 event 的信息。而且在IE中event是一个全局对象。就是说在你想使用他的时候可以随时调用。不需要受什么约束。

　　比如下述代码:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button onclick="func()" style="width: 80px; height: 40px;">点我</button>

    </body>

    <script type="text/javascript">

        function func(){

            console.log(event.target.tagName);

            console.log(event.target.textContent);

            console.log(event.type);

        }

    </script>

</html>

　　然后看一下效果：

　　　　

　　这是在IE中的运行结果，很明显，只要根据event的属性往下查询，就可以获取我们想要的信息。而且这里event并没有受到作用域的限制。说明他是全局的。这里的代码是在button有点击事件时，打印出，被点击的元素名称，执行的事件名称，以及被点击元素的的text值。所以event的使用特别的灵活。

　　再举个例子，请看以下代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button class="but1" onclick="func()" style="width: 200px; height: 40px;">点我</button>

    </body>

    <script type="text/javascript">

        function func(){

            if(event.target.className=="but1"){

                event.target.style.backgroundColor="red";

                event.target.textContent="我的内容被修改了,而且变红了";

                event.target.className="but2";

            }else{

                event.target.style.backgroundColor="blue";

                event.target.textContent="我的内容又被修改了,而且变蓝了";

                event.target.className="but1";

            }

        }

    </script>

</html>

　　然后看一下代码的效果：

　　　　

　　我们来解析一下这段代码。其实很简单，就是通过 event 的属性对触发事件的DOM元素进行了一系列的操作。这里通过检测 button的class名字，对button的内容和背景色进行修改，并且修改了button的class名，进行多次判断。这样就产生了每次点击使按钮的背景色和内容显示不同的需求了。

　　看到这是不是感觉很神奇。这就是 event 的神奇之处。你可以通过 event 对象进行任何你想要实现的样式操作。不需要麻烦的取节点，不需要写繁琐的样式。把你想要的操作全部封装到一个函数中，然后通过事件调用。这种操作极其的灵活。

　　当然， event对象也不是万能的，他也有他的缺陷。因为他的执行需要在事件发生之后，所以他也只能做网页的修改，没有触发事件，就无法实现操作。而且，浏览器兼容问题也是比较令人难受的，这个我们后面再说。但是总的来说，这种编程方式在大多数情况下，能极大的提高代码编写速度，减少代码量。至于能否灵活的使用，就得看各位的熟练程度了。

 3.  event在不同浏览器的兼容问题，及如何去解决

　　之前，我们一直没说的就是 event 的浏览器兼容问题。现在我们就着重解决一下。这里就以主流浏览器 IE、谷歌、火狐为例介绍一下。

　　(1) IE　　作为那个年代的浏览器老大哥，现在却是我们最痛恨的浏览器，泪奔~~。但是在 event 这一块，他确实做的很良心啊。请听我慢慢道来.....　　在IE中，event 是一个全局的变量，不存在作用域的问题。也就是说，谁触发了事件，那在事件绑定的函数中，你可以直接使用event的属性做任何操作，没有作用域的限制，也没有其他函数格式的要求。所以在IE中放心大胆的去用吧！

　　(2)Chrome 谷歌　　谷歌做的也不错，使用也没有什么问题。在 Chrome 中，event并不是全局变量。他是在每个事件绑定的函数中都默认传入了一个形参event，注意函数的第一个形参就是event对象，而且我们不需要去写这个形参。如果你要在事件绑定的函数中使用 event，那直接 event . 点他的属性即可。系统默认将event对象以参数的形式传递到了函数中。这里不需要你做任何操作，只管用，简单粗暴。

　　　这里还是再举个例子吧，请看下边代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <button onclick="func('弹出我来')"> func </button>

    </body>

    <script type="text/javascript">

        function func(haha){

            alert(event.target.tagName);    // 返回button名称，因为对象里面有 tagName 这个键

            alert(event.target);    // 他返回一个对象，关于触发这个时间的dom节点信息的对象

            alert(event.type);      // 返回click

            alert(haha);

            console.log(event);

        }

    </script>

</html>

　　要注意，函数 func() 看起来只有一个形参，其实不然，他还有一个 event 形参，这是系统默认的，我们自己的形参该怎么写怎么写，然后在函数内部也是可以直接event 关键字直接使用 event 对象即可。至于其他的的工作都是浏览器默默做了。

　　这里就是强调一下 IE 和 Chrome 虽然看起来用法一样，其实还是有本质区别的，只是浏览器封装的好而已。

　　(3)Firebox 火狐　　火狐就麻烦一点了。因为火狐中压根就没有event这个变量。不过解决方法也是很简单的。想要使用 event，我们就需要先使用如下语句　　var e = arguments.callee.caller.arguments[0] || window.event; 很简单吧，加上他火狐就可以兼容了，可以和谷歌等一样使用 event 对象。但是注意名字变了，我们这里是 e 了。当然解决方法还有别的，这个看个人喜好，你也可以修改火狐的配置。这里就不一一列举了，有兴趣的可以百度一下。

　　那 event 就介绍到这了，虽然只是说了点皮毛，他说的使用太灵活，只能是根据具体情况具体对待了。最后，如果本文有错误之处还请朋友们指出，也欢迎大家在评论区或者私信我比较好的 event 对象应用实例，我们互相学习！

前端程序员的蜕变——JS的 event 对象属性、使用实例、兼容性处理(极大提高代码效率、减少代码量)的更多相关文章

  1. 【原文】前端程序员必须知道的高性能Javascript知识

    原文:前端程序员必须知道的高性能Javascript知识 想必大家都知道,JavaScrip是全栈开发语言,浏览器,手机,服务器端都可以看到JS的身影. 本文会分享一些高效的JavaScript的最佳 ...

  2. web前端程序员真的值这么多钱吗？

    对于互联网公司来说用户就是上帝,做好客户体验一切才有可能.所以互联网公司都会把钱砸向前端,Web前端程序员也越来越受到企业争相聘用. 前端工程师工资也越来越高,目前Web前端工程师工作1~2年后通常会 ...

  3. 前端程序员：月薪 5K 到 5 万，我干了啥（转）

    转自:http://www.imooc.com/article/4110 前端程序员:月薪 5K 到 5 万,我干了啥前端开发工作已经变的越来越复杂,仅仅是想罗列一份前端开发的学习列表就已经是一件艰巨 ...

  4. 2018年一名合格的web前端程序员应该会哪些技术

    有朋友让小编说一说web前端在未来几年的发展趋向,对于这个问题,恕小编无能为力,web前端技术日新月异,更新非常快,谁也不能预料未来会发生些什么 小编也只能说在2018年,react native和j ...

  5. 前端程序员学习 Golang gin 框架实战笔记之一开始玩 gin

    原文链接 我是一名五六年经验的前端程序员,现在准备学习一下 Golang 的后端框架 gin. 以下是我的学习实战经验,记录下来,供大家参考. https://github.com/gin-gonic ...

  6. js delete删除对象属性，delete删除不了变量及原型链中的变量

    js delete删除对象属性,delete删除不了变量及原型链中的变量 一.delete删除对象属性 function fun(){ this.name = 'gg'; } var obj = ne ...

  7. js的dom对象（带实例超详细全解）

    js的dom对象(带实例超详细全解) 一.总结 一句话总结: 1.DOM中的方法区分大小写么? 解答:区分 2.DOM中元素和节点的关系式什么? 解答:元素就是标签,节点中有元素节点,也是标签,节点中 ...

  8. asp.net程序员初涉node.js

    之前一直听说node.js在处理网站大规模并发上十分有用,所以有一定规模的公司都在使用node.我在工作中只用过jquery,属于那种边做功能边学习的那一种.甚至连原生的js都不太会写,只是知道语法差 ...

  9. 前端程序员：月薪 5K 到 5 万，我干了啥

    高贵的前端程序猿们: 如何在前端开发这种高精尖的技术领域找到心仪的工作?实现在咖啡馆喝喝咖啡敲敲代码就能升职加薪.买房买车.迎娶白富美走上人生巅峰的职业梦想?这篇<进化论:从 0 到 100,前 ...

随机推荐

  1. WOW.js轻松为网页添加动画切入效果

    由于坐忘的需要,经常会有部分功能用的很多,做起来又很繁琐,所以插件也就应运而生了.个人感觉正式js强大的可植入性, 才使他如此的使用火爆,反正博主是特别喜欢这一点  Y(^o^)Y~ . 今天就和大家 ...

  2. webstorm html碎片整理功能

    我们用字符串形式写html模板时,或者向某标签添加html内容时,如下,如果这个str更加的长,一旦里面少了一个单引号,少了一个加号,基本报错还看不懂,一脸懵逼... // 假定后台传给我们的数据为 ...

  3. OC中常见的结构体,以及NSNumber、NSValue、NSDate的使用

    常见的结构体 NSPoint和CGPoint NSSize和CGSize NSRect 和 CGRect NSPoint和CGPoint的使用 NSPoint和CGPoint是同义的 typedef ...

  4. spring security 配置多个AuthenticationProvider

    前言 发现很少关于spring security的文章,基本都是入门级的,配个UserServiceDetails或者配个路由控制就完事了,而且很多还是xml配置,国内通病...so,本文里的配置都是 ...

  5. MySQL5.5多实例编译安装——多配置文件

    一.什么是MySQL多实例?MySQL多实例简单的说就是在一台服务器上安装一套MySQL程序,通过不同的端口对外提供访问,多实例不仅节省物理主机成本,还有效提升了单台物理主机的CPU.磁盘I/O使用效 ...

  6. vue动态加载图片，取消格式验证

    vue 一. 动态加载图片 (以vue模板为例) app.vue 代码如下: <template> <div id="app"> <img :src= ...

  7. FiddlerScript高级技巧---自定义Fiddler菜单

    Tips 书接上回, Fiddler插件 在团队内部试用后,效果很不错,小伙伴们也提出了很多改进的建议: 最近一段Fiddler使用的仍较为频繁,以前碰到一些特殊测试需求时,总是自己在FiddlerS ...

  8. 浅谈一下web移动端基本

    屏幕尺寸.屏幕分辨率.屏幕像素密度 屏幕尺寸: 指屏幕的对角线的长度,单位是英寸,1英寸=2.54厘米. 常见的屏幕尺寸有2.4.2.8.3.5.3.7.4.2.5.0.5.5.6.0等. 屏幕分辨率 ...

  9. [转载]OpenStack OVS GRE/VXLAN网络

      学习或者使用OpenStack普遍有这样的现象:50%的时间花费在了网络部分:30%的时间花费在了存储方面:20%的时间花费在了计算方面.OpenStack网络是不得不逾越的鸿沟,接下来我们一起尝 ...

  10. ES6解构赋值详解

    文章转载自:http://www.zhufengpeixun.cn/article/167 解构赋值(destructuring assignment)语法是一个 Javascript 表达式,这种语 ...