外观模式一般用于对底层代码的封装，解决一些类似浏览器兼容的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#root {
width: 300px;
height: 200px;
background-color: #ff0;
}
</style>
</head>
<body>
<div id="root">
test
</div>
<script>
/*
下面方法实现给document绑定多个事件，不能用on事件
当单击root时正常，单击之外的弹出信息
*/
var ele = document.getElementById(‘root‘);
// 第一个外观模式封装的函数，解决浏览器兼容问题
function addEvent(el, type, fn) {
if (el.addEventListener) { // 如果支持addEventListener DOM2级
el.addEventListener(type, fn);
} else if (el.attachEvent) { // IE9-等 DOM2级
el.attachEvent(type, fn);
} else { // 以上两种都不支持
el[‘on‘ + type] = fn; // DOM1级事件，重复定义会被覆盖
}
}
// 第二个外观模式封装的函数
function definePreventDefault(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false; // IE
}
}
// 第三个外观模式封装的函数
function getTarget(event) {
return event.target || event.srcElement; // IE是event.srcElement
}
function doSth(text) {
// e.preventDefault(); ---IE低版本不支持
// if (e.target !== ele) { // TODO } --- e.target的IE低版本不支持
return function(e) {
const event = e || window.event; // 低版本IE下是window.event
definePreventDefault(event);
console.log(getTarget(event))
if (getTarget(e) !== ele) {
alert(text)
}
}
}
addEvent(document, ‘click‘, doSth("哼"))
addEvent(document, ‘click‘, doSth("哈"))
addEvent(document, ‘click‘, doSth("呵"))
</script>
</body>
</html>
原文：https://www.cnblogs.com/lyraLee/p/11506749.html