Question

所以我有以下JavaScript：

<script language=JavaScript>
    function reload(form){
        var val=form.profile.options[form.profile.options.selectedIndex].value;
        self.location='?profile=' + val ;
    }
    function init(){
        var form = document.getElementById("myform");
        document.getElementById("id_profile").onchange = reload(form);
    }
    window.onload = init;
</script>

然后它不断地重新加载自己。这是预期的。但是如何分配reload并将函数实例传递给它？

我能做到：

<script language=JavaScript>
    function reload(){
        var form = document.getElementById("myform");
        var val=form.profile.options[form.profile.options.selectedIndex].value;
        self.location='?profile=' + val ;
    }
    function init(){
        document.getElementById("id_profile").onchange = reload;
    }
    window.onload = init;
</script>

但如果我有更多表格怎么办？或者我想说我想在具有不同表单名称的多个页面上重用reload。

我想避免在HTML标记中设置onchange：

onchange="reload(this.form)"

如果可以的话？

谢谢！

Answer 1

但如果我有更多表格呢？

您可以为表单中的所有profile元素分配相同的函数，并使用this引用在函数内接收更改事件的元素。

<script type="text/javascript">
    function reload(){
        // In here, "this" is the element that received the event

        var val = this.options[ this.options.selectedIndex ].value;
        self.location='?profile=' + val ;
    }
    function init(){
        var len = document.forms.length;
        while( len-- ) {
            document.forms[ len ].profile.onchange = reload;
        }
    }
    window.onload = init;
</script>

Answer 2

您可以创建一个函数来返回重载函数的函数（闭包）。

function reload(form){
    return function(){
      var val=form.profile.options[form.profile.options.selectedIndex].value;
      self.location='?profile=' + val ;
    }
}
function init(){
    var form = document.getElementById("myform");
    document.getElementById("id_profile").onchange = reload(form);
}
window.onload = init;

将onchange分配给对象并传递参数

2 个答案: