今天写一下个人觉得在 JS 中比较重要又比较独特的对象 --Event 对象以及应用.
- 简单介绍 JS-
谈到 JavaScript, 很多人 (比如我) 总想探究一下它和 Java 的关系, 其实, java 和 JavaScript 好比雷锋和雷峰塔的关系, 除了名字相似, 其实毫无关系.
JavaScript 一种脚本编程语言, 不需要编译, 可以依靠 < script > 标签写在 html 文件中.
JS 中也有很多对象, 现在说到编程, 都知道一句话叫 "面对对象编程",JS 也是基于对象的. 基于之前学习的 python: 我把类产生的实例理解为对象, 类比到 JS, 就比较好理解了.
- <script type="text/javascript">
- var a='string';
- var b=new String('string');
- alert('a 的类型是:'+ typeof a +'\n'+'b 的类型是:'+ typeof b);
- </script>
在上面的例子中, 变量 a 就是一个字符串类型(数据类型), 而变量 b 利用关键字 new 创建了一个 String 实例, 所以是一个 String 对象. 结果如下:
image
再一次类比一下 python 中的实例, 具有类定义的属性和方法, 所以 JS 中的对象, 也是有一系列的属性和方法的.
在 JS 中, 一旦有事件发生, 比如单击鼠标按钮, 就会自动产生一个 event 对象.
注意: 在 IE 游览器中事件对象为 Windows.event, 在其他浏览器中事件对象为 event.
接下来用三种方法来实现'单击鼠标, 导致字体颜色改变'(下面例子均使用 Chrome 浏览器)
image
第一种方法
在 HTML 标签中加入事件, 此处必须要将 event 作为参数传入定义的事件处理函数. 在下面例子中, input 标签中的响应 onclick 事件的 changecolor()函数中一定要传参, 否则报错.
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 换颜色
- </title>
- </head>
- <body>
- <script type="text/javascript">
- function changecolor(event) {
- var a = event.target;
- a.style.color = 'red'
- }
- </script>
- <input type="button" value="点我换背景色" onclick="changecolor(event);">
- </body>
- </HTML>
image
第二种方法
全部在 < script > 内完成, 通过对对象进行属性赋值的方式完成. 从 < script > 标签内容可以看出, 首先获得对元素的引用, 然后将处理函数赋值给事件. 注意: 引用的标签必须写在 < script > 内容的上面(先写 < input>, 后写 < script>), 否则会报错说 onclick 属性是 null
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 换颜色
- </title>
- </head>
- <body>
- <input id="button" type="button" value="点我换背景色">
- <script type="text/javascript">
- var tag = document.getElementById('button');
- tag.onclick = changecolor;
- function changecolor(event) {
- var a = event.target;
- a.style.color = 'red'
- }
- </script>
- </body>
- </HTML>
image
第三种方法
通过添加监听器的方法实现 addEventListener(),(IE 浏览器中对应的是 attachEvent)
在该方法中要注意, 第一,<input > 必须写在 < script > 前面, 第二, 监听器中传入的第一个参数是不带 on 的事件名.
在后两种方法中, event 对象都是浏览器自动传参的, 所以虽然在绑定函数的时候没有像第一种方法那样, 传入 event 对象, 但是在函数定义的时候, 还是要有一个接收 event 的形参的.(例子中形参也写成了 event, 并不建议这样, 可以随便写一个)
- <!DOCTYPE HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 换颜色
- </title>
- </head>
- <body>
- <input id="button" type="button" value="点我换背景色">
- <script type="text/javascript">
- var tag = document.getElementById('button');
- tag.addEventListener('click', changecolor, false);
- function changecolor(event) {
- var a = event.target;
- a.style.color = 'red'
- }
- </script>
- </body>
- </HTML>
三种方法的效果图(按钮上的字随手一写):
image
结束语: 初学 JS, 有理解不对的地方还望多多指正, 发现坚持更新好像也不是一件易事, 但是会继续努力的~
来源: http://www.jianshu.com/p/ac7da33c5fb2