html 点击执行函数,给元素添加点击事件，打开页面就直接执行了回调函数，未点击。...

一个上课做的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'),

divcss = $('divcss'),

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 () {

// divcss.style.background = 'red';

// }

function openMask(){

chose.style.display = "block";

var sWidth=document.body.scrollWidth;

var sHeight=document.body.scrollHeight;

var oMask=document.createElement("div");

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') {

divcss.style[attr] = value + 'px';

} else {

divcss.style[attr] = value;

}

}

}

当这段code取消注释后

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

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

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

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

$('btn_red').onclick = function () {

divcss.style.background = 'red';

}

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