JavaScript는 동적 페이지를 생성하는 기능을 제공합니다. 이벤트는 JavaScript로 감지할 수 있는 동작입니다. 웹페이지의 모든 요소는 JavaScript 기능을 트리거하는 특정 이벤트를 생성할 수 있습니다. 그렇다면 js에는 어떤 이벤트가 있나요? 이 글에서는 js에서 일반적으로 사용되는 이벤트를 소개합니다.
더 이상 고민하지 말고 바로 본론으로 들어가겠습니다.
1. js에서 일반적으로 사용되는 이벤트인 Onclick 이벤트
Click 이벤트(onclick은 js의 메서드가 아니며 onclick은 단순한 이벤트입니다. 브라우저에서 제공하는 js가 dom을 작동할 수 있도록 하는 dom 인터페이스이므로 onclick은 대소문자를 구분합니다. 예를 들어 HTML 코드는 대소문자를 구분할 필요가 없습니다.
js의 onclick 이벤트에 대한 코드 예:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmyFunction(){
alert("测试onclick点击事件");
}
</script>
</head>
<body>
<center>
<buttononclick="myFunction()">点击这里</button>
</center>
</body>
</html>설명:
onclick은 일반적으로 다음 기본 사항에 있습니다. 객체 생성:
button(버튼 객체), checkbox(체크박스), radio(라디오 버튼), 재설정 버튼(재설정 버튼), 제출 버튼(제출 버튼)
2. 온로드 이벤트
는 본문에서 실행할 수 있습니다. < bodyonload="alert(123)">
js의 onload 이벤트에 대한 코드 예:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functiontest(){
alert("测试onload方法");
}
</script>
</head>
<bodyonload="test()">
</body>
</html>참고: 이 메서드는
3. js에서 일반적으로 사용되는 이벤트인 Onchange 이벤트
는 콘텐츠가 변경될 때 발생합니다. 텍스트 상자 및 목록 상자와 같은 개체에 사용할 수 있습니다. 이 이벤트는 일반적으로 사용자가 콘텐츠를 수정하여 발생한 다른 변경 사항에 응답하는 데 사용됩니다.js의 onchange 이벤트 코드 예:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionupperCase(){
varx = document.getElementById("fname").value;
document.getElementById("fname").value = x.toUpperCase();
}
</script>
</head>
<body>
<p>
<labelfor="name">用户名：</label>
<inputtype="text"id="fname"onchange="upperCase()"value=""/>
</p>
</body>
</html>4. js에서 일반적으로 사용되는 이벤트인 Onblur 이벤트
이 이벤트는 현재 요소가 손실될 때 트리거됩니다. onfocus 이벤트에 해당하는 focus: focus 이벤트를 가져옵니다. onblur 이벤트: 요소가 포커스를 잃습니다.js의 onblur 이벤트 및 onfocus 이벤트의 코드 예:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionchkvalue(txt) {
if(txt.value=="") alert("文本框里必须填写内容!");
}
functionsetStyle(x){
document.getElementById(x).style.background="yellow"
}
</script>
</head>
<body>
失去焦点：
<inputtype="text"name="name"value=""size="30"onblur="chkvalue(this)"><br>
得到焦点：
<inputtype="text"id="name"value=""size="30"onfocus="setStyle(this.id)">
</body>
</html>5. 일반적으로 사용되는 이벤트 js Onscroll event
Window 스크롤 이벤트: 페이지가 스크롤될 때 함수가 호출됩니다. 이 이벤트는 메서드 외부에 기록되며 함수 이름 뒤에 window.onscroll=move와 같이 괄호가 없습니다.js의 onscroll 이벤트 코드 예:
<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmove() {
alert("页面滚动时调用");
}
window.onscroll = move;
</script>
</head>
<body>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
测试onscroll方法<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</body>
</html>6. js에서 일반적으로 사용되는 이벤트의 Onsubmit 이벤트#🎜🎜 # 은