Question

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

我的HTML代码：

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

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

如何使用Javascript在此代码上添加on-click事件？

Answer 1

试试这个：

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

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

Answer 2

纯Javascript

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

的jQuery

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

Answer 3

只需添加onclick-attribute：

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

使用javascript在div标签上添加click事件

6 个答案:

纯Javascript

的jQuery