【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装
// 事件框架 (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);
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
Python全栈工程师(异常(基础))
ParisGabriel 每天坚持手写一天一篇 决定坚持几年 为了梦想为了信仰 Python人工智能从入门到精通 补充:包的相对导入 只对后两种导入方式有用 前两次改进的学生管理系统在20课中 已补充 异常(基础)except: 什么是错误: 是指由于逻辑或语法等导程序无法正常执行的问题 什么是异常: 是程序出错的标识符的一种状态 当异常发时 程序不会再向下执行,而转去调用此函数的地方 待处理此错误并恢复为正常状态 异常的作用: 用作信号, 通知上层调用者有错误产生需要处理try 语句: 两种语法: ry-except语句(接受异常通知) try-finally语句try-except 语法 : try: 可能触发异常的语句 except 错误类型1[as 变量1]: 异常处理语句2 except 错误类型2[as 变量2]: 异常处理语句2 except (错误类型3, 错误类型4,...)[as 变量3]: 异常处理语句3 ...... except: 异常处理语句(其他)(匹配所有类型错误) else: 未发生异常语句(可以没有此语句 没...
- 下一篇
【JavaScript框架封装】实现一个类似于JQuery的CSS样式框架的封装
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123779 // CSS 样式框架 (function (xframe) { // 需要参与链式访问的(必须使用prototype的方式来给对象扩充方法)【只要是需要使用到this获取到的元素集合这个变量的时候,这里就是需要进行链式访问的】 xframe.extend({ /** * 给DOM元素设置/取值CSS样式 * @return {*} */ css: function () { // 分为两种情况,一种是取值模式,一种是设置模式 var arg = arguments, len = arg.length, j = this.length - 1; if (len === 0) { // 没有参数的话,就直接返回这个DOM集合 return this; } else if (len === 1) { // 取值模式 if (typeof arg[0] === ...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS8编译安装MySQL8.0.19
- CentOS6,CentOS7官方镜像安装Oracle11G
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- 设置Eclipse缩进为4个空格,增强代码规范
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- CentOS7安装Docker,走上虚拟化容器引擎之路
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Docker安装Oracle12C,快速搭建Oracle学习环境