Ненавязчивый Javascript onclick

Я недавно читал на ненавязчивом javascript и решил дать ему шанс. Независимо от того, решаю ли я использовать этот стиль, нужно определить позднее. Это просто для моего собственного любопытства, а не для ограниченного времени проекта.Ненавязчивый 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, она дает это сообщение «Uncaught TypeError: не может вызвать метод onClick» из null »

Я не эксперт по javascript, поэтому более чем вероятно, что я делаю что-то неправильно. Любая помощь приветствуется.

источник

2013-04-13 DerekE

Попробуйте этот код,

Script

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

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

Когда вы утешать этот $('tester') селектор, он просто возвращает <a id='tester'>CLICK ME</a>, который является элементом html, а не объектом, поэтому вы не можете напрямую использовать onclick. Вместо этого вы должны использовать addEventListener или attachEvent связать события нажатия кнопки мыши

Demo 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

Ненавязчивый Javascript onclick

ответ

Смежные вопросы