JavaScript事件绑定三种核心方式及jQuery兼容方案详解

近期整理了一些JavaScript事件绑定的实现方式，虽然未必涵盖所有场景，但旨在为后续查阅提供便利。

JavaScript事件绑定的三种核心方式

在JavaScript开发中，实现事件绑定的途径主要包含以下三种。

第一种方式是在DOM元素内部直接进行绑定。

第二种方式是在JavaScript代码层面直接进行绑定。

第三种方式是通过绑定事件监听函数来实现。

一、在DOM元素中直接绑定

该方法指直接在HTML标签中通过 onXXX 属性进行绑定。具体示例如下：

<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
  function testAlert(){
   alert("hello world!");
  }
</script>

二、在JavaScript代码中直接绑定

在JavaScript脚本中，通过获取DOM对象后，以 elementObject.onclick=function(){} 的形式进行绑定，具体示例如下：

<input type="button" value="点我呦" id="demo">
<script type="text/javascript">

  document.getElementById("demo").onclick=function testAlert(){
   alert("hello world!");
  }
</script>

三、绑定事件监听函数

此部分需重点掌握 addEventListener() 与 attachEvent() 的函数语法结构。

1. elementObject.addEventListener(eventName, handle, useCapture)（适用于主流浏览器及IE9.0及以上版本）

eventName：指定要绑定的事件名称。需注意书写格式，例如点击事件应写为 click，而非 onclick。

handle：指定处理事件的函数名。注意此处不添加小括号。

useCapture：布尔类型参数，用于指定是否使用捕获阶段，通常设置为 false，具体细节将在后文总结中涉及。

2. elementObject.attachEvent(eventName, handle)（仅适用于IE8及以下版本）

网络上提供了一种兼容性较好的解决方案。相较于传统的 if...else 判断，该方法采用 try...catch 错误处理机制，可有效避免浏览器弹出错误提示。

function addEvent(obj,type,handle){
  try{
   obj.addEventListener(type,handle,false);
  }catch(e){
   try{
    obj.attachEvent('on'+type,handle);
   }
   catch(e){
    obj['on' + type]=handle;//早期浏览器
   }
  }
}

jQuery事件绑定方法对比

四、探讨jQuery中事件绑定的几种方法。

主要涉及 on()、bind()、live()、delegate() 等方法，对应的解绑方法分别为 off()、unbind()、undelegate()（注：live无直接对应解绑方法，通常指移除绑定）。

1. 在 on()、bind()、live()、delegate() 中，除 bind() 外，其余方法均支持为后续动态追加的元素对象添加事件绑定。

2. 上述各方法均有其对应的jQuery版本支持范围。

3. 在为动态添加的页面元素绑定事件时，通常推荐使用 on() 方法。

以上内容为关于JavaScript事件绑定方法的完整总结，感谢阅读。