JavaScript 클라이언트 이벤트 드라이버의 자세한 해석(그래픽 튜토리얼)-JS 튜토리얼-php.cn

JavaScript 클라이언트 이벤트 드라이버의 자세한 해석(그래픽 튜토리얼)

亚连

풀어 주다： 2018-05-21 10:14:23

원래의

1295명이 탐색했습니다.

이제 JavaScript 기반의 클라이언트 측 이벤트 드라이버에 대해 간략하게 설명하겠습니다. 이제 그것을 여러분과 공유하고 모든 사람에게 참고 자료로 제공하겠습니다.

우리는 객체지향의 "하룻밤새" 개발 이후 거의 모든 언어가 객체 기반 언어가 될 수 있다는 것을 알고 있으며, JavaScript도 객체 기반 언어입니다. 브라우저에서 사용자의 행동을 '이벤트'라고 하며, 이후에 발생하는 팝업, 브라우저 크기 변경, 확인, 발라발라 등 일련의 동작을 모두 '이벤트 기반'이라고 합니다. 물론, 이번에는 자주 발생하는 몇 가지 이벤트를 중심으로 소개하겠습니다.

ps: js 스크립트 지원은 브라우저에 따라 다릅니다! ! ! 일부 하위 버전 브라우저에서는 지원하지 않을 수 있습니다! ! !

1. 클릭 이벤트(onClick)

클릭 이벤트란? 사용자가 마우스 버튼을 클릭하면 클릭 이벤트가 생성됩니다. 동시에 onclick에 의해 지정된 이벤트 핸들러가 호출됩니다. 일반적으로 버튼(버튼 개체), 체크박스(체크박스), 라디오(라디오 버튼), 재설정 버튼(재설정 버튼) 및 제출 버튼(제출 버튼)에 사용됩니다.

확대 트릭:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

2. 이벤트 변경(onChange)

사용자가 양식의 값을 변경하면 onchange 이벤트가 트리거됩니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

3. 이벤트 선택(onSelect)

페이지의 요소가 선택되면 onselect 이벤트가 실행됩니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

4. 로딩 이벤트(onLoad)

로딩 이벤트는 웹 페이지가 방금 열렸을 때 발생하는 이벤트입니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急，小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.

5.Beforeunload 이벤트(beforeunload)

정확하게는 페이지를 떠나기 전에 "이벤트"라고 부르는 것이 더 적절합니다. ", 현재 탭을 클릭할 때 이 이벤트는 닫기 버튼을 눌렀을 때 트리거됩니다.

코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢？╥﹏╥...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

로그인 후 복사

효과는 다음과 같습니다.