外观模式（Fade）: 为一组复杂的子系统接口提供一个更高级的统一接口。
/**
* Created by whatled on 2017/4/2.
*/
function addEvent(dom, type, fn) {
// 对于支持DOM2级事件处理程序addEventListener方法的浏览器
if (dom.addEventListener) {
dom.addEventListener(type, fn, false);
// 对于不支持addEventListener方法但支持attachEvent方法的浏览器
} else if (dom.attachEvent) {
dom.attachEvent(’on’ + type, fn);
// 对于不支持addEventListener方法也不支持attachEvent方法，但支持on+’事件名’的浏览器
} else {
dom[’on’ + type] = fn;
}
}
var myInput = document.getElementById(’myinput’);
addEvent(myInput, ’click’, function () {
console.log("绑定第一个事件");
});
addEvent(myInput, ’click’, function () {
console.log("绑定第二个事件");
});
addEvent(myInput, ’click’, function () {
console.log("绑定第三个事件");
});
// 获取事件对象
var getEvent = function (event) {
// 标准浏览器返回event, IE下window.event
return event || window.event;
};
// 获取元素
var getTarget = function (event) {
var event = getEvent(event);
// 标准浏览器下event.target, IE下event.srcElement
return event.target || event.srcElement;
};
// 阻止默认行为
var preventDefault = function (event) {
var event = getEvent(event);
// 标准浏览器
if (event.preventDefault) {
event.preventDefault();
// IE浏览器
} else {
event.returnValue = false;
}
};
documnent.onclick = function (e) {
// 阻止默认行为
preventDefault(e);
// 获取事件源目标对象
if (getTarget(e) !== document.getElementById(’myInput’)) {
hideInputSug();
}
};
// 简约版属性样式方法库
var A = {
// 通过id获取元素
g: function (id) {
return document.getElementById(id);
},
// 设置元素css属性
css: function (id, key, value) {
document.getElementById(id).style[key] = value;
},
// 设置元素的属性
attr: function (id, key, value) {
document.getElementById(id)[key] = value;
},
html: function (id, html) {
document.getElementById(id).innerHTML = html;
},
on: function (id, type, fn) {
document.getElementById(id)[’on’ + type] = fn;
}
};
A.css(’box’, ’background’, ’red’); // 设置css样式
A.attr(’box’, ’className’, ’box’); // 设置class
A.html(’box’, ’这是新添加的内容’); // 设置内容
A.on(’box’, ’click’, function () {
A.css(’box’, ’width’, ’500px’);
});
