您现在的位置是:首页 > 文章详情

【JavaScript框架封装】实现一个类似于JQuery的事件框架的封装

日期:2018-07-18点击:267
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/81123753
// 事件框架 (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);

 

原文链接:https://yq.aliyun.com/articles/647681
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章