使用jQuery通过e.target获取元素ID时返回undefined的问题求助

嗨，我来帮你排查这个问题～

你遇到的undefined问题，根源在于你传给checkItem函数的参数不是事件对象，而是DOM元素本身。

看你的HTML代码：

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onchange="checkItem(this);">

这里你把this（也就是当前的checkbox元素）传给了函数，所以在checkItem(e)里，e直接就是这个DOM节点，而不是事件对象——DOM元素本身并没有target属性，所以e.target自然是undefined，用jQuery包装后取ID当然也拿不到值。

解决方法有两种，你可以选适合自己的：

方法一：直接使用传入的DOM元素 #

既然e就是目标元素，直接用jQuery包装它就行，不用再取target：

function checkItem(e) {
  var senderId = $(e).attr('id');
  alert(senderId);
}

或者更简洁的，用jQuery的.prop()方法（获取属性推荐用这个，比.attr()更符合现代DOM操作习惯）：

function checkItem(e) {
  var senderId = $(e).prop('id');
  alert(senderId);
}

方法二：传递事件对象给函数 #

如果你想保留e.target的写法，可以把事件对象传给函数，修改HTML的onchange属性：

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike" onchange="checkItem(event);">

然后函数里就可以正常用e.target了：

function checkItem(e) {
  var senderId = $(e.target).attr('id');
  alert(senderId);
}

这里的event是浏览器提供的全局事件对象，传给函数后，e就是事件对象，e.target就是触发事件的元素。

另外，其实如果已经引入了jQuery，更推荐用jQuery的事件绑定方式，而不是内联的onchange属性，这样代码更清晰也更易维护，比如：

<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">

$(document).ready(function() {
  $('#vehicle1').on('change', function() {
    // 这里的this就是当前元素
    var senderId = $(this).attr('id');
    alert(senderId);
  });
});

备注：内容来源于stack exchange，提问作者user819774