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