三种获取触发事件源节点的方法和优缺点
in 前端 with 0 comment

三种获取触发事件源节点的方法和优缺点

in 前端 with 0 comment

在前端界面功能实现过程中常常需要获取事件源节点以便于准确处理相应的界面数据,常见的三种方式各有优缺点,一起来了解一下

page_jsgetjd.jpg

应用诉求

比如列表页中点击某一行的最后一列的操作按钮删除改行的数据,我们需要获取这一行的数据进行操作
如果我们在书写页面时没有预置index或者唯一性的入参,那么获取触发事件源节点就变得很常用

$(this)

$(this)一般是放在触发事件的子function体里面

$(".tip").each(function()
{
    $(this).remove();
});
$("#delBtn").click(function()
{
    $(this).remove();
});

functionName(this)

functionName(this)是直接在HTML元素中绑定事件

<a onclick="deleteNo(this)">DelBtn</a>
<script>
function deleteNo(doc)
{
    //默认传入改a节点
}
</script>

事件源获取

通过事件源的方式来获取源节点
核心思路:event对象(需要考虑火狐兼容性)
利用event对象的srcElement(IE)或target(FireFox)属性指向触发事件的元素

var event = window.event || arguments.callee.caller.arguments[0];
var obj = event.srcElement || event.target;
var useObj = $(obj);
//obj就是我们要获取的节点了

顺手把obj转成Jquery对象,便于我们后续逻辑的处理。

Responses