你如何用普通的 Javascript 捕捉點擊事件？

Question

我知道在使用 jQuery 時你可以做$('element').click(); 捕捉 HTML 元素的點擊事件，但是如何使用普通的 Javascript 做到這一點？

Answer 1

document.getElementById('element').onclick = function(e){
  alert('click');
}

演示： http : //jsfiddle.net/e9jZW/1/

Answer 2

通過添加 事件偵聽器或設置元素的onclick處理程序：

var el = document.getElementById("myelement");

el.addEventListener('click', function() {
  alert("Clicked");
});

// ... or ...

el.onclick = function() {
  alert("Clicked");
}

請注意，偶數偵聽器樣式允許添加多個偵聽器，而回調處理程序樣式是獨占的（只能有一個）。

如果您需要將這些處理程序添加到多個元素，那么您必須根據需要獲取它們並將它們分別添加到每個元素中。

Answer 3

我通常創建一種全局事件處理程序，非常強大，您可以捕獲事件“類型”nodeTypes 的 className，您命名它，我希望人們會發現這個有用

document.onclick = eventRef

function eventRef(evt) {
    var han;
    evt || (evt = window.event);

    if (evt) {
        var elem = evt.target ? han = evt.target : evt.srcElement && (han = evt.srcElement);

         // evt.type could be, mouseup, mousedown...
        // elem.id is the id or the element
        // elem.className is the class name of the element
        // you could nest expression, use substrings to extract part of a className
        if (evt.type=="click" && elem.id == "gotit" || elem.className == "someClassName") {  
            alert(elem.id);
        }
    }
}

Answer 4

感謝香草js

document.addEventListener('click', function (event) {

// If the clicked element doesn't have the right selector, bail
if (!event.target.matches('input')) return;

// Don't follow the link
event.preventDefault();

// Log the clicked element in the console
console.log(event.target);

}, false);

這也顯示哪個元素是 c

Answer 5

我建議使用addEventListener而不是直接分配處理程序函數。

var div = document.getElementById('test');
div.addEventListener('click', function(){ 
    console.log('CLICKED');
});

我將列出我認為最重要的原因有幾個原因：

1. 您不能使用addEventListener錯誤地將事件偵聽器添加到非 DOM 對象 - 您的代碼將失敗，而不是悄悄地將onclick函數分配給某個對象
2. 您只能使用onclick附加一個（無需為要添加的每個處理程序進行額外的代碼操作）事件偵聽器 - 這可能會受到限制

Answer 6

這是一篇關於此的有趣文章，我有時使用相同的方法，基本上，您將事件處理程序添加到window 。 http://mislav.uniqpath.com/js/handling-events-on-elements/