假期JS练习套餐服务-外观模式

外观模式（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’);
});