Javascript 将事件附加到输入框和选择框_Javascript_Html_Dom_Javascript Events

Javascript 将事件附加到输入框和选择框

javascript html dom

Javascript 将事件附加到输入框和选择框,javascript,html,dom,javascript-events,Javascript,Html,Dom,Javascript Events,我似乎无法理解如何将事件（动态）附加到文本框和选择框：错误：需要对象，第19行 <!DOCTYPE html> <html> <head> <script type="text/javascript"> window.onload = function fnOnLoad() { var t = document.getElementsByTagName('SELEC

我似乎无法理解如何将事件（动态）附加到文本框和选择框：

错误：需要对象，第19行

<!DOCTYPE html>
<html>

    <head>
        <script type="text/javascript">
            window.onload = function fnOnLoad() {
                var t = document.getElementsByTagName('SELECT');

                var i;
                for (i = 0; i < t.length; i++) {
                    alert(t[i].id)

                    document.getElementById(t[i].id).attachEvent('onfocus', function () {
                        document.getElementById(this.id).style.backgroundColor = "#FFFF80"
                    })
                    document.getElementById(t[i].id).attachEvent('onblur', function () {
                        document.getElementById(this.id).style.backgroundColor = "#FFFFFF"
                    })

                }
            }
        </script>
    </head>

    <body>
        <input id="t1" type="text">
        <input id="t2" type="text">
        <input id="t3" type="text">
        <br>
        <br>
        <select id="d1"></select>
        <select id="d2"></select>
        <select id="d3"></select>
    </body>

</html>


window.onload=函数fnOnLoad（）{
var t=document.getElementsByTagName（'SELECT'）；
var i；
对于（i=0；i

为什么不使用jquery并使用bind函数：例如：

var element = $('#myElementId') // equivalent to document.getElementById
element.bind('click', function() {
    // when the element is clicked, it will do what ever you write here
    alert('i was clicked');
});

您可以使用jquery将此代码放入onload或onready函数中，如下所示：

$(function() {
    var element = $('#myElementId') // equivalent to document.getElementById
    element.bind('click', function() {
        // when the element is clicked, it will do what ever you write here
        alert('i was clicked');
    }); 
}); // this is the onload

或


函数fnOnLoad（）{
var t=document.getElementsByTagName（'INPUT'）；
对于（变量i=0；i

您需要在DOM准备就绪时运行此操作，而不是在onload事件中运行此操作。看看这个：顺便说一句，您可以通过jquery选择器获取所有select元素来绑定它们，这样您就可以使用

$（'myElementId'）

而不是

$（'select'）

来获取文档中的所有select元素

$(document).ready(function() {
    var element = $('#myElementId') // equivalent to document.getElementById
    element.bind('click', function() {
        // when the element is clicked, it will do what ever you write here
        alert('i was clicked');
    }); 
}); // this is the on ready

<script type="text/javascript">

function fnOnLoad() {

    var t = document.getElementsByTagName('INPUT');
    for (var i = 0; i < t.length; i++) {
            t[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4';};
            t[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

    var d = document.getElementsByTagName('SELECT');
    for (var i = 0; i < d.length; i++) {
            d[i].onfocus = function() { this.style.backgroundColor = '#FFFFC4'; };
            d[i].onblur = function() { this.style.backgroundColor = '#FFFFFF'; };
    }

}
</script>