document.body.onload绑定函数调用返回[object Event]问题解决咨询

问题原因 #

当函数被绑定为DOM事件（比如document.body.onload）的回调时，浏览器触发事件会默认把对应的**事件对象（Event）**作为第一个参数传入回调，因此你拿到的参数y实际是事件对象，alert时就会显示[object Event]。
另外你使用的document.body.onload = function myfunction(y) {}属于命名函数表达式，函数名myfunction仅在函数内部可访问，不会暴露到全局作用域，你在外部直接调用myfunction(x)在严格模式或部分浏览器中会抛出变量未定义的错误。

解决方法 #

方法1：事件回调中主动调用目标函数 #

在onload绑定的匿名回调函数内部，主动调用你的业务函数并传入自定义参数：

<body>
<script>
function myfunction(y) {
    alert(y);
}

var x = "1";
document.body.onload = function() {
    // 页面加载完成后主动调用函数，传入你需要的参数
    myfunction(x);
}
</script>
</body>

方法2：用bind预绑定参数 #

使用Function.prototype.bind方法预先把你需要的参数绑定到函数上，绑定的参数优先级高于事件默认传入的事件对象：

<body>
<script>
function myfunction(y) {
    alert(y);
}

var x = "1";
// bind第一个参数指定函数内的this指向，不需要可以传null，后续参数为预传入的入参
document.body.onload = myfunction.bind(null, x);
</script>
</body>

方法3：同时保留事件对象和自定义参数 #

如果你后续需要用到onload的事件对象，可以调整函数参数顺序，在匿名回调中同时传入事件对象和自定义参数：

<body>
<script>
// 第一个参数接收事件对象，第二个参数接收自定义值
function myfunction(loadEvent, y) {
    console.log('页面加载事件对象：', loadEvent);
    alert(y);
}

var x = "1";
document.body.onload = function(event) {
    myfunction(event, x);
}
</script>
</body>

内容的提问来源于stack exchange，提问作者nima