JS - 附加一个带有返回的事件监听器

Question

我经常使用以下 JavaScript 函数将事件附加到 DOM 中的元素。

function addEventHandler(elem,eventType,handler){
    if (elem.addEventListener){
        elem.addEventListener (eventType,handler,false);
     }
    else if (elem.attachEvent){
        elem.attachEvent ('on'+eventType,handler); 
    }
}

我想在以下上下文中使用它在提交时将一些 AJAX 附加到表单元素，然后返回 false，因此该表单实际上并未提交..

var elemnt = document.getElementById('myForm');
addEventHandler(elemnt, 'submit', function(){
    // Do stuff
    return false;
});

过去我会像这样附加一个事件处理程序：onsubmit="return myfunction();"，但我无法弄清楚在附加事件处理程序时如何在其中获取 return，因此我的函数可以阻止使用 JavaScript 提交表单。

这是怎么做到的？

Answer 1

试试：

var element = document.getElementById('myForm');
if (element.addEventListener) {
    element.addEventListener('submit', myEventHandler);
}
else {
    element.attachEvent('onclick', myEventHandler);
}

function myEventHandler(event){
    event.preventDefault();
    // Do stuff
}

更新 event.preventDefault() 阻止在调用它的方法之后对事件进行正常处理。 它不会阻止执行其他事件侦听器（使用event.stopImmediatePropagation() 执行此操作），但它会取消事件的默认效果。所以在这种情况下，它应该阻止提交表单。

更新 2 JavaScript 引擎将调用事件侦听器（您的函数）并向其传递一个描述事件的事件对象：它的类型、作为事件目标的对象...

有关事件监听器的详细说明，请参阅here。