Question

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

现在，我正在查看示例代码，很多示例似乎都在使用，这让我永远发现了，jQuery。他们使用像$（'class-name'）这样的函数。无论如何（...）;

我更喜欢$（'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：无法调用方法'onClick'为null”

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

Answer 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/

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

Answer 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

不引人注目的Javascript onclick

3 个答案: