javascript : how to distinguish between selected element list and form

Question

这是脚本:http://jsbin.com/itusut/6/edit

你好，我有功能:

function on(t, e, f) {
    if ( e.length ) {
        var l = e.length,
        n = 0;

        for ( ; n < l; n++ ) {
            e[n].addEventListener(t, f, false)
        }
    } else {
        e.addEventListener(t, f, false);
    }
}

如果我们这样做 var handle = document.getElementsByClassName('some-class');然后 handle是一个节点列表。

如果我们这样做 var handle = document.getElementById('an-id');然后 handle是单节点。

问题是，当我选择 <form id="login-form"> 时它返回 array 而不是单个元素。

所以，我的 on功能失败。函数使用elm.length筛选。一切正常，除了<form> .如何解决这个问题？我知道 elm.length 在单个节点上无法正常工作 <form>元素。

你会帮忙吗？非常感谢

Answer 1

表单元素有一个 length 属性(表示表单中字段的数量)。您使用的代码无法准确检测元素是否为 DOM 节点，因此它假定表单是 DOM 节点的集合。

如果您需要绑定(bind)元素，最好始终传入一个数组或类似数组的对象，这样该函数就会始终遍历集合。

这可以像将参数包装在数组中一样简单:

on('click', [formElement], callback);

---

_{on 的更新版本，其中仅支持列表:}

function on(type, elements, callback) {
    var length,
        i;
    length = 0;
    if (elements && elements.length) {
        length = elements.length;
    }
    for (i = 0; i < length; i += 1) {
        elements[i].addEventListener(type, callback, false);
    }
}