本篇体验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. 不使用第三方软件、使用IE11自带功能来屏蔽浏览器广告
			
    第一步: 下载后面的附件http://files.cnblogs.com/limits/IE11%E5%8E%BB%E5%B9%BF%E5%91%8A.zip 打开此路径IE11跟踪保护+CSS去广告 ...
    
			
    2. 
						
  2. PHP取整函数之ceil,floor,round,intval的区别
			
    我们经常用到的PHP取整函数,主要是:ceil,floor,round,intval. ceil -- 进一法取整 说明 float ceil ( float value ) 返回不小于 value  ...
    
			
    3. 
						
  3. VS Code 折腾记 - (5) Angular 2+ && Typescript 2 + 必备插件推荐
			
    前言 说起来我会用VSCode,有很大一方面是因为工作需求[以前主力工具是Atom],刚好公司的前端技术栈是NG2+TS2;对于喜欢折腾的我,裸奔的VSCODE是不可以接受的.so-. eg: vsc ...
    
			
    4. 
						
  4. mysql的完整卸载
			
    一.卸载MySQL数据库 1.检查mysql服务并关闭服务进程 (1)登录Linux后执行service mysqld status 或者service mysql status命令查看MySQL服务 ...
    
			
    5. 
						
  5. .NetCore 结合微服务项目设计总结下实践心得
			
    以下内容全是在项目中的体验,个人理解心得 起源 2017年7月开始接触.NetCore,当时还是因为Idr4的原因,之前的项目都是用的Idr3做,后面接触到Idr4后,决定以后所有项目都使用.NetC ...
    
			
    6. 
						
  6. MapReduce实战1
			
    MapReduce编程规范: (1)用户编写的程序分成三个部分:Mapper,Reducer,Driver(提交运行mr程序的客户端) (2)Mapper的输入数据是KV对的形式(KV的类型可自定义) ...
    
			
    7. 
						
  7. 【LeetCode】167. Two Sum II - Input array is sorted
			
    Difficulty:easy  More:[目录]LeetCode Java实现 Description Given an array of integers that is already sor ...
    
			
    8. 
						
  8. cv2 与 matplotlib 的 Bug 记录
			
    cv2 的 imread 无法读取中文路径 解决方案: img = cv2.imdecode(np.fromfile(image_path,dtype=np.uint8),cv2.IMREAD_COL ...
    
			
    9. 
						
  9. Java 多线程 - synchronize 关键字
			
    目录 Java 多线程 - synchronize 关键字 Java 多线程 - synchronize 关键字 学习自 http://cmsblogs.com/?p=2071 https://www ...
    
			
    10. 
						
  10. BZOJ 3621: 我想那还真是令人高兴啊 计算几何 复数
			
    https://www.lydsy.com/JudgeOnline/problem.php?id=3621 给定两个三角形,其中一个可以通过以某点为中心旋转并放缩的方式得到另一个,求这个中心 http ...
    
			
    11.