JavaScript中几种获取事件触发源节点的方式

前端界面常常涉及到需要获取各类事件产生的源节点然后进行后续的逻辑处理(如修改状态、颜色等),本文列举了几类常见的获取源节点对象的方式,原生和Jquery等写法均有列举其中

JavaScript中几种获取事件触发源节点的方式

所属分类: WEB
专题标签: 事件 绑定 节点

前言说明

前端界面中经常需要获取事件的源节点以便进行后续的操作。
由于在前端界面中经常处理的是click事件,本文均已click事件进行举例。
其他事件类似,使用对应的方法即可。
比较常见的事件有:

  • change 元素/内容改变
  • scroll 滚动
  • blur 失去焦点
  • focus 聚焦
  • input 输入
  • drag 拖动
  • click 点击
  • mousedown 鼠标按下
  • mousemove 鼠标移动
  • mouseup 鼠标松开
  • keydown 键盘按键按下

直接绑定方法

HTML部分

  1. <a onclick="deleteNo(this)">DelBtn</a>

JS部分

  1. function deleteNo(this)
  2. {
  3. //this便是该a标签节点
  4. }
  • 优点:节点获取精准,不易与其他内容冲突
  • 缺点:HTML绑定事件的写法不易与通过动态生成

Jquery绑定方式

引入Jquery有两种常见的获取源节点的方式,两者有轻微差异,请阅代码

HTML部分

  1. <button id="del_btn">DelBtn</button>

JS部分

  1. //方式1直接绑定click事件
  2. $("#del_btn").click(function(){
  3. //$(this)便是触发的节点
  4. var obj = $(this);
  5. });
  6. //方式2通过on进行事件绑定(推荐)
  7. //方法2支持对动态生成的HTML元素节点进行绑定(关键)
  8. //方法2支持对子级元素的绑定
  9. $("#del_btn").on("click", function(){
  10. //$(this)便是触发的节点
  11. var obj = $(this);
  12. });
  • 优点:提供更高的自定义能力
  • 缺点:由于元素重叠冒泡事件触发,可能导致源节点获取不准确

event对象

需要考虑火狐兼容性,通过事件本身获取源节点

JS部分

  1. var event = window.event || arguments.callee.caller.arguments[0];
  2. //obj就是我们要获取的节点
  3. var obj = event.srcElement || event.target;
  4. //可以转成Jquery对象,方便各种使用
  5. var useObj = $(obj);
  • 优点:具有更高的自定义能力
  • 缺点:由于元素重叠冒泡事件触发,可能导致源节点获取不准确