Unobtrusive Javascript onclick

我最近讀了Unobtrusive javascript，並決定給它一個鏡頭。我是否決定使用這種風格將在稍後確定。這僅僅是爲了我自己的好奇心，而不是任何時間限制的項目。Unobtrusive Javascript onclick

現在，我正在查看示例代碼，並且很多示例似乎都在使用，這讓我永遠發現了jQuery。他們使用像$（'class-name'）這樣的函數。whatever（...）;我很喜歡$（'class'）。函數的外觀，所以我試圖模仿它而不使用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中檢查控制檯時，它會給出此消息「未捕獲的TypeError：無法調用方法'onClick'爲null」我不是JavaScript專家，因此我可能做錯了什麼。任何幫助表示讚賞。

來源

2013-04-13 DerekE

試試這個代碼，

腳本

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

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

當你安慰這個$('tester')選擇，它只是返回<a id='tester'>CLICK ME</a>這是一個html元素不是對象，所以你不能直接使用onclick。相反，你必須使用addEventListener或attachEvent到click事件綁定

演示JShttp://jsfiddle.net/K3eAc/4/

來源

2013-05-05 17:33:09 moustacheman

太棒了！非常感謝，這對我來說算得很好。也感謝您回答幾周前問過的問題。我差點忘了我問過，哈哈。 – DerekE

試試這個

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-13 12:32:11

我有這個鏡頭，但瀏覽器調試器仍然說它是一個空值。我似乎無法弄清楚它爲什麼一直返回null。 – DerekE

你不需要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。

來源

2014-07-08 11:38:01

Unobtrusive Javascript onclick

回答

相關問題