gpt4 book ai didi

unobtrusive-javascript - 不显眼的 Javascript onclick

转载 作者:行者123 更新时间:2023-12-04 23:24:16 27 4
gpt4 key购买 nike

我最近在阅读 Unobtrusive javascript 并决定试一试。我是否决定使用这种风格将在以后确定。这只是出于我自己的好奇心,而不是出于任何时间限制的项目。

现在,我正在查看示例代码,很多示例似乎都在使用,让我永远发现的是 jQuery。他们使用像 $('class-name').whatever(...); 这样的函数。

好吧,我更喜欢 $('class').function 的外观,所以我尝试在不使用 jQuery 的情况下模拟它(因为我不知道 jQuery 并且不关心 atm)。但是,我无法使这个示例工作。

这是我的 jsFiddle:http://jsfiddle.net/dethnull/K3eAc/3/

<!DOCTYPE html>
<html>
<head>
<title>Unobtrusive Javascript test</title>
<script>
function $(id) {
return document.getElementById(id);
}

$('tester').onclick(function () {
alert('Hello world');
});
</script>
<style>
.styled {
width: 200px;
margin-left: auto;
margin-right: auto;
font-size: 2em;
}
a {
cursor: pointer;
color: blue;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class='styled'>
<ul>
<li><a id='tester'>CLICK ME</a></li>
</ul>

</div>
</body>
</html>

当您单击链接时,我希望会弹出一个警告框,但似乎没有发生。在 chrome 中检查控制台时,它会显示此消息“Uncaught TypeError: Cannot call method 'onClick' of null”

我不是 javascript 专家,所以很可能我做错了什么。任何帮助表示赞赏。

最佳答案

试试这个代码,

脚本

function $(id) {
return document.getElementById(id);
}

$('tester').addEventListener('click', function () {
alert('Hello world');
});

当你安慰这个 $('tester')选择器,它只返回 <a id='tester'>CLICK ME</a>这是一个 html 元素而不是对象,因此您不能直接使用 onclick。相反,您必须使用 addEventListenerattachEvent绑定(bind)点击事件

演示JS http://jsfiddle.net/K3eAc/4/

关于unobtrusive-javascript - 不显眼的 Javascript onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15987733/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com