javascript - addEventListener ('keydown' ,handlekeydown,false) 与 .onkeydown 以不同方式替换键入的击键

Question

我正在使用“keydown”事件来替换在输入文本框中键入的特定字符。

当我使用时:

document.getElementById('inputText').onkeydown = handleInputTextKeydown;

或等效的 JQuery:

$('#inputText').on('keydown',handleInputTextKeydown);

我得到了预期的结果——例如按键 Shift+i 显示为“í”。

但是，如果我使用 addEventListner 作为 keydown 钩子(Hook):

var tb = document.getElementById('inputText');
tb.addEventListener('keydown', handleInputTextKeydown, false); 

输入文本框同时显示我的替换字符 (í) 和“I”(大写 i)“íI”。

为什么 addEventListener 方法与两个“onkeydown” Hook 不同？

我的测试浏览器是 IE 11。

顺便说一句:我正在使用另一个 stackoverflow 帖子中的 keydown 文本替换方法的变体:

newKey = keyMap[keyPressed];                // Look for this key in our list of accented key shortcuts
    if (newKey === undefined) {
            return true;                        // Not in our list, let it bubble up as is
        } else {

        var oldValue, start, end;
        oldValue = this.value;                  // Insert the updated key into the correct position within the edit textbox.
        if (typeof this.selectionStart == "number" && typeof this.selectionEnd == "number") {
            start = this.selectionStart;
            end = this.selectionEnd;
            this.value = oldValue.slice(0, start) + newKey + oldValue.slice(end);
        }
                                                // Move the caret
        this.selectionStart = this.selectionEnd = start + 1;
        return false;

Answer 1

因为您必须阻止 .addEventListener() 版本的默认行为。

在处理程序结束时返回 false 以防止默认行为是 jQuery 特定的功能和 .onkeydown 属性的功能，但不适用于 .addEventListener( '按键')。

您将需要调用 e.preventDefault()(对于现代浏览器)或设置 e.returnValue = false(对于非标准浏览器)。

---

这超出了您解决问题所需的范围，但在使用普通 javascript 时，我使用跨浏览器事件处理 stub ，它允许我像这样返回 false:

// refined add event cross browser
function addEvent(elem, event, fn) {
    // allow the passing of an element id string instead of the DOM elem
    if (typeof elem === "string") {
        elem = document.getElementById(elem);
    }

    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // normalize the target of the event
        window.event.target = window.event.srcElement;
        // make sure the event is passed to the fn also so that works the same too
        // set the this pointer same as addEventListener when fn is called
        var ret = fn.call(elem, window.event);   
        // support an optional return false to be cancel propagation and prevent default handling
        // like jQuery does
        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);
    }
}