不显眼的 Javascript onclick

Question

不显眼的 Javascript onclick

我最近正在阅读 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>

Run Code Online (Sandbox Code Playgroud)

我原以为当您单击链接时会弹出一个警告框，但似乎没有发生。在 chrome 中检查控制台时，它会给出以下消息“未捕获的类型错误：无法调用 null 的方法 'onClick'”

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

Answer 1

mou*_*man 5

试试这个代码，

脚本

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

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

Run Code Online (Sandbox Code Playgroud)

当你控制台这个$('tester')选择器时，它只是返回<a id='tester'>CLICK ME</a>一个 html 元素而不是一个对象，所以你不能直接使用 onclick 。相反，您必须使用addEventListener或attachEvent绑定点击事件

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

归档时间：	12 年，7 月前
查看次数：	5000 次
最近记录：	11 年，4 月前