Javascript事件检测

Question

我找不到任何有关这个令人惊讶的好文档，所以我在这里发布它。

什么是原始的JavaScript equivilent这样：

$(elem).click(function(){ 
    alert(this.text()); 
}); 

所有我能找到的是这<elem onlick="func()" />这是不是我想要的，我希望能够的范围内只是用JavaScript来做到这一点不元件。

Answer 1

假设elem是元素节点（如果没有，你需要将自己的选择工作，投入使用的getElementById或其他）：

elem.onclick= function() { 
    var text= 'textContent' in elem? elem.textContent : elem.innerText; 
    alert(text); 
}; 

textContent是从元素获取文本的标准兼容方式; innerText是IE的方式。 （有一些差异，但希望没有什么会影响你的。）如果你需要支持旧的/模糊的浏览器，你既不必做枯燥乏味的树形漫步来拾取所有文本（这是jQuery的text()所做的。）

（我假设这是你从this.text()想要什么那倒不用实际工作 - 想必你的意思$(this).text()）

Answer 2

你可以做object.onclick = handler

var el = document.getElementById('elem'); 
elem.onclick = function(){ alert("Clicked!") }; 

这应该工作 - 我对JavaScript的有点举步维艰的今天！

Answer 3

也许你需要类似的东西：

document.getElementById('element_id').setAttribute("onclick","alert('hello world')"); 

Answer 4

有几种方法可以附加一个单击处理程序不使用库。首先是分配功能元素的on[eventname]属性：

element.onclick = function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
} 

您也可以将一串代码进行评估，但它不是漂亮，通常避免。另一种方法是使用W3C标准addEventListener：

element.addEventListener("click", function (eventObj) { 
    alert("textContent" in this ? this.textContent : this.innerText) 
}, false); 

这不是由IE浏览器的最新版本需要attachEvent，而不是支持：

element.attachEvent("onclick", function() { 
    alert(event.srcElement.innerText); 
}); 

IE浏览器应用的功能，引发该元素的问题事件，因此this将不会正确指向该元素与attachEvent。

第一种方法element.onclick对x浏览器的兼容性和快速编码很有用，但是您只能将一个函数分配给属性。使用attachEvent和addEventListener您可以添加尽可能多的功能，只要您喜欢，它们都会正确触发。您可以创建一个跨浏览器的半等价物，在您的代码中执行简单的功能检查：

if ("addEventListener" in element) 
    element.addEventListener("click", function (eventObj) { 
     alert("textContent" in this ? this.textContent : this.innerText) 
    }, false); 
else 
    element.attachEvent("onclick", function() { 
     alert(event.srcElement.innerText); 
    });