새소식
반응형
Programming language/Javascript,jQuery
[jQuery]문자열로 함수 호출하기
- -
반응형
스크립트 함수를 실행하는 방법은 다양하다.
버튼을 클릭한다거나, 페이지가 로드되는 경우 등, 우리는 이벤트가 발생한 이후이거나 또는 이전인 경우. 원하는 경우에 함수를 실행시킬 수 있다.
- 버튼을 클릭했을 때 함수 실행
<!DOCTYPE html>
<html>
<head>
<title>Test WEB</title>
<script>
function callFunction() {
alert("함수 실행");
}
</script>
</head>
<body>
<form>
<button type="button" onclick="callFunction()">TEST함수실행</button>
</form>
</body>- html 페이지가 화면에 뿌려진 이후 함수 실행
<!DOCTYPE html>
<html>
<head>
<title>Test WEB</title>
<script>
function callFunction() {
alert("함수 실행");
}
$(document).ready(function() {
callFunction();
});
</script>
</head>
<body>
<form>
<button type="button" onclick="callFunction()">TEST함수실행</button>
</form>
</body>
이처럼 스크립트에서 함수는 함수의 이름을 호출함으로써 실행이 가능하다.
그런데 최근에 새롭게 알게된 내용이 있다.
문자열로 된 함수명을 인자값으로 받아 함수를 실행할 수 있었다. fnct1이라는 함수가 있다고 했을 때, fnct1라는 문자열을 인자값으로 받아 함수를 호출하는 것이다.
아래 코드를 보면 두 개의 버튼에서 클릭시 각 인자값을 태워 callFunction 함수를 호출하고 있c다.
<!DOCTYPE html>
<html>
<head>
<title>Test WEB</title>
<script>
function callFunction(val) {
alert(val);
alert("함수 실행");
}
function fnct1() {
alert("fnct1 함수 실행");
}
function fnct2() {
alert("fnct2 함수 실행");
}
</script>
</head>
<body>
<form>
<button type="button" onclick="callFunction('fnct1')">TEST함수실행1</button>
<button type="button" onclick="callFunction('fnct2')">TEST함수실행2</button>
</form>
</body>
callFunction에서 인자값을 받아 해당 함수를 실행시킬 수 있는 방법이 있다.
바로 window[함수명](인자값); 요 함수를 이용하면 된다.
인자값도 보낼 수 있으니 정말 신기하다....
<!DOCTYPE html>
<html>
<head>
<title>Test WEB</title>
<script>
function callFunction(val) {
alert(val);
window[val]();
alert("함수 실행");
}
function fnct1() {
alert("fnct1 함수 실행");
}
function fnct2() {
alert("fnct2 함수 실행");
}
</script>
</head>
<body>
<form>
<button type="button" onclick="callFunction('fnct1')">TEST함수실행1</button>
<button type="button" onclick="callFunction('fnct2')">TEST함수실행2</button>
</form>
</body>
참고
반응형
'Programming language > Javascript,jQuery' 카테고리의 다른 글
| [jQuery]select2 플러그인 (1) | 2020.10.20 |
|---|---|
| [jQuery]Bootstrap Modal 사용시 focus()가 안되는 현상 (1) | 2020.09.10 |
| [jQuery]form 초기화 (0) | 2020.04.24 |
| [jQuery UI]드래그 기능 (0) | 2019.12.03 |
| [Javascript]날짜 비교 (0) | 2019.03.22 |
Contents
소중한 공감 감사합니다.