728x90
반응형
이벤트 등록하는 방법에는 3가지가 있다.
inline 방식
태그안에 넣는 방법이다. 재사용이 불가능하다는 단점이 있다.
<body>
<button onclick="myButton(event);">buttonType</button>
<script>
function myButton(oEvent) {
console.log(oEvent.target);
console.log(oEvent.type);
console.log(oEvent);
}
</script>
</body>propertyListener 방식
마지막에 셋팅한 event만 실행한다.
<body>
<button id="targetButton">buttonType</button>
<input type="text" placeholder="-빼고 숫자만 입력하세요" id="targetInput" onchange="myInput(event);"></input>
<script>
var oTargetButton = document.querySelector("#targetButton");
var oTargetInput = document.querySelector("#targetInput");
oTargetButton.onclick = function (oEvent) { //function(익명함수), 기명함수도 가능
alert("첫번째 클릭");
}
oTargetButton.onclick = function (oEvent) {
alert("두번째 클릭");
}
oTargetInput.onchange = function (oEvent) {
alert("oEvent.target : " + oEvent.target + ", oEvent.type :" + oEvent.type);
}
</script>
</body>실행시 두번째 클릭 alert만 나온다.
addEventListener 방식
세팅한 Event 모두 실행한다.
문법: addEventListener("이벤트종류","콜백함수");
<body>
<button id="targetButton">buttonType</button>
<input type="text" placeholder="-빼고 숫자만 입력하세요" id="targetInput" onchange="myInput(event);"></input>
<script>
oTargetButton.addEventListener("click", function(oEvent){
alert("첫번째 클릭");
});
oTargetButton.addEventListener("click", function(oEvent){
alert("두번째 클릭");
});
oTargetInput.addEventListener("change", function(oEvent){
alert("oEvent.target : " + oEvent.target + ", oEvent.type :" + oEvent.type);
});
</script>
</body>모두 실행되기 때문에 첫번째클릭, 두번째클릭 알림창이 모두 나온다.
숫자만 입력할 수 있게 하는 이벤트
<script>
function myInput(oEvent) {
var sInputValue = oEvent.target.value; //target으로 inputvalue 가져옴
var oRegExp = /^[0-9]/g;
if(!oRegExp.test(sInputValue)){
alert("숫자만 입력하십시오");
oEvent.target.value = ""; //default값 넣어줄수도 있음
oEvent.target.style.backgroundColor = "blue"; //잘못입력하면 입력필드배경색 바꿈
return;
}
}
</script>728x90
반응형
'Fiori > UI5' 카테고리의 다른 글
| [JavaScript] jQuery (0) | 2023.03.07 |
|---|---|
| [JavaScript] JSON (0) | 2023.03.07 |
| [JavaScript] Element 속성 (0) | 2023.03.07 |
| [JavaScript] Element 식별자 (0) | 2023.03.06 |
| [JavaScript] 문서 객체 모델(DOM) 접근 (0) | 2023.03.06 |
댓글