Wie findet man die ID der Schaltfläche, auf die geklickt wird?
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
}Antworten
Zu viele Anzeigen?
Timo Huovinen
Punkte
49275
Wie man es ohne Inline-JavaScript oder externe Bibliotheken macht
Es wird allgemein empfohlen, Inline-JavaScript zu vermeiden, aber selten gibt es ein Beispiel dafür, wie man es macht.
Hier ist meine Art, Ereignisse an Schaltflächen anzuhängen.
Ich bin nicht ganz zufrieden damit, wie viel länger die empfohlene Methode im Vergleich zu einer einfachen onClick Attribut.
Moderne Browser
- Funktioniert, bevor das Dokument vollständig geladen ist.
- Sehr effizient.
- Trennt JS von HTML.
-
JS ist in der
<head>const OnEvent = (doc) => { return { on: (type, selector, callback) => { doc.addEventListener(type, (event)=>{ if(!event.target.matches(selector)) return; callback.call(event.target, event); }, false); } } };
OnEvent(document).on('click', '.btn', function (e) { let div = document.createElement("div"); div.innerHTML = "click " + e.target.id + "!"; document.body.appendChild(div); });
<button id="b1" class="btn">Button 1</button> <button id="b2" class="btn">Button 2</button> <button id="b3">Do nothing</button>
Nur für 2014-Browser
<button class="btn" id="b1">Button</button>
<script>
let OnEvent = (doc) => {
return {
on: (event, className, callback) => {
doc.addEventListener('click', (event)=>{
if(!event.target.classList.contains(className)) return;
callback.call(event.target, event);
}, false);
}
}
};
OnEvent(document).on('click', 'btn', function (e) {
window.console.log(this.id, e);
});
</script>Nur 2013-Browser
<!DOCTYPE html>
<html>
<head>
<script>
(function(doc){
var hasClass = function(el,className) {
return el.classList.contains(className);
}
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="http://stackoverflow.com/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html>Browserübergreifend
<!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="http://stackoverflow.com/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html>Browserübergreifend mit 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="http://stackoverflow.com/path/to/non-js/action" id="btn4">Button 4</a>
</body>
</html>Sie können dies ausführen, bevor das Dokument fertig ist. Das Anklicken der Schaltflächen wird funktionieren, da wir das Ereignis an das Dokument anhängen.
Hier ist ein jsfiddle
Aus irgendeinem seltsamen Grund ist die insertHTML Funktion funktioniert darin nicht, obwohl sie in allen meinen Browsern funktioniert.
Sie können jederzeit ersetzen insertHTML con document.write Wenn es Ihnen nichts ausmacht, es ist Nachteile
<script>
document.write('<button class="click-me" id="btn1">Button 1</button>');
</script>Quellen:
Jay
Punkte
3293
A-Sharabiani
Punkte
15310
Wenn Sie keine Argumente an die onclick-Funktion übergeben wollen, verwenden Sie einfach event.target um das angeklickte Element zu erhalten:
<button id="1" onClick="reply_click()"></button>
<button id="2" onClick="reply_click()"></button>
<button id="3" onClick="reply_click()"></button>
function reply_click()
{
// event.target is the element that is clicked (button in this case).
console.log(event.target.id);
}
user3262563
Punkte
73
