JavaScript – onClick获取单击button的ID
如何find被点击的button的ID？
<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button> function reply_click() { } 您需要发送ID作为function参数。 像这样做：
<button id="1" onClick="reply_click(this.id)">B1</button> <button id="2" onClick="reply_click(this.id)">B2</button> <button id="3" onClick="reply_click(this.id)">B3</button> <script type="text/javascript"> function reply_click(clicked_id) { alert(clicked_id); } </script>
这将发送ID为this.id作为clicked_id您可以在您的function中使用。 在这里看到它的行动。
一般来说，如果将代码和标记分开，事情会更容易组织起来。 定义所有的元素，然后在JavaScript部分中定义应该对这些元素执行的各种操作。
当一个事件处理程序被调用时，它在被点击的元素的上下文中被调用。 所以，这个标识符将引用您单击的DOM元素。 然后可以通过该标识符访问该元素的属性。
例如：
<button id="1">Button 1</button> <button id="2">Button 2</button> <button id="3">Button 3</button> <script type="text/javascript"> var reply_click = function() { alert("Button clicked, id "+this.id+", text"+this.innerHTML); } document.getElementById('1').onclick = reply_click; document.getElementById('2').onclick = reply_click; document.getElementById('3').onclick = reply_click; </script>
（我认为id属性需要以一个字母开头，可能是错的。）
你可以去参加活动
<div onClick="reply_click()"> <button id="1"></button> <button id="2"></button> <button id="3"></button> </div> function reply_click(e) { e = e || window.event; e = e.target || e.srcElement; if (e.nodeName === 'BUTTON') { alert(e.id); } }
但是这要求你对古怪的事件模型比较舒服。
<button id="1" onClick="reply_click(this)"></button> <button id="2" onClick="reply_click(this)"></button> <button id="3" onClick="reply_click(this)"></button> function reply_click(obj) { var id = obj.id; }
<button id="1"class="clickMe"></button> <button id="2" class="clickMe"></button> <button id="3" class="clickMe"></button> $('.clickMe').click(function(){ var clickedID = this.id; });
使用纯JAVASCRIPT：我知道这是迟到，但可能是未来的人可以帮助：
在HTML部分中：
<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button>
在Javascipt控制器中：
function reply_click() { alert(event.srcElement.id); }
这样，我们就不必在调用javascript函数的时候绑定Element的id了。
如何在没有内嵌JavaScript的情况下做到这一点
通常build议避免使用内联JavaScript，但很less有如何执行此操作的示例。
这是我将事件附加到button的方式。
对于推荐的方法与简单的onClick属性进行比较，我不完全满意。
只有现代浏览器
<!DOCTYPE html> <html> <head> <script> (function(doc){ var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } doc.addEventListener('click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault(); doSomething.call(e.target, e); } }); })(document); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>
跨浏览器
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function(doc){ var cb_addEventListener = function(obj, evt, fnc) { // W3C model if (obj.addEventListener) { obj.addEventListener(evt, fnc, false); return true; } // Microsoft model else if (obj.attachEvent) { return obj.attachEvent('on' + evt, fnc); } // Browser don't support W3C or MSFT model, go on with traditional else { evt = 'on'+evt; if(typeof obj[evt] === 'function'){ // Object already has a function on traditional // Let's wrap it with our own function inside another function fnc = (function(f1,f2){ return function(){ f1.apply(this,arguments); f2.apply(this,arguments); } })(obj[evt], fnc); } obj[evt] = fnc; return true; } return false; }; var hasClass = function(el,className) { return (' ' + el.className + ' ').indexOf(' ' + className + ' ') > -1; } cb_addEventListener(doc, 'click', function(e){ if(hasClass(e.target, 'click-me')){ e.preventDefault ? e.preventDefault() : e.returnValue = false; doSomething.call(e.target, e); } }); })(document); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script type="text/javascript"> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>
跨浏览器与jQuery
<!DOCTYPE html> <html> <head> <script type="text/javascript"> (function($){ $(document).on('click', '.click-me', function(e){ doSomething.call(this, e); }); })(jQuery); function insertHTML(str){ var s = document.getElementsByTagName('script'), lastScript = s[s.length-1]; lastScript.insertAdjacentHTML("beforebegin", str); } function doSomething(event){ console.log(this.id); // this will be the clicked element } </script> <!--... other head stuff ...--> </head> <body> <!--Best if you inject the button element with javascript if you plan to support users with javascript disabled--> <script type="text/javascript"> insertHTML('<button class="click-me" id="btn1">Button 1</button>'); </script> <!--Use this when you don't care about broken buttons when javascript is disabled.--> <!--buttons can be used outside of forms https://stackoverflow.com/a/14461672/175071 --> <button class="click-me" id="btn2">Button 2</button> <input class="click-me" type="button" value="Button 3" id="btn3"> <!--Use this when you want to lead the user somewhere when javascript is disabled--> <a class="click-me" href="/path/to/non-js/action" id="btn4">Button 4</a> </body> </html>
您可以在文档准备就绪之前运行此操作，单击button将起作用，因为我们将事件附加到文档。
这是一个jsfiddle
由于一些奇怪的原因， insertHTML函数在我的所有浏览器中都能正常工作，它仍然不起作用。
如果你不介意它的缺点，你可以随时用document.writereplaceinsertHTML
<script> document.write('<button class="click-me" id="btn1">Button 1</button>'); </script>
资料来源：
- 什么是document.write的替代方法？
- testing一个元素是否包含一个类？
- event.preventDefault（）函数在IE中不起作用
- https://gist.github.com/eduardocereto/955642
你可以简单地这样做：
<input type="button" id="1234" onclick="showId(this.id)" value="click me to show my id"/> <script type="text/javascript"> function showId(obj) { var id=obj; alert(id); }
<button id="1" onClick="reply_click()"></button> <button id="2" onClick="reply_click()"></button> <button id="3" onClick="reply_click()"></button> function reply_click() { console.log(window.event.target.id) }
用纯JavaScript你可以做到以下几点：
var buttons = document.getElementsByTagName("button"); var buttonsCount = buttons.length; for (var i = 0; i < buttonsCount; i += 1) { buttons[i].onclick = function(e) { alert(this.id); }; }
检查它在JsFiddle
<button id="1"class="clickMe"></button> <button id="2" class="clickMe"></button> <button id="3" class="clickMe"></button> $('.clickMe').live('click',function(){ var clickedID = this.id; });
button1button2button3
var reply_click = function() { alert("Button clicked, id "+this.id+", text"+this.innerHTML); } document.getElementById('1').onclick = reply_click; document.getElementById('2').onclick = reply_click; document.getElementById('3').onclick = reply_click;
