jQuery event.target可以使用哪些属性

在本文中，我们将介绍使用jQuery时可以在event.target上使用的一些属性。event.target是指触发事件的DOM元素，也就是事件发生的目标元素。通过访问event.target的属性，我们可以获得有关该元素的更多信息。

nodeName属性

nodeName属性返回一个字符串，表示元素的标签名。通过nodeName属性，我们可以判断元素的类型，并进行相应的操作。

$('button').click(function(event) {
  if (event.target.nodeName === 'BUTTON') {
    console.log('点击了按钮');
  }
});

id属性和class属性

id属性返回一个字符串，表示元素的id值。class属性返回一个字符串，表示元素的class值。通过这两个属性，我们可以获得元素的唯一标识符和类名。

$('div').click(function(event) {
  console.log('点击了id为' + event.target.id + '的元素');
  console.log('点击了class为' + event.target.className + '的元素');
});

value属性和innerText属性

value属性返回一个字符串，表示表单元素的值。innerText属性返回一个字符串，表示元素的文本内容。通过这两个属性，我们可以获得元素的输入值和显示的文本。

$('input').keyup(function(event) {
  console.log('输入了' + event.target.value);
});

$('p').click(function(event) {
  console.log('点击了文本：' + event.target.innerText);
});

href属性和src属性

href属性返回一个字符串，表示链接元素的目标URL。src属性返回一个字符串，表示图像元素的URL。通过这两个属性，我们可以获取链接的目标网址和图像的URL。

$('a').click(function(event) {
  console.log('点击了链接：' + event.target.href);
});

$('img').click(function(event) {
  console.log('点击了图像：' + event.target.src);
});

data属性

data属性返回一个对象，包含了元素上的data-*属性的键值对。通过这个属性，我们可以获取元素上自定义的数据。

<div id="customer" data-name="John" data-age="25"></div>

$('div').click(function(event) {
  console.log('name属性值为：' + $(event.target).data('name'));
  console.log('age属性值为：' + $(event.target).data('age'));
});