// 事件框架
(function (xframe) {
// 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)
xframe.extend({
/**
* 实现一个浏览器的基本事件的绑定
* @param type
* @param fn
* @return {on}
*/
on: function (type, fn) {
// 注意这里的初始的下标编号是长度减一
var i = this.length - 1;
// 可以实现兼容版本的IE浏览器和W3c浏览器的支持
if (document.addEventListener) {
// w3c(这里使用的方式是从后向前遍历, 使得每一个DOM加载完毕之后再去添加事件)
for (; i >= 0; i--) {
this[i].addEventListener(type, fn, false);
}
} else if (document.attachEvent) {
// IE
for (; i >= 0; i--) {
this[i].attachEvent('on' + type, fn);
}
} else {
// 其他的浏览器
for (; i >= 0; i--) {
// 获取json数据的两种方式,绑定事件的方式也可以
this[i]['on' + type] = fn;
}
}
return this;
},
/**
* 实现事件的解除绑定
* @param type
* @param fn
* @return {un}
*/
un: function (type, fn) {
// 注意这里的初始下标编号
var i = this.length - 1;
if (document.removeEventListener) {
// W3c
for (; i >= 0; i--) {
this[i].removeEventListener(type, fn, false);
}
} else if (document.detachEvent) {
// IE浏览器
for (; i >= 0; i--) {
this[i].detachEvent(type, fn);
}
} else {
// 其他浏览器的话,就直接默认绑定的所有事件置为null
for (; i >= 0; i--) {
// 移出所有绑定的事件
this[i]['on' + type] = null;
}
}
return this; },
/**
* 实现单个元素的事件绑定
* @param fn
* @return {click}
*/
click: function (fn) {
this.on('click', fn);
return this; },
/**
* 实现鼠标移动进来和出去的事件响应(鼠标悬浮事件)
* @param fnOver
* @param fnOut
* @return {hover}
*/
hover: function (fnOver, fnOut) {
var i = this.length;
// 还是采用的是从后向前遍历的方式
for (; i >= 0; i--) {
if (fnOver && typeof fnOver === 'function') {
this.on('mouseover', fnOver);
}
if (fnOut && typeof fnOut === 'function') {
this.on('mouseout', fnOut);
}
}
return this;
},
/**
* 如果被选元素可见,则隐藏这些元素,如果被选元素隐藏,则显示这些元素。
* toggle方法,切换,接收任意个参数,不断在参数间循环.例:点击显示隐藏
* @return {toggle}
*/
toggle: function () {
// 实现一个事件的切换f1, f2
var self = this,
_arguments = arguments,
i = 0,
len = this.length; // 把所有的事件响应函数存起来
for (; i < len; i++) {
addToToggle(this[i]);
} /**
* 鼠标点击之后逐个调用自己绑定的事件
* @param obj
*/
function addToToggle(obj) {
// 定义一个私有的计数器
var count = 0;
// 添加事件
self.on('click', function () {
// 使用call去修改this的指向(这里的主要作用是去切换,轮巡切换状态)
_arguments[count++ % _arguments.length].call(obj);
});
} return this;
}
}); // 不需要参与链式访问的
xframe.extend(xframe, {
/**
* 获取事件对象
* @param event
* @return {Event}
*/
getEvent: function (event) {
return event ? event : window.event;
},
/**
* 获取触发事件的元素
* @param event
* @return {*|Element|Object}
*/
getTarget: function (event) {
var event = this.getEvent(event);
return event.target || event.srcElement;
},
/**
* 阻止事件冒泡
* @param event
*/
stopPropagation: function (event) {
var event = this.getEvent(event);
if (event.stopPropagation) {
// W3c
event.stopPropagation();
} else {
// IE
event.cancelBubble = true;
}
},
/**
* 阻止默认的行为
* @param event
*/
preventDefault: function (event) {
var event = this.getEvent(event);
if (event.preventDefault) {
// w3c
event.preventDefault();
} else {
// IE
event.returnValue = false;
}
},
/**
* 获取鼠标滚轮的运动的详细信息
* @param event
* @return {*}
*/
getDelta: function (event) {
var event = this.getEvent(event);
if (event.wheelDelta) {
// w3c
return event.wheelDelta;
} else {
// ie
// Firefox的值有所不同,因此首先要将这个值的符号反向,然后再乘以40,就可以保证与其它浏览器的值相同了
return -event.detail * 40;
}
}
});
})(xframe);

