// 事件框架
(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. Spring注解@Repository、@Service、@Controller、@Component

    继前几章所讲解的注解中: http://www.cnblogs.com/EasonJim/p/6892280.html http://www.cnblogs.com/EasonJim/p/689974 ...

  2. selenium找到页面元素click没反应

    问题描述:通过调试可以看到控制台已经找到了起诉入口页面元素,可是点击“我是原告”没有反应了,也没有报错 解决办法:登录时是跳进了两层的iframe中,需要跳出iframe才能找到我是原告.

  3. Chrome改动浏览器User Agent

    对浏览器快捷方式右键->改动目标项为 C:\Users\LJ\AppData\Local\Google\Chrome\Application\chrome.exe --user-agent=&q ...

  4. Converter实现Date类型转换

    1.springmvc-config.xml配置 <?xml version="1.0" encoding="UTF-8"?> <beans ...

  5. Xamarin Mono For Android、Monotouch 安装

    一.Windows下面的安装 1. 安装环境介绍:    Win8.1 企业版64位或Win7 64.VS2013 update4 2. 安装jdk    到oracle官方下载jdk-8u45-wi ...

  6. adbd cannot run as root in production builds的解决方法

    部分手机root后,使用adb root会出现这个提示. 原因是root不彻底. adb shell之后进入到$界面,su一下才进入到#. 这个之后可以使用root功能了. 注意到,这个时候exit的 ...

  7. PHP 和 Java 的主要区别有哪些?

    PHP 和 Java 的主要区别有哪些? 其实Java方面我要学的真的还有很多,要是有大项目的机会和经验就好,所以提前我肯定要把基础打扎实. 我要学的还有很多,比如前段,后端,还有linux,还有肯定 ...

  8. SQL Server的自动备份设置及排错记事

    1.启动 SQL Server Management Studio管理器,登录进去. 2.在左侧可以看到这个,我们展开“管理”. 3.展开“管理”后,我们在“维护计划”项目上单击右键,在弹出菜单里选择 ...

  9. lua类实现

    _Account = {} --创建一张借记卡 function _Account:new( tb ) local _Tb = tb or {} setmetatable(_Tb, self) sel ...

  10. NFA

    任意正则表达式都存在一个与之对应的NFA,反之亦然. 正则表达式 ((A*B|AC)D)对应的NFA(有向图), 其中红线对应的为该状态的ε转换, 黑线表示匹配转换 我们定义的NFA具有以下特点: 正 ...