【fgm.cc练习4-8】事件练习：封装兼容性添加、删除事件的函数

denguing

于 2019-12-14 14:40:40 发布

阅读量216

点赞数

分类专栏： fgm.cc 文章标签： javascript css html 前端

本文链接：https://blog.csdn.net/DGT4720/article/details/103538479

版权

fgm.cc 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

练习地址：http://www.fgm.cc/learn/lesson4/08.html
在这里插入图片描述

封装：

面向对象的三个基本特征（封装、继承、多态）之一。将现实世界的事物抽象成计算机领域中的对象，具有属性和行为（方法）。这种抽象就是封装。函数（避免全局变量，按需执行，提高代码重用性）就是最简单的封装。
**重要特性：**数据隐藏。正常交互+安全性（“不要告诉我你是怎么做的，做就行。”）
详看：JavaScript的封装

事件处理：

如果用onclick，再写一条，特点就是：会覆盖之前这些的onclick事件。
所以有addEventListener的出现，它不会覆盖之前的事件，但是IE7和IE8没有支持这个方法，另外支持了一个方法attachEvent，实现的功能和addEventListener一样，唯一的区别就是：addEventListener是先添加先执行；而另外一个是后添加先执行。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>事件练习：封装兼容性添加、删除事件的函数</title>
	<link rel="stylesheet" type="text/css" href="8_event.css">
</head>
<body>
	<pre>

&lt;script type="text/javascript"&gt;
var EventUtil = {
	addHandler: function (oElement, sEvent, fnHandler) {
		oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler)	
	},
	removeHandler: function (oElement, sEvent, fnHandler) {
		oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
	},
	addLoadHandler: function (fnHandler) {
		this.addHandler(window, "load", fnHandler)
	}
}
&lt;/script&gt;
	</pre>
	<input type="button" value="毫无用处的按钮">
	<input type="button" value="绑定click">
	<input type="button" value="解除绑定">
	<script type="text/javascript" src="8_event.js"></script>
</body>
</html>

css

pre {
	color: green;
	border: 1px dotted black;
	padding-left: 20px;
	background: #EDEDED;
}
input {
	float: left;
	margin-left: 10px;
}
input:nth-of-type(1) {
	margin-left: 520px;
}

JavaScript

考虑兼容性的封装：

// 封装
var EventUtil = {
	addHandler: function(oElement, sEvent, fnHandler) {
		oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on"+sEvent, fnHandler)
	},
	removeHandler: function (oElement, sEvent, fnHandler) {
		oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler)
	},
	// 给window的load事件添加函数，其实相当于window.onload = function(){} ?
	addLoadHandler: function (fnHandler) {
		this.addHandler(window, "load", fnHandler)
	}
}
EventUtil.addLoadHandler(function(){
	var input = document.getElementsByTagName("input");
	// 其实有点像事件里面还有事件的感觉
	EventUtil.addHandler(input[1],"click",function(){
		EventUtil.addHandler(input[0],"click",fnHandler);
		input[0].value="我可以点击了";
	});

	EventUtil.addHandler(input[2],"click",function(){
		EventUtil.removeHandler(input[0],"click",fnHandler);
		input[0].value="毫无用处的按钮";
	});

	function fnHandler() {
		alert("事件绑定成功！");
	}
});

denguing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【fgm.cc练习4-8】事件练习：封装兼容性添加、删除事件的函数

练习地址：http://www.fgm.cc/learn/lesson4/08.html封装：面向对象的三个基本特征（封装、继承、多态）之一。将现实世界的事物抽象成计算机领域中的对象，具有属性和行为（方法）。这种抽象就是封装。函数（避免全局变量，按需执行，提高代码重用性）就是最简单的封装。**重要特性：**数据隐藏。正常交互+安全性（“不要告诉我你是怎么做的，做就行。”）详看：JavaS...
复制链接

扫一扫

专栏目录