【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装的更多相关文章

  1. 【JavaScript框架封装】实现一个类似于JQuery的基础框架、事件框架、CSS框架、属性框架、内容框架、动画框架整体架构的搭建

    /* * @Author: 我爱科技论坛 * @Time: 20180715 * @Desc: 实现一个类似于JQuery功能的框架 * V 1.0: 实现了基础框架.事件框架.CSS框架.属性框架. ...

  2. 分析一个类似于jquery的小框架

    在网上下了一个类似于jQuery的小框架,分析源码,看看怎么写框架. 选择器Select //用沙箱闭包其整个代码,只有itcast和I暴漏在全局作用域 (function( window , und ...

  3. 【JavaScript框架封装】实现一个类似于JQuery的DOM框架的封装

    // DOM框架(选择器框架) (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 向现 ...

  4. 【JavaScript框架封装】实现一个类似于JQuery的缓存框架的封装

    // 缓存框架 (function (xframe) { /** * 实现了缓存框架的临时存储功能(内存存储) * @type {{data: Array, get: (function(*): *) ...

  5. 【JavaScript框架封装】实现一个类似于JQuery的动画框架的封装

    // 动画框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  6. 【JavaScript框架封装】实现一个类似于JQuery的选择框架的封装

    // 选择框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({}); // 不需要参与链式访问的 ...

  7. 【JavaScript框架封装】实现一个类似于JQuery的属性框架的封装

    // 属性框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * 获取/设置某一个元素 ...

  8. 【JavaScript框架封装】实现一个类似于JQuery的内容框架的封装

    // 内容框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法) xframe.extend({ /** * .html()用为读 ...

  9. 分析一个类似于jquery的小框架 (2)

    核心构造函数 (function ( window, undefined ) { // 定义Itcast构造函数 function Itcast ( selector ) { return new I ...

随机推荐

  1. 0809MySQL实战系列:大字段如何优化|数据存储结构

    转自https://yq.aliyun.com/articles/59256?spm=5176.100239.blogcont59257.9.5MLR2d 摘要: 背景 线上发现一张表,1亿的数据量, ...

  2. Sigma Function 数学 因子求和

    Sigma function is an interesting function in Number Theory. It is denoted by the Greek letter Sigma ...

  3. 洛谷 P1692 部落卫队

    P1692 部落卫队 题目描述 原始部落byteland中的居民们为了争夺有限的资源,经常发生冲突.几乎每个居民都有他的仇敌.部落酋长为了组织一支保卫部落的队伍,希望从部落的居民中选出最多的居民入伍, ...

  4. 韩国 DBA 博客

    http://mysqldba.tistory.com/ http://cafe.naver.com/mysqlpg http://cafe.naver.com/realmysql http://wi ...

  5. 微博预计要火一阵的SleepSort之Shell及C实现

    今日在微博看到如此奇妙的代码.竟然还有新的sort算法,对于我这样的渣渣必须研究一下,代码例如以下: #!/bin.bash function f() { sleep "$1" / ...

  6. jQuery学习之开篇

    吐槽 近期比較烦,对于一个前端白痴来说,工作方向突然转向前端这块着实让人蛋疼无比.前段时间简单的学习了下EasyUI,算是对其有一个简单的认知了吧.EasyUI的研究过程中发现,假设没有掌握JS.JQ ...

  7. netty 学习记录一

    近期在学习netty相关知识,认为<netty 权威指南>这本书还是挺好的,适合我这样的刚開始学习的人.加上netty本身自带的很多样例,学起来还是挺有兴趣的.简单记录下, 一般serve ...

  8. Java设计模式之从[星际争霸的兵种升级]分析观察者(Observer)模式

    观察者模式定义对象的一种一对多的依赖关系.当一个对象的状态发生改变时.全部依赖于它的对象都会得到通知并被自己主动更新. 一个简单的样例是.在星际争霸的虫族中有一个0基础单位叫做跳狗(Zergling) ...

  9. Tomcat启动时项目反复载入,导致资源初始化两次的问题

    近期在项目开发測试的时候,发现Tomcat启动时项目反复载入,导致资源初始化两次的问题  导致该问题的解决办法: 例如以下图:在Eclipse中将Server Locations设置为"Us ...

  10. hdoj--3488--Tour(KM)

    Tour Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Total Submi ...