JavaScript 클라이언트 이벤트 드라이버의 자세한 해석(그래픽 튜토리얼)
- 亚连원래의
- 2018-05-21 10:14:231301검색
이제 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>효과는 다음과 같습니다.
위 내용은 제가 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되기를 바랍니다.
관련 기사:
위 내용은 JavaScript 클라이언트 이벤트 드라이버의 자세한 해석(그래픽 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!