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附加到表单元素onsubmit，然后返回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。

JS - 使用return附加事件侦听器

1 个答案: