本篇体验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. 公共语言运行库(CLR)开发系列课程(2)：Pinvoke 进阶 学习笔记
			
    上一章地址 API版本 具有字符串参数的API通常有两种版本 GetWindowText GetWindowTextA GetWindowTextW 缺省情况下CLR会自动寻找合适的匹配 CharSe ...
    
			
    2. 
						
  2. elasticsearch安装ik分词器（极速版）
			
    简介:下面讲有我已经打包并且编辑过的zip包,你可以在下面下载即可. 1.下载zip包.elasticsearch-analysis-ik-1.8.0.jar下面有附件链接[ik-安装包.zip],下 ...
    
			
    3. 
						
  3. Long-Polling, Websockets, SSE(Server-Sent Event) 之间有什么区别？
			
    链接:http://www.mamicode.com/info-detail-1327667.html https://www.jianshu.com/p/d3f66b1eb748?from=time ...
    
			
    4. 
						
  4. private，protected，public和default的区别
			
    private,protected,public和default的区别 private,protected,public和default作为Java中的访问修饰符,他们的最大区别就在于访问权限不同:  ...
    
			
    5. 
						
  5. inline-block元素间隙问题原因及解决方法
			
    inline-block元素间隙问题原因及解决方法 原因: 书写时由空格.换行或回车所产生空白符所致 解决方法: 方法1:font-size:0 方法2:改变书写方式 方法3:使用margin负值 方 ...
    
			
    6. 
						
  6. java PriorityQueue(优先级队列)
			
    先进先出描述了最典型的队列.队列规则是值在给定一组队列中的元素的情况下,确定下一个弹出队列的元素的规则,先进先出声明的是下一个元素应该是等待时间最长的元素 优先级队列声明下一个弹出的元素是最需要的元素 ...
    
			
    7. 
						
  7. 无效GRANT语句导致主从同步断开
			
    最近遇到一个主从同步断开的案例,是由于在执行GRANT语句时,授权对象给错了,也就可以理解为无效的GRANT语句,我们收到slave库同步断开的报警信息,然后去找问题,发现binlog有报错,报错提示 ...
    
			
    8. 
						
  8. [转] HTML5之FileReader的使用
			
    HTML5定义了FileReader作为文件API的重要成员用于读取文件,根据W3C的定义,FileReader接口提供了读取文件的方法和包含读取结果的事件模型. FileReader的使用方式非常简 ...
    
			
    9. 
						
  9. bzoj 1188
			
    博弈的题目做的还是太少啦... 不会写啊啊啊 思路:将每个石子看成一个游戏, 那么整个游戏sg值就是全部石子sg值的异或. #include<bits/stdc++.h> #define  ...
    
			
    10. 
						
  10. linux(centos)安装升级ruby
			
    参考文章:http://www.ruby-lang.org/zh_cn/documentation/installation/ 文章给出了不同平台的多种方法.我的是centos,我选择了一个比较简单的 ...
    
			
    11.