我需要在onclick事件的调用对象上有一个处理程序。
<a href="123.com" onclick="click123(event);">link</a>
<script>
function click123(event) {
//i need <a> so i can manipulate it with Jquery
}
</script>
我想在不使用$().click或$().livejQuery 但使用上述方法的情况下做到这一点。
如何获取onclick调用对象？
IT技术
javascript
jquery
html
2021-01-22 08:16:33
5个回答
传入this内联点击处理程序
<a href="123.com" onclick="click123(this);">link</a>
或者event.target在函数中使用（根据W3C DOM Level 2 Event模型）
function click123(event)
{
var a = event.target;
}
但是当然，IE 是不同的，所以处理这个的 vanilla JavaScript 方式是
function doSomething(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
}
或不那么冗长
function doSomething(e) {
e = e || window.event;
var targ = e.target || e.srcElement || e;
if (targ.nodeType == 3) targ = targ.parentNode; // defeat Safari bug
}
其中e是event object被传递到在比IE其他浏览器的功能。
不过，如果您使用的是 jQuery，我强烈建议您使用不引人注目的 JavaScript 并使用 jQuery 将事件处理程序绑定到元素。
最简单的方法是通过这个给click123功能，或者您也可以做这样的事情（跨浏览器）：
function click123(e){
e = e || window.event;
var src = e.target || e.srcElement;
//src element is the eventsource
}
我认为最好的方法是使用currentTarget属性而不是target属性。
当事件遍历 DOM 时，Event 接口的 currentTarget 只读属性标识了 event的当前目标。它始终指的是事件处理程序已附加到的元素，而不是 Event.target，后者标识发生事件的元素。
例如：
<a href="#"><span class="icon"></span> blah blah</a>
Javascript：
a.addEventListener('click', e => {
e.currentTarget; // always returns "a" element
e.target; // may return "a" or "span"
})
你的方法的问题是你用 javascript 弄乱了你的 HTML。如果你把你的 javascript 放在一个外部文件中，你可以不显眼地访问你的 HTML，这会更整洁。
稍后您可以使用 addEventListener/attackEvent(IE) 扩展您的代码以防止内存泄漏。
这是没有 jQuery
<a href="123.com" id="elementid">link</a>
window.onload = function () {
var el = document.getElementById('elementid');
el.onclick = function (e) {
var ev = e || window.event;
// here u can use this or el as the HTML node
}
}
你说你想用 jQuery 操作它。所以你可以使用jQuery。比这样做更好：
// this is the window.onload startup of your JS as in my previous example. The difference is
// that you can add multiple onload functions
$(function () {
$('a#elementid').bind('click', function (e) {
// "this" points to the <a> element
// "e" points to the event object
});
});