用javascript获取HTML的button元素的id后，怎么使用javascript给这个元素添加响应函数

Posted 2023-05-07

绑定事件响应并不是必须使用id，看你的描述在此之前你已经获得了这个元素？

假设要绑定的元素为btn，要绑定的事件为鼠标单击，则：

btn.onclick = function()...;    // 直接关联事件响应
btn.addEventListener(\'click\', function(e)..., false);    // 高级浏览器支持
btn.attachEvent(\'onclick\', function()...);    // 低版本IE支持

通过如上三种方式可在btn上绑定click的事件响应，区别：第一种直接绑定，如果此前btn上有已经绑定的响应函数，则会被覆盖；后两种是注册事件响应的方式，可注册多个响应函数，彼此互不影响。

如果有使用某些框架（例如jQuery等），则可使用框架封装好的兼容性方法来注册事件响应。

参考技术A <script type="text/javascript">
window.onload = function()
    var myButton = document.getElementById("myButton");
    // 点击
    myButton.onclick = function()
        alert("Hello World");
        // 其它代码...
    ;
    // 鼠标经过
    myButton.onmouseover = function()
        // 代码...
    ;
    // 其它事件
    // ...
;
</script>

<input type="button" id="myButton" value="按钮" />

参考技术B var btn = document.getElementById("button");
btn.onclick = function() alert("click!"); ;

用javascript实现tab切换

html代码：

    <div id="btn">
        <input type="button" value="tab1" class="active">
        <input type="button" value="tab2">
        <input type="button" value="tab3">
        <div style="display:block;">
            111111
        </div>
        <div>
            222222
        </div>
        <div>
            333333
        </div>        
    </div>

 

css代码：

        .active{
            background:yellow;
        }

        #btn div {
            display: none;
            width:200px;
            height:200px;
            border: 1px solid #000;
        }

javascript代码：

    <script>
        window.onload =function(){
            var btn=document.getElementById(‘btn‘);
            var tab=btn.getElementsByTagName(‘input‘);
            var box1=btn.getElementsByTagName(‘div‘);
            for(var i=0;i<tab.length;i++){
                tab[i].index=i;
                tab[i].onclick=function(){
                     for(var i=0;i<tab.length;i++){ //再次遍历是为了清空样式
                        tab[i].className=‘‘;
                        box1[i].style.display=‘none‘;

                    }
                    this.className= ‘active‘; //给当前点击按钮添加active类
                    box1[this.index].style.display=‘block‘;
                }
            }

        };

    </script>

实现效果：