javascript - 我想用 addEventListener 复制它

Question

我很抱歉，如果这个问题有点宽泛，伙计们，但我已经尝试了一切，但我无法用一些东西来代替它(这不是我的，我只是使用它):

    function onlyNum(evt){

        evt = window.event;
        var charCode = (evt.which) ? evt.which : evt.keyCode
        if (charCode > 31 && (charCode < 48 || charCode > 57)){
            return false;
        }

        return true;
    }

// this INPUT will not accept anything but numbers now.
<input type="text" id="idInput" onKeyPress="return onlyNum(event)">

这样:

    function onlyNum(evt){

    evt = window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }

    return true;
}

// this INPUT's with this event listeners will just acept numbers now.
// like this code is cleaner since you just need to make a list of ids that will have this listeners.
var input = document.getElementById('idTest');
input.addEventListener('keyDown', onlyNum, false);

我找不到将事件传递给函数和“返回”部分的方法。抱歉，我什至不知道如何描述它，也许这就是为什么我找不到有关此问题的任何信息......

Answer 1

将通用事件处理程序与 addEventListener() 或 attacheEvent() 结合使用时，不能仅返回 false 来阻止默认操作就像将事件处理程序放在 HTML 中一样。相反，您需要在大多数浏览器中调用 evt.preventDefault() 以及 evt.stopPropagation() 或设置 window.event.returnValue = false > 和 window.event.cancelBubble = true 在旧版本的 IE 中。

为了简单且跨平台地做到这一点，我开发了一个 addEvent() 函数，它可以为您完成所有跨平台工作(包括 IE6、IE7、IE8)。因此，使用它来添加事件处理程序，您要做的就是:

addEvent("idTest", "keydown", onlyNum);​

工作演示:http://jsfiddle.net/jfriend00/2ATmz/ .

这是使用新事件函数的代码:

function onlyNum(evt){
    var charCode = (evt.which) ? evt.which : evt.keyCode
    if (charCode > 31 && (charCode < 48 || charCode > 57)){
        return false;
    }
    return true;
}

addEvent("test", "keydown", onlyNum);​

并且，这是跨平台事件函数:

// refined add event cross browser
function addEvent(elem, event, fn) {
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }


    // avoid memory overhead of new anonymous functions for every event handler that's installed
    // by using local functions
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // set the this pointer same as addEventListener when fn is called
        // and make sure the event is passed to the fn also so that works the same too
        var ret = fn.call(elem, window.event);   
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
    } else {
        elem.attachEvent("on" + event, attachHandler);
    }
}

注意:我稍微修改了 onlyNum()，因为此事件处理函数始终传递事件对象(您不必针对 IE 以不同方式处理事情)。