js에는 어떤 이벤트가 있나요? JS의 일반적인 이벤트 소개-JS 튜토리얼-php.cn

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)"> 여기서 onload="test()"와 같이 onload 후에 메서드를 작성한 다음 JavaScript로 test() 메서드를 작성한 다음 페이지 이 메서드는 로드 시 가장 먼저 호출됩니다.

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>

로그인 후 복사

Description: 사용자가 텍스트 상자에 텍스트를 입력하면 onchange가 트리거되지 않습니다. . 입력이 완료된 후 사용자가 텍스트 상자 외부를 클릭하면 이벤트가 트리거되고, 드롭다운 상자인 경우 선택이 완료된 후에 트리거됩니다.

위 예시의 효과는 입력 상자가 포커스를 잃으면 내용이 대문자로 변환된다는 것입니다. 이는 콘텐츠 변경 사항을 감지하기 전에 입력이 포커스를 잃어야 하기 때문에 발생합니다. 변경 이벤트는 일반적으로 드롭다운 메뉴 선택 태그에 사용됩니다.

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 이벤트#🎜🎜 # 은

양식 요소에 속하며 양식 태그에 작성됩니다. 구문: onsubmit="반환 함수 이름()".

js의 onsubmit 이벤트 코드 예:

<%@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("测试onsubmit........"+testForm.name.value);
  }
 </script>
</head>
<body>
<formaction=""method="post"name="testForm"onsubmit="returnmove()">
    <inputtype="text"name="name"value="">
    <br>
    <inputtype="submit"name="submit"value="测试onsubmit"/>
</form>
</body>
</html>

로그인 후 복사

7.js에서 일반적으로 사용되는 이벤트: 마우스 관련 이벤트# 🎜 🎜#

Onmouseover: 마우스가 개체 범위 위로 이동하면 이벤트가 트리거되어 함수를 호출합니다. 참고: 같은 영역에서는 어떻게 움직여도 해당 기능은 한 번만 실행됩니다.

Onmouseout: 마우스가 개체의 범위를 벗어나면 함수를 호출하는 이벤트가 트리거됩니다.

Onmousemove: 마우스가 개체 범위 위로 이동하면 이벤트가 트리거되어 함수를 호출합니다. 참고: 같은 영역에서는 마우스를 한 번 움직이면 이벤트가 발생합니다.

코드 예:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionbigImg(x)
{
x.style.height="180px";
x.style.width="180px";
}
functionnormalImg(x)
{
x.style.height="128px";
x.style.width="128px";
}
</script>
</head>
<body>
<imgonmousemove="bigImg(this)"onmouseout="normalImg(this)"border="0"src="images/defaultAvatar.gif"alt="Smiley">
</body>
</html>

로그인 후 복사

Onmouseup: 마우스를 놓을 때 이벤트 트리거

# 🎜 🎜#Onmousedown: 마우스 버튼을 눌렀을 때 발생하는 이벤트

코드 예시:

<%@pagelanguage="java"import="java.util.*"pageEncoding="UTF-8"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript的一些常用方法</title>
<scripttype="text/javascript">
functionmouseDown(){
    document.getElementById("p1").style.color="red";
}
functionmouseUp(){
    document.getElementById("p1").style.color="green";
}
</script>
</head>
<body>
<pid="p1"onmousedown="mouseDown()"onmouseup="mouseUp()">
请点击文本！mouseDown()函数当鼠标按钮在段落上被按下时触发。此函数把文本颜色设置为红色mouseUp(。) 函数在鼠标按钮被释放时触发。mouseUp() 函数把文本的颜色设置为绿色。
</p>
</body>
</html>

로그인 후 복사

위 내용은 이 글의 전체 내용이며, js 이벤트에 대한 자세한 내용은 js 개발 매뉴얼을 참조하세요.

위 내용은 js에는 어떤 이벤트가 있나요? JS의 일반적인 이벤트 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!