本篇体验JavaScript事件的基本面，包括：

■ 事件必须在页面元素加载之后起效
■ 点击事件的一个简单例子
■ 为元素注册多个点击事件
■ 获取事件参数

■ 跨浏览器事件处理

□ 事件必须在页面元素加载之后起效

有这样一段简单的代码：

<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



    <style>



        #box {



            background: blue;



            height: 100px;



            width: 100px;



            left: 50px;



            top: 50px;



        }



    </style>



</head>



<body>



    <div id="box"></div>



</body>

现在，我们想给id为box的div添加事件，创建一个script.js文件。

(function() {



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





    ele.onclick = function() {



        this.style.background = "red";



    };



}());







是一个匿名函数，只要被引用，自动运行。


如果把script.js放在head区域。


<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



    ......



    <script src="script.js"></script>



</head>




点击页面蓝色区域会报错：Cannot set property 'onclick' of null


找不到需要实施onclick事件的元素。如果我们把script.js放在body区域底部，又会怎样呢？


<body>



    <div id="box"></div>



    <script src="script.js"></script>



</body>




点击页面蓝色区域背景色变成红色。


由此可以看出：事件必须在页面元素加载完毕之后才可以实施。


以上，通过把JavaScript代码放在需要实施事件元素的下方，保证了先加载元素，再执行事件，这很好。而实际上，通过window的onload方法也可以保证所有页面元素加载完毕再执行事件。


修改script.js的代码为：


(function () {





    window.onload = function() {



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





        ele.onclick = function () {



            this.style.background = "red";



        };



    };





}());







把script.js代码放在head部分。点击页面蓝色区域背景色变成红色。


□ 点击事件的一个简单例子


<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



    <style>



        .on {



            background-color: white;



            color: black;



        }





        .off {



            background-color: black;



            color: white;



        }



    </style>



    <script src="script.js"></script>



</head>



<body class="on">



    <h1>Hello World</h1>



    <p>欢度国庆</p>



    <button id="open">开</button>



    <button id="close">关</button>



</body>







script.js的代码为：


