单击时的 JavaScript 划分会触发任何给定的预定义事件 [跨浏览器兼容性]

Question

我有一个表格和一个内部部门:

<form action="#" name="form" id="identification_form" class="classification_form">
     <div name="division" id="identification_division" class="classification_division">
     </div>
</form>

JavaScript 使用事件进行操作:

document.getElementById('identification_division').onClick = function(event){
     document.getElementById('identification_form').submit(); //does NOT trigger element.onsubmit event
}
document.getElementById('identification_form').onSubmit = function(event){
     alert("submitted!")
}

表单成功提交但未调用事件

The element.onsubmit event only works when using a submit button inside the form and manually clicking the button (or pressing enter while in focus of another input element)

How can i make element.onClick call the the onSubmit function?

when using element.onSubmit i get an undefined error in the browser console.

我当前的解决方案:

function submition(event){
     alert("submitted");
}
document.getElementById('identification_division').onClick = function(event){
     submition(event || null);
     document.getElementById('identification_form').submit();
}
document.getElementById('identification_form').onSubmit = function(event){
     submition(event || null);
}

请注意，我当前的解决方案可能会导致早期版本的 Opera 和 Internet Explorer 中出现内存泄漏。

JQUERY 不是一个选项

Answer 1

请使用addEventListener或attachEvent(基于这篇文章:MSIE and addEventListener Problem in Javascript?)

function bindEvent(el, eventName, eventHandler) 
{
  if (el.addEventListener)
  {
    el.addEventListener(eventName, eventHandler, false); 
  } 
  else if (el.attachEvent)
  {
    el.attachEvent('on'+eventName, eventHandler);
  }
}

bindEvent(document.getElementById('identification_division'), 'click', function () 
{
  document.getElementById('identification_form').submit();
});