Fu4: Gangbare fout voor kwaliteitscriterium u.2.2 doordat in HTML inline event handlers worden gebruikt
Opmerking: De beoordeling van deze gangbare fout dient plaats te vinden op de door de webserver geserveerde HTML-code, niet de door de browser gegenereerde HTML-code.
Alle (X)HTML pagina's.
Deze fout is gerelateerd aan:
Het vermengen van content en client-side scripting kan, bijvoorbeeld bij migratie of bij hergebruik van de content, de oorzaak zijn van het ontstaan van onbedoeld gedrag en andere problemen.
Event handlers koppelen gedrag aan elementen in een HTML-document.
Deze fout ontstaat wanneer event handlers inline worden gebruikt; dat wil zeggen dat deze event handlers in de HTML bij de betreffende elementen als attribuut worden geplaatst. Hierdoor is er geen scheiding tussen de content en het gedrag.
Een inline event handler is te herkennen aan de vorm:
on[x]waarbij [x] een interaction event is. Voorbeelden zijn onclick en onchange.
Omdat alle event handler attributen deze vorm volgen wordt er hier geen uitvoerende lijst van event handler attributen opgenomen. Bij het gebruik van elk attribuut die de bovengenoemde vorm heeft, is deze gangbare fout van toepassing. Voor een uitvoerige lijsten van event handler attributen, zie de Referenties op deze pagina.
Deze fout is ook van toepassing indien het href-attribuut van een link wordt voorzien van inline scripting middels javascript:, bijv. <a href="javascript:foo()">Linktekst</a>.
Opmerking: De beoordeling van deze gangbare fout dient plaats te vinden op de door de webserver geserveerde HTML-code, niet de door de browser gegenereerde HTML-code.
Opmerking: Voorbeelden hebben uitsluitend een informatieve functie. Het is niet de bedoeling om een succescriterium te beoordelen enkel op basis van de hier gepresenteerde voorbeelden.
Een event handler attribuut wordt gebruikt op een link, om ervoor te zorgen dat een functie wordt uitgevoerd bij het klikken op een link. Ernstig in dit voorbeeld is het feit dat "#" als bestemming van de link wordt gebruikt, waardoor deze scriptafhankelijk is geworden.
<a href="#" onclick="doeIets()">Vul het formulier in</a>Dit is dezelfde fout als hierboven maar met een alternatieve vorm.
<a href="javascript:doeIets()">Vul het formulier in</a>Het id of class attribuut is bruikbaar als referentie voor een extern script.
<a href="/formulier/" class="ietsDoen">Vul het formulier in</a>Het bijbehorende script, voor alle voorbeelden:
...
...
<script type="text/javascript">
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
};
function doeIets() {
var ietsDoen = document.getElementsByClassName('ietsDoen');
... /* Hier wordt 'iets gedaan' ;-) */
};
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
};
addLoadEvent(ietsDoen);
</script>
</body>
</html>Opmerking: Informatiebronnen zijn uitsluitend informatief bedoeld. Ze maken geen deel uit van de Webrichtlijnen. Deze opsomming impliceert geen goedkeuring van de bronnen door de opstellers of toezichthouders van deze specificatie.
href-attribuut.De fout is van toepassing - en er wordt dus niet aan het succescriterium voldaan - bij de volgende uitkomst: