美文网首页
(转) js原生事件封装

(转) js原生事件封装

作者: lwz4070 | 来源:发表于2018-07-26 09:53 被阅读0次

第一部分 event 添加事件,删除事件,以及冒泡的屏蔽,并都做了兼容性的处理

<span style="font-size:24px;">var event = {
    //添加句柄  添加事件
    addHandler:function(element,type,handler){
        //ele 元素
        //type 事件类型
        //handler 处理事件的函数程序
        if (element.addEventListener) {
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {
            element.attachEvent('on'+type,handler);
        }else{
            element['on'+type]=handler;
        }
    },
    //删除句柄  删除事件
    removeHandler:function(element,type,handler){
        if (element.removeEventListener) {
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {
            element.detachEvent('on'+type,handler);
        }else{
            element['on'+type] = null;
        }
    },
    //兼容event
    getEvent:function(event){
        return event?event:window.event;
    },
    //获取事件类型
    getType:function(event){
        return event.type;      //不存在浏览器兼容的问题
    },
    //获取事件目标
    getElement:function(event){
        return event.target || event.srcElement;
    },
    //阻止事件冒泡
    preventDefault:function(event){
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    },
    //阻止事件的默认行为
    stopPropagation:function(event){
        if (event.stopPropagation) {
            event.stopPropagation();
        }else{
            event.cancleBubble = true;
        }
    }
}
</span>

第二部分 getByClass 对原生获取class的封装


<p></p><pre name="code" class="javascript"><span style="font-size:24px;">//封装通过class取元素
function getByClass(className,parent){
    //className 类名  必须
    //parent父元素   可选
    //对父元素进行处理
    var oParent = parent ? document.getElementById(parent):document,
    eles = [],
    elements = oParent.getElementsByTagName('*');
    for(var i = 0 , l = elements.length ; i < l ; i ++){
        if(elements[i].className == className){
            eles.push(elements[i]);
        }
    }
    return eles;
}
</span>

第三部分 鼠标拖拽的封装

<pre name="code" class="javascript"><span style="font-size:24px;">//拖拽效果
//windown.onload = drag;
 
function drag(){
    var oTitle = getElementByClass('login_logo_webqq','loginPanel')[0];
    oTitle.onmousedown = fnDown;
}
function fnDown(event){
    event = event || window.event;
    var oDrag = document.getElementById('loginPanel'),
        //光标按下时光标和面板之间的距离
        disX = event.clientX - offsetLeft,
        disY = event.clientY - offsetTop;
    //移动
    document.onmousemove = function(event){
        event = event || window.event;
        fnMove(event,disX,disY);
    }
    //释放鼠标
    document.onmouseup = function(){
        document.onmousemove = null;    //卸载事件
        document.onmouseup = null;      //卸载本身
    }
}
function fnMove(e,posX,posY){
    var oDrag = document.getElementById('loginPanel'),
        l = e.clientX - posX,
        t = e.clientY - poxY;
        winW = document.documentElement.clientWidth || document.body.clientWidth,   //获取窗口的宽和高
        winH = document.documentElement.clientHeight || document.body.clientHeight,
        maxW = winW - oDrag.offsetWidth,
        maxH = winH - oDrag.offsetHeight;
 
    //解决拖拽超出边界的问题
    if (l<0) {
        l = 0 ;
    }else if (l > maxW) {
        l = maxW;
    }
    if (t < 0) {
        t = 0;
    }else if (t > maxH) {
        t = maxH;
    }
    oDrag.style.left = l + 'px';
    oDrag.style.top = t + 'px';
}</span>

相关文章

  • (转) js原生事件封装

    第一部分 event 添加事件,删除事件,以及冒泡的屏蔽,并都做了兼容性的处理 第二部分 getByClass 对...

  • js中Scroll家族的封装和使用

    原生js对window滚动事件封装: 代码: 用法:

  • 3 jQuery03 事件

    1、jQuery事件发展史: (1).jQuery事件底层封装的都是原生js中的addEventListener(...

  • 20、jQuery 事件机制

    20、jQuery 事件机制 原生js事件与jQuery事件: (1)用原生的js给div注册事件 原生js注册相...

  • React Native Android 音量设置

    封装原生模块,Android代码: JS端,AudioAndroid.js: 使用:

  • 原生JS封装查找元素节点的方法

    原生JS封装查找父元素节点的方法 原生JS封装查找兄弟元素节点的方法 插入子节点方法 12 2 divsiv...

  • JS部分

    原生JS 事件(冒泡、捕获) 变量、作用域 函数 对象 面向对象OOP(闭包、封装、继承) 正则表达式 Ajax(...

  • 基于原生JS封装的Modal对话框插件

    基于原生JS封装Modal对话框插件 原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架...

  • promise封装原生ajax、jqueryAjax、axios

    原生js的ajax封装+promise 将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用...

  • jQuery

    jQuery简介 jQuery其实就是原生JS封装之后的一种方法。比起原生JS的操作要方便许多,原生JS的DOM操...

网友评论

      本文标题:(转) js原生事件封装

      本文链接:https://www.haomeiwen.com/subject/tumvmftx.html