Добавить событие click на теге div с помощью javascript

У меня есть тег div в моей форме без свойства id. Мне нужно установить событие on-click в этот тег div.

Html

<div class="drill_cursor" >
....
</div>

Может ли кто-нибудь сказать мне, как добавить событие on-click в этот тег, используя java-script. Не: - Я не хочу использовать свойство id тега div.

Ответ 1

Если вы используете только javascript, пожалуйста,

document.getElementsByClassName('drill_cursor')[0]
        .addEventListener('click', function (event) {
            // do something
        });

это просто с jquery

$(".drill_cursor").click(function(){
//do something
});

Ответ 2

Попробуйте следующее:

 var div = document.getElementsByClassName('drill_cursor')[0];

 div.addEventListener('click', function (event) {
     alert('Hi!');
 });

Ответ 3

Просто добавьте атрибут onclick:

<div class="drill_cursor" onclick='alert("youClickedMe!");'>
....
</div>

Это javascript, но он автоматически связан с использованием html-атрибута вместо того, чтобы вручную привязывать его в тегах <script> - возможно, он делает то, что вы хотите.

Хотя это может быть достаточно для очень маленьких проектов или тестовых страниц, вы должны определенно рассмотреть возможность использования addEventListener (как указано в других ответах), если вы ожидаете, что код будет расти и останется ремонтопригодным.

Ответ 4

селектор класса документа:

document.getElementsByClassName('drill_cursor')[0].addEventListener('click',function(){},false)

также селектор запросов документа https://developer.mozilla.org/en-US/docs/Web/API/document.querySelector

document.querySelector(".drill_cursor").addEventListener('click',function(){},false)

Ответ 5

Рекомендовать использовать Id, поскольку идентификатор связан только с одним элементом, тогда как имя класса может ссылаться на более чем один элемент, что вызывает путаницу для добавления события в элемент.

попробуйте, если вы действительно хотите использовать класс:

 document.getElementsByClassName('drill_cursor')[0].onclick = function(){alert('1');};

или вы можете назначить функцию в самом html:

<div class="drill_cursor" onclick='alert("1");'>
</div>

Ответ 6

Отдельная функция, упрощающая добавление обработчиков событий.

function addListener(event, obj, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false);   // modern browsers
    } else {
        obj.attachEvent("on"+event, fn);          // older versions of IE
    }
}

element = document.getElementsByClassName('drill_cursor')[0];

addListener('click', element, function () {
    // Do stuff
});