Web前端-JavaScript--监听 解除监听 对象模块化封装

 

事件监听

1.自己写的

*   封装方法 解决传统添加事件的层叠覆盖问题
*
*
*  方法的参数:
*       1.元素
*       2.事件名称(不带on的事件名称)
*       3.事件驱动函数

//    console.log(box.onclick);//元素如果没有绑定过该事件
    //那么获取事件返回null
    function addEventListener(ele,eventName,fn) {
//        先获取老事件
//        ele["on"+eventName]=fn;
        var oldEvent=ele["on"+eventName];

        if(oldEvent==null){
//            没有老事件
//            直接绑定新事件
            ele["on"+eventName]=fn;
        }else{
//            如果有老事件

            ele["on"+eventName]=function () {
//                老事件代码
                oldEvent();
//                新事件代码
                fn();
            }
        }
    }
//        绑定事件
    addEventListener(box,"click",function () {

            alert("第一次点击事件")
    })
    addEventListener(box,"click",function () {

        alert("第二次点击事件")
    })

//    十万行代码

    addEventListener(box,"click",function () {

        alert("第三次点击事件")
    })

 

 2.系统给的

事件绑定的方式:
    元素.addEventListener(不带on的事件名称,事件驱动函数,布尔值)
            布尔值放到后面讲  现在不用
        兼容性:
            谷歌/火狐/IE9+  可以使用

            IE8及以下 方法不存在 是undefined

btn.addEventListener("click",function () {
        alert("锦帽貂裘，千骑用康王。")
    })
    btn.addEventListener("click",function () {
        alert("持节云中，三金葡萄糖。")
    })

    兼容问题额的另一个绑定方式:
       元素.attachEvent("带on的事件名称",事件驱动函数)

      兼容性: IE6789(10) 都是可以使用的
        谷歌/火狐/IE11  该方法为undefined

btn.attachEvent("onclick",function () {
        alert("借问酒家何处有")
    })
    btn.attachEvent("onclick",function () {
        alert("牧童说:你干啥玩意")
    })

 

兼容性封装

    参数:
        1.元素

        2.不带on的事件名称

        3.事件驱动函数

function addEvent(ele,eventName,fn) {
        if(ele.attachEvent!=undefined){
//            IE6789(10)
            ele.attachEvent("on"+eventName,fn);

        }else if(ele.addEventListener!=undefined){
            //谷歌/火狐/IE11
            ele.addEventListener(eventName,fn);

        }else{
//            执行到这的 几乎没有 极其特殊  执行自己封装的 解决覆盖问题的代码
            var oldEvent=ele["on"+eventName];
            if(oldEvent==null){
                //如果没有老事件
                ele["on"+eventName]=fn;
            }else{
//            如果有老事件
                ele["on"+eventName]=function () {
//                老事件代码
                    oldEvent();
//                新事件代码
                    fn();
                }
            }
        }
    }

    addEvent(btn,"click",function () {
        alert("借问酒家何处有")
    })
    addEvent(btn,"click",function () {
        alert("牧童说:你干啥玩意")
    })

 事件解绑

用什么绑定的  就用什么解绑

1.
    元素.onclick绑定的
    就用元素.onclick=null解绑

2.元素.addEventListener绑定的事件
    就用元素.removeEventListener解绑

        元素.removeEventListener("不带on的要解绑的事件名称",已经定义好有名字的那个驱动函数)

3.元素.attachEvent绑定的事件
    就用元素.detachEvent()解绑
        元素.detachEvent("带on的要解绑的事件名称,已经定义好有名字的那个驱动函数")

   解绑事件的兼容性和绑定事件的 是一样的

 function myevent() {
        alert("我是addEventListener绑定的点击事件")
    }
    function mytach() {
        alert("我是attach绑定的点击事件")

    }
    function show() {
        alert("我是点击事件")
    }

    btnArr[0].onclick=function () {
//             on开头绑定事件的方式
        /*box.onclick=function () {
            alert("我可以点击啦!!!")
        }*/

//        box.addEventListener("click",myevent)
//        box.attachEvent("onclick",mytach)

//        addEvent(box,"click",show);

//        box.addEventListener("click",show);
        box.onclick=show;

    }

    btnArr[1].onclick=function () {
//        box.onclick=null;
//        box.removeEventListener("click",myevent)
//        box.detachEvent("onclick",mytach);

        removeEvent(box,"click",show);

    }

关于解绑事件的兼容性封装'

 function removeEvent(ele,eventName,fn) {
//        先判断是否使用的onclick方式绑定的
        if(ele["on"+eventName]){
//            执行到此处 表示 通过on绑定了一个事件
            ele["on"+eventName]=null;

        }else if(ele.detachEvent!=undefined){
            ele.detachEvent("on"+eventName,fn);
        }else {
            ele.removeEventListener(eventName,fn);
        }

    }

 

对象模块化封装

<script>

    var itszt={
        dom:{
            getAllSibling:function (ele) {
                var siblingArr=[];
                var childArr=ele.parentNode.children;
                for(var i=0;i<childArr.length;i++){
                    if(childArr[i]!=ele){
                        siblingArr.push(childArr[i])

                    }

                }

                return siblingArr;

            },
            getFirstChild:function (parentNode) {
                return parentNode.firstElementChild || parentNode.firstChild;

            }
            //...



        },
        style:{
            css:function (ele,json) {
                //   链式编程
                ele.style.cssText=JSON.stringify(json)
                    .slice(1,s1.length-1)
                    .replace(/"/g,"")
                    .replace(/,/g,";");

            },
            //...


        },
        html:{

        },
        event:{
            add:function (ele,eventName,fn) {
                if(ele.attachEvent!=undefined){
//            IE6789(10)
                    ele.attachEvent("on"+eventName,fn);

                }else if(ele.addEventListener!=undefined){
                    //谷歌/火狐/IE11
                    ele.addEventListener(eventName,fn);

                }else{
//            执行到这的 几乎没有 极其特殊  执行自己封装的 解决覆盖问题的代码
                    var oldEvent=ele["on"+eventName];
                    if(oldEvent==null){
                        //如果没有老事件
                        ele["on"+eventName]=fn;
                    }else{
//            如果有老事件
                        ele["on"+eventName]=function () {
//                老事件代码
                            oldEvent();
//                新事件代码
                            fn();
                        }
                    }
                }
            },
            remove:function (ele,eventName,fn) {
//        先判断是否使用的onclick方式绑定的
                if(ele["on"+eventName]){
//            执行到此处 表示 通过on绑定了一个事件
                    ele["on"+eventName]=null;

                }else if(ele.detachEvent!=undefined){
                    ele.detachEvent("on"+eventName,fn);
                }else {
                    ele.removeEventListener(eventName,fn);
                }

            }

        },




    }

    
    
//    console.log(itszt.event.add);


</script>