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

Question

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

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

Мой HTML-код:

<div class="drill_cursor" >

....

</div>

Я не хочу добавлять свойство id в мой тег div.

Как добавить событие on-click в этот тег с помощью Javascript?

1840 6

javascript html

6 ответов:

Comments

Ничего не найдено.

HDT · Accepted Answer · 2018-03-16 23:52:56

Чистый Javascript

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

JQuery

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

Evgeny Samsonov · Accepted Answer · 2013-12-25 14:52:53

Попробуйте это:

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

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

maja · Accepted Answer · 2017-07-28 12:59:08

Просто добавьте атрибут onclick:
<div class="drill_cursor" onclick='alert("youClickedMe!");'>
....
</div>
Это javascript, но он автоматически привязывается с помощью html-атрибута вместо того, чтобы вручную привязывать его в тегах <script> - возможно, он делает то, что вы хотите.

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

Zaheer Ahmed · Accepted Answer · 2013-12-25 14:52:15

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

Попробуйте, если вы действительно хотите использовать класс:
 document.getElementsByClassName('drill_cursor')[0].onclick = function(){alert('1');};
Или вы можете назначить функцию в самом html:
<div class="drill_cursor" onclick='alert("1");'>
</div>

TastySpaceApple · Accepted Answer · 2013-12-25 14:54:25

Селектор класса документа:
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)

Andrew Surzhynskyi · Accepted Answer · 2013-12-25 15:05:44

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

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
});