• 欢迎访问少将博客,学会感恩,乐于付出,珍惜缘份,成就彼此、推荐使用最新版火狐浏览器和Chrome浏览器访问本网站。
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏少将博客吧
  • 欢迎加博主微信:jiang_shaobo

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

Web前端 admin 2年前 (2017-04-02) 216次浏览 已收录 0个评论 扫描二维码

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

喜欢 (0)
[🍬谢谢你请我吃糖果🍬🍬~]
分享 (0)
关于作者:
少将,关注Web全栈开发、项目管理,持续不断的学习、努力成为一个更棒的开发,做最好的自己,让世界因你不同。
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址