使用 JavaScript 在 div 标签上添加点击事件

Question

我的表单中有一个没有id属性的div标签。 我需要在这个div标签上设置一个on-click事件。

我的 HTML 代码：

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

我不想在我的div标签中添加id属性。

如何使用 JavaScript 在此标签上添加on-click事件？

Answer 1

纯 JavaScript

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

jQuery

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

Answer 2

试试这个：

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

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

Answer 3

只需添加 onclick 属性：

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

它是 javascript，但它使用 html 属性自动绑定，而不是在<script>标签中手动绑定它 - 也许它可以满足您的需求。

虽然它对于非常小的项目或测试页面来说可能已经足够了，但如果您希望代码增长并保持可维护性，您绝对应该考虑使用addEventListener （正如其他答案所指出的那样）。

Answer 4

建议您使用 Id，因为 Id 仅与一个元素相关联，而类名可能会链接到多个元素，从而导致向元素添加事件时造成混淆。

如果您真的想使用类，请尝试：

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

或者您可以在 html 本身中分配函数：

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

Answer 5

文档类选择器：

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)

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