事件的增、删、改、查.js

window.onload=function(){
    // var div=document.querySelector('div');
    // var fun1=function(){
    //     alert(1);
    // }
    // var fun2=function(){
    //     alert(2);
    // }
    // div.addEventListener('click',fun1,false);
    // div.addEventListener('click',fun2,false);
    // div.removeEventListener('click',fun1);
    // div.onclick=function(e,way='1'){
    //     console.log(e,way);
    // }

    //添加事件对象
    // div.onmouseover=function(e){
    //     this.innerText=`x:${e.pageX},y:${e.pageY}`;
    // }

    // div.onmousemove=move;
    // function move(e){
    //     this.innerText=`x:${e.screenX},y:${e.screenY}`;
    // }


/*
    //滚轮事件
    var div=document.querySelector('div');
    function wheel(e){
        var e=e||window.event;      //赋值在IE还是在谷歌里用e（谷歌里可以用e，IE里只能用window.event）
        if(e.preventDefault){       //判断是否有这个函数（IE没有这个函数）
            e.preventDefault();     //阻止元素默认动作；
        }
        else{
            e.returnValue==false;        //IE里阻止元素默认动作（只有IE有）；
        }     
        var ma=e.wheelDelta||e.detail;      //赋值编码，（谷歌和火狐的滑动编码不一样）；
        if(ma==120||ma==-3){                //判断
            console.log('向上');
            div.style.width=div.offsetWidth+20+'px';
        }else if(ma==-120||ma==3){
            console.log('向下');
            div.style.width=div.offsetWidth-20+'px';
            console.log(div.offsetTop);
        }
    }
    if(document.attachEvent){
        document.attachEvent('mousewheel',wheel);
    }else{
        document.addEventListener('mousewheel',wheel);
        document.addEventListener('DOMMouseScroll',wheel);
    }
*/



/*
    //函数封装滚轮事件
    var div=document.querySelector('div');
    function mousewheel(obj,upfun,downfun){
        if(obj.attachEvent){
            obj.attachEvent('mousewheel',wheel);
        }else{
            obj.addEventListener('mousewheel',wheel);
            obj.addEventListener('DOMMouseScroll',wheel);
        }
        function wheel(){
            var e=e||window.event;      //赋值在IE还是在谷歌里用e（谷歌里可以用e，IE里只能用window.event）
            if(e.preventDefault){       //判断是否有这个函数（IE没有这个函数）
                e.preventDefault();     //阻止元素默认动作；
            }
            else{
                e.returnValue==false;        //IE里阻止元素默认动作（只有IE有）；
            }     
            var ma=e.wheelDelta||e.detail;      //赋值编码，（谷歌和火狐的滑动编码不一样）；
            if(ma==120||ma==-3){                //判断如果滚轮向上滚动时要执行的代码   
                upfun();
            }else if(ma==-120||ma==3){          //判断如果滚轮向上滚动时要执行的代码
                downfun();
            }
        }
    }
    mousewheel(div,function(){
        div.style.width=div.offsetWidth+20+'px';
    },function(){
        div.style.width=div.offsetWidth-20+'px';
    });
*/


    //函数封装滚轮事件(添加多个元素)
    
    for(var i=0;i<10;i++){
        var div=document.createElement('div');
        document.body.appendChild(div);
    }
    var divs=document.querySelectorAll('div');
    function mousewheel(obj,upfun,downfun){
        if(obj.attachEvent){
            obj.attachEvent('mousewheel',wheel);
        }else{
            obj.addEventListener('mousewheel',wheel);
            obj.addEventListener('DOMMouseScroll',wheel);
        }
        function wheel(){
            var e=e||window.event;      //赋值在IE还是在谷歌里用e（谷歌里可以用e，IE里只能用window.event）
            if(e.preventDefault){       //判断是否有这个函数（IE没有这个函数）
                e.preventDefault();     //阻止元素默认动作；
            }
            else{
                e.returnValue==false;        //IE里阻止元素默认动作（只有IE有）；
            }     
            var ma=e.wheelDelta||e.detail;      //赋值编码，（谷歌和火狐的滑动编码不一样）；
            if(ma==120||ma==-3){                //判断如果滚轮向上滚动时要执行的代码   
                upfun();
            }else if(ma==-120||ma==3){          //判断如果滚轮向上滚动时要执行的代码
                downfun();                      //执行滚轮向下滚动的代码
            }
        }
    }
    divs.forEach(function(value){               //遍历divs集合      
        mousewheel(value,function(){            //给mousewheel的函数传实际参数（obj,fun1,fun2）
            value.style.width=value.offsetWidth+20+'px';    //value的宽度在当前宽度的基础上增加20px
        },function(){
            value.style.width=value.offsetWidth-20+'px';    //value的宽度在当前宽度的基础上减少20px
        });
    });
    

    
}