Partiendo del siguiente código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
function one()
{
console.log('clicked "One"');
}
document.addEventListener("DOMContentLoaded", function(event) {
console.log('Document it´s ready !');
function two()
{
console.log('clicked "One"');
};
});
$(document).ready(function(){
console.log('Document it´s ready !');
function three()
{
console.log('clicked "Two"');
};
});
</script>
</head>
<body>
<input type="button" class="btn" value="One" onclick="one()">
<input type="button" class="btn" value="Two" onclick="two()">
<input type="button" class="btn" value="Three" onclick="three()">
</body>
</html>
Ocurre lo siguiente:
Al hacer click sobre el primer botón aparece el mensaje clicked "One"
en la consola.
Al hacer click sobre el segundo o tercer botón aparece un mensaje de error indicando que la función no se encuentra definida, por ejemplo:
JS - Ambito funciones.html:39 Uncaught ReferenceError: two is not defined
at HTMLInputElement.onclick
¿Se puede llamar a las funciones two()
y three()
desde fuera de los bloques en que fueron definidas?
(new ($(document).ready)).three();
para ver si podes escopear la función, el scope de un listener ni idea si puede ser recuperado, btw interesante pregunta.