如何给鼠标JS事件绑定的函数传变量参数，tabs[i].onmouseover = showTab()。

Question

我的无效传法：tabs[i].onmouseover = showTab(vtabs, vcontents);

var vtabs = document.getElementsByClassName('tab-head')[0].getElementsByTagName('h2'),
    vcontents = document.getElementsByClassName('tab-content')[0].getElementsByTagName('div');

            function changeTab(tabs, contents) {
                for(var i = 0, len = tabs.length; i < len; i++) {
                    tabs[i].onmouseover = showTab(vtabs, vcontents);
                   
                }
            }

            function showTab(tabs, contents) {
                for(var i = 0, len = tabs.length; i < len; i++) {
                    if(tabs[i] === this) {
                        tabs[i].className = 'selected';
                        contents[i].className = 'show';
                    } else {
                        tabs[i].className = '';
                        contents[i].className = '';
                    }
                }
            }

            changeTab(vtabs, vcontents);

htm代码

<div class="tab-head">
            <h2 class="selected">1</h2>
            <h2>2</h2>
            <h2>3</h2>
        </div>
        <div class="tab-content">
            <div class="show">content1</div>
            <div>content2</div>
            <div>content3</div>
        </div>

css代码

            h2 {
                border-top: solid cornflowerblue 1px;
                border-left: solid cornflowerblue 1px;
                width: 50px;
                height: 25px;
                margin: 0;
                float: left;
                text-align: center;
            }
            
            .tab-content {
                border: solid cornflowerblue 1px;
                width: 152px;
                height: 100px;
            }
            
            .tab-content div{
                display: none;
            }
            
            .selected {
                background-color: cornflowerblue;
            }
            
            .tab-content .show{
                display: block;
            }

问题描述

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

abs[i].onmouseover = showTab(vtabs, vcontents) 这么写是把showTab的返回值作为事件回调。
abs[i].onmouseover = showTab.bind(abs[i],vtabs, vcontents)

Answer 2

tabs[i].onmouseover = showTab(vtabs, vcontents);

改成：

tabs[i].onmouseover = showTab.bind(null, vtabs, vcontents);

Answer 3

传参是不可能传参的～
onmounseover的回调函数只有一个参数event。

按照你的想法，可以考虑给每个tab增加一个属性，然后把content作为值。
例如tabs[i].contents = contents。
然后在onmouseover回调函数中通过this.contents访问。
（另外，你的代码是有问题的，for循环绑定事件的时候要考虑闭包问题的）

Answer 4

xxx.onclick = function(){

    fjslakfja(参数)

}