(function () {





    window.onload = function() {



        var openBtn = document.getElementById("open");



        var closeBtn = document.getElementById("close");





        openBtn.onclick = function() {



            document.body.className = "on";



        };





        closeBtn.onclick = function() {



            document.body.className = "off";



        };



    };









一切运行正常。但，如果我们在script.js中给开按钮再注册一个事件。


(function () {





    window.onload = function() {



        var openBtn = document.getElementById("open");



        var closeBtn = document.getElementById("close");





        openBtn.onclick = function() {



            document.body.className = "on";



        };





        closeBtn.onclick = function() {



            document.body.className = "off";



        };





        openBtn.onclick = function() {



            alert('hello');



        };



    };





}());










当点击"开"按钮后，弹出alert。由此可以看出：每次只能为元素注册一个onclick事件。


□ 为元素注册多个点击事件


使用addEventListener方法，可以为元素同时注册多个点击事件。


修改script.js代码如下：


(function () {





    window.onload = function() {



        var openBtn = document.getElementById("open");



        var closeBtn = document.getElementById("close");





        var open = function() {



            document.body.className = "on";



        };





        var close = function() {



            document.body.className = "off";



        };





        //第三个参数设置成false，表示允许事件冒泡



        openBtn.addEventListener("click", open, false);



        openBtn.addEventListener("click", function() { alert('hello'); }, false);



        closeBtn.addEventListener("click", close, false);



    };





}());









当然，也可以移除注册的事件。


        //移除EventListner事件



        openBtn.removeEventListener("click", open, false);




注意：在IE8下没有addEventListner，应该使用attachEvent。


openBtn.attachEvent("onclick", function(evt)){



    alert(evt.srcElement);//相当于target属性



    document.body.className = "on";



};




○ attachEvent只有2个参数
○ 事件名称是onclick，而不是click
○ event.srcElement相当于event.target


如果在IE8下注销事件。




openBtn.detachEvent("onclick",函数名称);




□ 获取事件参数


在每次发生事件的时候，所有的事件参数信息都被放在了一个event变量中。修改script.js代码为：


(function () {





    window.onload = function() {



        var openBtn = document.getElementById("open");



        var closeBtn = document.getElementById("close");





        var open = function (e) {



            alert(e.type + " " + e.target);



            document.body.className = "on";



        };





        var close = function (e) {



            alert(e.type + " " + e.target);



            document.body.className = "off";



        };





        //第三个参数设置成false，表示允许事件冒泡



        openBtn.addEventListener("click", open, false);



        closeBtn.addEventListener("click", close, false);



    };





}());









可见，函数的事件参数在大多数情况下被省略了，如果想获取事件信息，这个event参数还是很有用的。


□ 跨浏览器事件处理


正因为，在不同的浏览器下事件处理方式不同，比如在chrome下接收addEventListener方法，而在IE8下接收attachEven方法，我们有必要针对跨浏览器提供一个通用的事件处理机制。


创建eventUtiltiy.js文件。


var eventUtility = {



    addEvent: function(ele, type, fn) {



        if (typeof addEventListener !== "undefined") {



            ele.addEventListener(type, fn, false);



        } else if (typeof attachEvent !== "undefined") { //比如在IE8下



            ele.attachEvent("on" + type, fn);



        } else {



            //获取属性通过obj.属性名称，等同于obj[属性名称]



            //执行事件通过obj.事件名称，等同于obj[事件名称]



            ele["on" + type] = fn;



        }



    },





    removeEvent: function(ele, type, fn) {



        if (typeof removeEventListener !== "undefined") {



            ele.removeEventListener(type, fn, false);



        } else if (typeof detachEvent !== "undefined") {



            ele.detachEvent("on" + type, fn);



        } else {



            ele["on" + type] = null;



        }



    },





    getTarget: function(event) {



        if (typeof event.target !== "undefined") {



            return event.target;



        } else {



            return event.srcElement;



        }



    },





    preventDefault: function(event) {



        if (typeof event.preventDefault !== "undefined") {



            event.preventDefault();



        } else {



            event.returnValue = false;



        }



    },





    getCharCode: function(event) {



        if (typeof event.charCode === "number") {



            return event.charCode;



        } else {



            return event.keyCode;



        }



    }



};









页面部分。


<head>



<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>



    <title></title>



    <style>



        .on {



            background-color: white;



            color: black;



        }





        .off {



            background-color: black;



            color: white;



        }



    </style>





</head>



<body class="on">



    <h1>Hello World</h1>



    <p>欢度国庆</p>



    <button id="open">开</button>



    <button id="close">关</button>



    <script src="eventUtility.js"></script>



    <script src="script.js"></script>





</body>









script.js部分。


(function () {





        var openBtn = document.getElementById("open");



        var closeBtn = document.getElementById("close");





        var open = function () {



            //alert(e.type + " " + e.target);



            document.body.className = "on";



        };





        var close = function () {



            //alert(e.type + " " + e.target);



            document.body.className = "off";



        };







        eventUtility.addEvent(openBtn, "click", open);



        eventUtility.addEvent(closeBtn, "click", close);





}());









“JavaScript进阶系列”包括：


JavaScript进阶系列01,函数的声明，函数参数，函数闭包


JavaScript进阶系列02,函数作为参数以及在数组中的应用


JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象


JavaScript进阶系列04,函数参数个数不确定情况下的解决方案


JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数


JavaScript进阶系列06,事件委托


JavaScript进阶系列07,鼠标事件
												


											
JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数的更多相关文章
	

    
								
  1. JavaScript进阶系列07,鼠标事件
		
    鼠标事件有Keydown, Keyup, Keypress,但Keypress与Keydown和Keyup不同,如果按ctrl, shift, caps lock......等修饰键,不会触发Keyp ...
    
		
    2. 
						
  2. JavaScript进阶系列06,事件委托
		
    在"JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数"中已经有了一个跨浏览器的事件处理机制.现在需要使用这个 ...
    
		
    3. 
						
  3. JavaScript进阶系列04,函数参数个数不确定情况下的解决方案
		
    本篇主要体验函数参数个数不确定情况下的一个解决方案.先来看一段使用函数作为参数进行计算的实例. var calculate = function(x, y, fn) { return fn(x, y) ...
    
		
    4. 
						
  4. JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象
		
    本篇体验通过硬编码.工厂模式.构造函数来创建JavaScript对象. □ 通过硬编码创建JavaScript对象 当需要创建一个JavaScript对象时,我们可能这样写: var person = ...
    
		
    5. 
						
  5. JavaScript进阶系列02,函数作为参数以及在数组中的应用
		
    有时候,把函数作为参数可以让代码更简洁. var calculator = { calculate: function(x, y, fn) { return fn(x, y); } }; var su ...
    
		
    6. 
						
  6. JavaScript进阶系列01,函数的声明，函数参数，函数闭包
		
    本篇主要体验JavaScript函数的声明.函数参数以及函数闭包. □ 函数的声明 ※ 声明全局函数 通常这样声明函数: function doSth() { alert("可以在任何时候调 ...
    
		
    7. 
						
  7. 前端入门20-JavaScript进阶之异步回调的执行时机
		
    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...
    
		
    8. 
						
  8. javascript进阶系列专题：闭包(Closure)
		
    在javascript中,函数可看作是一种数据,可以赋值给变量,可以嵌套在另一个函数中. var fun = function(){ console.log("平底斜"); } f ...
    
		
    9. 
						
  9. javascript进阶系列专题：作用域与作用域链
		
    字面意思,作用域是指变量和函数的作用范围,换言之,作用域决定了变量和函数的可见性和有效时间.javascript作用域是用函数来区分,与其他语言的大括号不同. for (var i=0; i<5 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. RPM Database
			
    RPM Database RPM 不仅在安装.升级.卸载方面工作出色,而且在查询和验证方面也表现非凡.你很久前安装了一个数据库软件,但现在忘记了它的版本号,也不知道它的说明文档的位置,可以通过 RPM ...
    
			
    2. 
						
  2. win7下iis中配置php.ini文件
			
    将php.ini-development配置文件重命名为php.ini配置文件即可. 接着做如下配置操作: 1.修改php.ini配置文件 打开php.ini配置文件,找到 12 ; On windo ...
    
			
    3. 
						
  3. 大数据的常用算法（分类、回归分析、聚类、关联规则、神经网络方法、web数据挖掘）
			
    在大数据时代,数据挖掘是最关键的工作.大数据的挖掘是从海量.不完全的.有噪声的.模糊的.随机的大型数据库中发现隐含在其中有价值的.潜在有用的信息和知识的过程,也是一种决策支持过程.其主要基于人工智能, ...
    
			
    4. 
						
  4. 转：vue-router 2.0 常用基础知识点之router.push()
			
    转载地址:http://www.jianshu.com/p/ee7ff3d1d93d router.push(location) 除了使用 <router-link> 创建 a 标签来定义 ...
    
			
    5. 
						
  5. Java中static关键字概述
			
    例如一个学生类中,我们需要统计下学生类中学生对象的数量,此时数量要定义为静态变量: 示例代码: package com.java1995; public class Student { int id= ...
    
			
    6. 
						
  6. python小记
			
    最近有匹骚猪用微信骚扰我,我很是气愤, 自学一波脚本: 学习目的:用脚本回击回去,通过py写一个脚本,一次性给别人发n条消息: mac上自学python: brew install python3(自 ...
    
			
    7. 
						
  7. java 内部类 工厂方法
			
    用内部类实现工厂模式 :优先使用类而不是接口,如果你的设计中需要某个接口,你必须了解它,否则不到迫不得已,不要将其放到你的类中 //: innerclasses/Factories.java impo ...
    
			
    8. 
						
  8. 2016 版 Laravel 系列入门教程
			
    2016 版 Laravel 系列入门教程 (1) - (5) http://www.golaravel.com/post/2016-ban-laravel-xi-lie-ru-men-jiao-ch ...
    
			
    9. 
						
  9. app微信支付宝支付后台的插件模式+回调通过spring广播处理后续业务（已亲测可用）
			
    写在前面的话:每当我们做一个项目,基本上都会涉及到支付的业务,最常用的莫过于微信和支付宝的支付了,项目有bug,有问题,都不叫问题,可一旦钱出了问题,那就是大问题了,所以在支付业务上我们必须慎之又慎! ...
    
			
    10. 
						
  10. 013.Zabbix的Items(监控项)
			
    一 Items简介 Items是从主机里面获取的所有数据,可以配置获取监控数据的方式.取值的数据类型.获取数值的间隔.历史数据保存时间.趋势数据保存时间.监控key的分组等. 通常情况下item由ke ...
    
			
    11.