一个上课做的demo,通过js来控制元素样式。

点击'点击设置'后的效果

以下是源码：

window.onload = function() {
    function $(id) {
        return document.getElementById(id);
    }

    var $_click = function (element,listener) {
        element.addEventListener('click',listener,false);
    };

    var setcss = $('btn_set'),
        reset = $('btn_reset'),
        close = $('btn_close'),
        chose = $('chose'),
        pcss = $('pcss'),
        btn_red = $('btn_red'),
        btn_green = $('btn_green'),
        btn_blue = $('btn_blue');

    //setcss.addEventListener('click',openMask,false);  
    $_click(setcss,openMask);
    $_click(close,closeM);

    //$_click(btn_red,setCss('background-color','red')); 
    // $('btn_red').onclick  = function () {
    //  pcss.style.background = 'red';
    // }


    function openMask(){
        chose.style.display = "block";
        var sWidth=document.body.scrollWidth;
        var sHeight=document.body.scrollHeight;
        var oMask=document.createElement("p");
            oMask.id="mask";
            oMask.style.height=sHeight+"px";
            oMask.style.width=sWidth+"px";
            document.body.appendChild(oMask);
    }

    function closeM() {
        chose.style.display = "none";
        var oMask = $('mask');
        document.body.removeChild(oMask);
    }

    function setCss(attr,value) {
        if (typeof value == 'number') {
            pcss.style[attr] = value + 'px';
        } else {
            pcss.style[attr] = value;
        }
    }
}

当这段code取消注释后

//$_click(btn_red,setCss('background-color','red'));

页面加载后p直接改变了颜色 未触发点击事件：

点击事件未发生函数就执行了，觉得是回调函数的影响。

当直接添加click事件操作样式正常。

$('btn_red').onclick  = function () {
        pcss.style.background = 'red';
    }

请问各位大大这是什么原因。是因为传入的函数不是引用，而是相当于调用吗？造成的影响。

补充一下全部源码 http://codepen.io/zzzJH/pen/bdzBbZ
位于js中23-27行