不显眼的 Javascript onclick答案

【问题标题】：Unobtrusive Javascript onclick不显眼的 Javascript onclick
【发布时间】：2013-04-05 22:44:06
【问题描述】：

我最近在阅读 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 专家，所以很可能我做错了什么。任何帮助表示赞赏。

【问题讨论】：

标签： unobtrusive-javascript

【解决方案1】：

试试这个代码，

脚本

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

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

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

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

【讨论】：

太棒了！非常感谢，这对我来说效果很好。也感谢您回答几周前提出的问题。我差点忘了我问过它，哈哈。

【解决方案2】：

您不需要addEventListener 或attachEvent：live demo。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Unobtrusive Javascript test</title>
<style>
.styled {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
    font-size: 2em;
}
</style>
</head>
<body>

    <div class="styled">
        <ul>
            <li><a href="#" id="tester">CLICK ME</a></li>
        </ul>
    </div>

<script>
var tester = document.getElementById('tester');
tester.onclick = function() {
    alert('Hello world');
}
</script>

</body>
</html>

.
我在实践中比在理论上更好，但在我看来，将目标元素转换为变量后，它就变成了一个对象。在 IE8/9、Chrome25 和 FF30 中测试。

【讨论】：

【解决方案3】：

试试这个

function $(id) {
    return document.getElementById(id);
}
var a = $('tester');
a.onclick = (function () {
    alert('Hello world');
});

参考：https://developer.mozilla.org/en-US/docs/DOM/element.onclick

【讨论】：

我试了一下，但浏览器调试器仍然说它是一个空值。我似乎无法弄清楚为什么它一直返回 null。