封装函数重复使用

2020/12/6 21:53:08Chixm50 阅读0 点赞0 评论

比如之前文章里的事件绑定判断，每次都去写判断多不方便，这时可以用个函数把它封装起来

function on() {
        if (oBtn.addEventListener) {
            oBtn.addEventListener('click', function () {
                alert('a');
            });
        } else {
            oBtn.attachEvent('onclick', function () {
                alert('b');
            });
        }
    }

封装函数重复使用
1.首先考虑的是给任何元素都可以加，这时候，oBtn就不能写死了，可以使用传参的方式传一个元素进去（obj）
2.然后就是事件函数，我们不一定每次就是加的点击事件，所以这时候事件也不能写死，同样也是传参的方式去定义（name）,
这里的一个小问题就是有点事件带 on ，有的不带，解决方法可以使用字符串连接的方法把它们连接到一起
3.最后就是我们不一定每次就是在函数里弹窗，这时候function还是不能写死，还是一样的可以使用传参的方式传一个函数进去（fn）
封装如下：

function on(obj,name,fn) {
        if (obj.addEventListener) {
            obj.addEventListener(name, fn);
        } else {
            obj.attachEvent('on'+name, fn);
        }
    }

函数封装的使用：

<body>

<button type="button" id="btn1">按钮</button>
<button type="button" id="btn2">按钮</button>

<script>
    var oBtn=document.getElementById('btn1');
    var oBtn1=document.getElementById('btn2');

    function on(obj,name,fn) {
        if (obj.addEventListener) {
            obj.addEventListener(name, fn);
        } else {
            obj.attachEvent('on'+name, fn);
        }
    }

    //给obtn元素添加一个点击事件
    on(oBtn,'click',function (){
        alert('这是点击效果');
    });


    on(oBtn1,'mouseover',function (){
        alert('这是鼠标移入效果')
    });
</script>