5

私は最近、控えめな javascript を読んでいて、試してみることにしました。このスタイルを使用するかどうかは、後で決定します。これは私自身の好奇心のためであり、時間制限のあるプロジェクトではありません.

さて、私はコード例を見ていましたが、多くの例で jQuery を発見するのに永遠にかかったようです。$('class-name').whatever(...); のような関数を使用します。

$('class').function の外観が好きなので、jQuery を使用せずにエミュレートしようとしました (jQuery を知らず、気にしないため)。ただし、この例を機能させることはできません。

ここに私の 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

4

addEventListeneror 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 でテスト済み。

于 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 に答える