Pytorch image solr hive vue架构 后台界面 java通用版qq浏览器下载 java获取字符串 plsql连接mysql数据库 kubernetes视频 python输入输出 python教程推荐 java继承 javalabel java实现 java入门教程 java迭代器 java创建对象 linux装机 图吧导航怎么样 网站数据分析工具 微信签名一句话至自己 冬青鼠 风火云 战地联盟辅助 野德天赋 怎么设置迅雷为默认下载器 流程图工具 cf小号 vc运行库合集 qq悄悄话怎么知道对方是谁 ps怎么羽化图片边缘 mysql密码重置 shell数组遍历 js添加节点 dnf精灵骑士加点 战网更新不动 决战者加点 挂卡 如何查看路由器密码
当前位置: 首页 > 学习教程  > 

vue项目原生js事件绑定与兼容处理

2020/10/16 18:04:04 文章标签: js原生点击事件

首先创建bindlistener.js文件放在如下图 其内容如下: /* * 事件绑定兼容兼容 Mozilla 和 IE 等处理 * 使用示例 type 事件 function 方法 object 事件对象 * EventUtil.addHandler(click, function, object);//绑定方法 * EventUtil.removeHandler(click,f…

首先创建bindlistener.js文件放在如下图
在这里插入图片描述
其内容如下:

/*
*  事件绑定兼容兼容 Mozilla 和 IE 等处理  
*  使用示例 type 事件 function 方法 object 事件对象
*  EventUtil.addHandler('click', function, object);//绑定方法 
*  EventUtil.removeHandler('click',function,object);//解除绑定
*/ 
export const EventUtil = {
    addHandler : function(type, fn, element){
        this.checked(type, fn, element);
        if(element.addEventListener){
            element.addEventListener(type, fn, false);
        }else if(element.attachEvent){
            element.attachEvent('on' + type, fn);
        }else{
            element['on' + type] = fn;
        }
    },
    removeHandler : function(type, fn, element){
        this.checked(type, fn, element);
        if(element.removeEventListener){
            element.removeEventListener(type, fn, false);
        }else if(element.detachEvent){
            element.detachEvent('on' + type, fn);
        }else{
            element['on' + type] = null;
        }
    },
    checked: function(type, fn, element){
        if(!(typeof(type) == 'string')) throw new Error("The parameter is required and the parameter type is String");
        if(!(fn instanceof Function)) throw new Error("The parameter is required and the parameter type is Function");
        return element = element ? element : document;
    }
}

其次是在使用的vue文件里进行引用,如下:

//导入js
import { EventUtil } from '@/assets/js/bindlistener'
created(){
    // 使用
    EventUtil.addHandler('beforeunload',()=>{
    //do something
    },window);
}

本文链接: http://www.dtmao.cc/news_show_300371.shtml

附件下载

相关教程

    暂无相关的数据...

共有条评论 网友评论

验证码: 看不清楚?