Is er een manier om het onclickhtml-kenmerk te gebruiken om meer dan één JavaScript-functie aan te roepen?
Antwoord 1, autoriteit 100%
onclick="doSomething();doSomethingElse();"
Maar echt, je kunt beter helemaal geen gebruik maken van onclicken de gebeurtenishandler aan de DOM-node koppelen via je Javascript-code. Dit staat bekend als onopvallend javascript.
Antwoord 2, autoriteit 20%
Een link met 1 gedefinieerde functie
<a href="#" onclick="someFunc()">Click me To fire some functions</a>
Meerdere functies activeren vanuit someFunc()
function someFunc() {
showAlert();
validate();
anotherFunction();
YetAnotherFunction();
}
Antwoord 3, autoriteit 11%
Dit is de code die nodig is als je alleen JavaScript gebruikt en niet jQuery
var el = document.getElementById("id");
el.addEventListener("click", function(){alert("click1 triggered")}, false);
el.addEventListener("click", function(){alert("click2 triggered")}, false);
Antwoord 4, autoriteit 2%
Ik zou de element.addEventListenergebruiken methode om het aan een functie te koppelen. Vanuit die functie kun je meerdere functies aanroepen.
Het voordeel dat ik zie bij het binden van een gebeurtenis aan een enkele functie en vervolgens meerdere functies bellen, is dat u een aantal foutcontrole kunt uitvoeren, wat indien anders uitspraken, zodat sommige functies alleen worden genoemd als aan bepaalde criteria worden voldaan.
Antwoord 5, Autoriteit 2%
Natuurlijk, bind eenvoudig meerdere luisteraars aan.
Short cutting with jQuery
$("#id").bind("click", function() {
alert("Event 1");
});
$(".foo").bind("click", function() {
alert("Foo class");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo" id="id">Click</div>Antwoord 6, Autoriteit 2%
ES6 reageren
<MenuItem
onClick={() => {
this.props.toggleTheme();
this.handleMenuClose();
}}
>
Antwoord 7
var btn = document.querySelector('#twofuns');
btn.addEventListener('click',method1);
btn.addEventListener('click',method2);
function method2(){
console.log("Method 2");
}
function method1(){
console.log("Method 1");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Pramod Kharade-Javascript</title>
</head>
<body>
<button id="twofuns">Click Me!</button>
</body>
</html>Antwoord 8
Je kunt meerdere alleen per code toevoegen, zelfs als je het tweede kenmerk onclickin de html hebt, wordt het genegeerd en wordt click2 triggerednooit afgedrukt, je zou er een kunnen toevoegen op actie de mousedownmaar dat is slechts een tijdelijke oplossing.
Dus je kunt ze het beste toevoegen met code zoals in:
var element = document.getElementById("multiple_onclicks");
element.addEventListener("click", function(){console.log("click3 triggered")}, false);
element.addEventListener("click", function(){console.log("click4 triggered")}, false);<button id="multiple_onclicks" onclick='console.log("click1 triggered");' onclick='console.log("click2 triggered");' onmousedown='console.log("click mousedown triggered");' > Click me</button>Antwoord 9
Eén toevoeging, voor onderhoudbaar JavaScript is het gebruik van een benoemde functie.
Dit is het voorbeeld van de anonieme functie:
var el = document.getElementById('id');
// example using an anonymous function (not recommended):
el.addEventListener('click', function() { alert('hello world'); });
el.addEventListener('click', function() { alert('another event') });
Maar stel je voor dat je er een paar hebt gekoppeld aan hetzelfde element en er een wilt verwijderen. Het is niet mogelijk om een enkele anonieme functie uit die gebeurtenislistener te verwijderen.
In plaats daarvan kunt u benoemde functies gebruiken:
var el = document.getElementById('id');
// create named functions:
function alertFirst() { alert('hello world'); };
function alertSecond() { alert('hello world'); };
// assign functions to the event listeners (recommended):
el.addEventListener('click', alertFirst);
el.addEventListener('click', alertSecond);
// then you could remove either one of the functions using:
el.removeEventListener('click', alertFirst);
Dit zorgt er ook voor dat uw code een stuk gemakkelijker te lezen en te onderhouden is. Zeker als je functie groter is.
Antwoord 10
Je kunt alle functies samenvoegen tot één en ze aanroepen.Bibliotheken zoals Ramdajsheeft een functie om meerdere functies samen te voegen tot één.
<a href="#" onclick="R.compose(fn1,fn2,fn3)()">Click me To fire some functions</a>
of je kunt de compositie als een aparte functie in het js-bestand plaatsen en het noemen
const newFunction = R.compose(fn1,fn2,fn3);
<a href="#" onclick="newFunction()">Click me To fire some functions</a>
Antwoord 11
Dit is een alternatief voor brad anser– u kunt als volgt komma gebruiken
onclick="funA(), funB(), ..."
het is echter beter om deze aanpak NIET te gebruiken – voor kleine projecten kunt u onclick alleen gebruiken in het geval van één functie die wordt aangeroepen (meer: bijgewerkt onopvallend javascript).