5

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

4

3 回答 3

5

试试这个代码，

脚本

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/

于 2013-05-05T17:33:09.763 回答
4

您不需要addEventListener或attachEvent：现场演示。

编码：

<!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 中测试。

于 2014-07-08T11:38:01.957 回答
0

试试这个

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

于 2013-04-13T12:32:11.837 回答