前言说明

前端界面中经常需要获取事件的源节点以便进行后续的操作。

由于在前端界面中经常处理的是 click 事件，本文均已 click 事件进行举例。

其他事件类似，使用对应的方法即可。

比较常见的事件有：

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

直接绑定方法

HTML 部分

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

JS 部分

function deleteNo(this)
{
  //this便是该a标签节点
}
​

• 优点：节点获取精准，不易与其他内容冲突
• 缺点：HTML 绑定事件的写法不易与通过动态生成

Jquery 绑定方式

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

HTML 部分

<button id="del_btn">DelBtn</button>
​

JS 部分

//方式1直接绑定click事件
$("#del_btn").click(function(){ 
	//$(this)便是触发的节点
    var obj = $(this);
});
//方式2通过on进行事件绑定（推荐）
//方法2支持对动态生成的HTML元素节点进行绑定（关键）
//方法2支持对子级元素的绑定
$("#del_btn").on("click", function(){
    //$(this)便是触发的节点
    var obj = $(this);
});
​

• 优点：提供更高的自定义能力
• 缺点：由于元素重叠冒泡事件触发，可能导致源节点获取不准确

event 对象

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

JS 部分

var event = window.event || arguments.callee.caller.arguments[0];
//obj就是我们要获取的节点
var obj = event.srcElement || event.target;
//可以转成Jquery对象，方便各种使用
var useObj = $(obj);
​

• 优点：具有更高的自定义能力
• 缺点：由于元素重叠冒泡事件触发，可能导致源节点获取不准确