Javascript 이벤트 응답 연구 Notes_javascript 기술 구성
- WBOY원래의
- 2016-05-16 15:28:111435검색
이벤트란
JavaScript는 동적 페이지를 생성합니다. 이벤트는 JavaScript로 감지할 수 있는 동작입니다. 웹페이지의 모든 요소는 JavaScript 기능이나 절차를 트리거할 수 있는 특정 이벤트를 생성할 수 있습니다.
1. 마우스 클릭 이벤트(onclick)
onclick은 웹 페이지에서 마우스를 클릭할 때 발생하는 마우스 클릭 이벤트입니다. 동시에 onclick 이벤트에 의해 호출되는 프로그램 블록이 실행되며 일반적으로 버튼과 함께 사용됩니다.
예: 버튼을 클릭하면 onclick 이벤트가 트리거되고 두 숫자의 합계에 대한 add2() 함수가 호출됩니다.
<html>
<head>
<script type="text/javascript">
function add2(){
var numa,numb,sum;
numa=6;
numb=8;
sum=numa+numb;
document.write("两数和为:"+sum); }
</script>
</head>
<body>
<form>
<input name="button" type="button" value="点击提交" onclick="add2()" />
</form>
</body>
</html>
참고: 웹페이지에서 이벤트를 사용하는 경우 요소에서 이벤트 속성을 설정하세요.
2. 마우스 오버 이벤트(onmouseover)
마우스 오버 이벤트. 마우스가 개체 위로 이동하면 개체가 onmouseover 이벤트를 트리거하고 onmouseover 이벤트에 의해 호출된 프로그램을 실행합니다.
마우스가 "확인"버튼을 통과하면 message() 함수가 호출되고 메시지 대화 상자가 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后，再单击确定!"); }
</script>
</head>
<body>
<form>
密码:
<input name="password" type="password" >
<input name="确定" type="button" value="确定" onmouseover="message()"/>
</form>
</body>
</html>
3. 마우스 아웃 이벤트(onmouseout)
마우스 이동 이벤트는 마우스가 현재 개체에서 멀어지면 onmouseout이라는 프로그램이 실행됩니다.
마우스가 "Click Me" 버튼에서 멀어지면 message() 함수가 호출되고 메시지 대화 상자가 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移开事件 </title>
<script type="text/javascript">
function message(){
alert("不要移开，点击后进行慕课网!"); }
</script>
</head>
<body>
<form>
<a href="http://www.imooc.com" onmouseout="message()">点击我</a>
</form>
</body>
</html>
4. 커서 포커스 이벤트(onfocus)
웹 페이지의 객체가 포커스를 얻으면 onfocus 호출을 수행하는 프로그램이 실행됩니다.
드롭다운 목록에 포커스가 생기면 message() 함수를 호출하면 대화상자가 뜹니다. "현재 직업을 선택해주세요! ".
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 光标聚焦事件 </title>
<script type="text/javascript">
function message(){
alert("请选择，您现在的职业！");
}
</script>
</head>
<body>
请选择您的职业：<br>
<form>
<select name="career" onfocus="message()">
<option>学生</option>
<option>教师</option>
<option>工程师</option>
<option>演员</option>
<option>会计</option>
</select>
</form>
</body>
</html>
5. 아웃포커스 이벤트(온블러)
onblur 이벤트와 onfocus는 상대적인 이벤트입니다. 커서가 현재 초점을 맞춘 객체를 벗어나면 onblur 이벤트가 트리거되고 호출된 프로그램이 동시에 실행됩니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 失焦事件 </title>
<script type="text/javascript">
function message(){
alert("请确定已输入密码后，在移开!"); }
</script>
</head>
<body>
<form>
用户:
<input name="username" type="text" value="请输入用户名！" >
密码:
<input name="password" type="text" value="请输入密码！" onblur="message()">
</form>
</body>
</html>
6. 콘텐츠 선택 이벤트(onselect)
선택 이벤트는 텍스트 상자나 텍스트 필드의 텍스트를 선택하면 onselect 이벤트가 트리거되고 호출된 프로그램이 실행됩니다.
개인 프로필 텍스트 상자의 텍스트를 선택하면 onselect 이벤트가 트리거되고 대화 상자가 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 内容选中事件 </title>
<script type="text/javascript">
function message(){
alert("您触发了选中事件！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onselect="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
7. 텍스트 상자 내용 변경 이벤트(onchange)
텍스트 상자의 내용을 변경하여 onchange 이벤트를 트리거하는 동시에 호출된 프로그램을 실행합니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 文本框内容改变事件 </title>
<script type="text/javascript">
function message(){
alert("您改变了文本内容！"); }
</script>
</head>
<body>
<form>
个人简介：<br>
<textarea name="summary" cols="60" rows="5" onchange="message()">请写入个人简介，不少于200字！</textarea>
</form>
</body>
</html>
8. 로딩 이벤트(onload)
이벤트는 페이지가 로드된 직후에 발생하며 동시에 호출된 프로그램이 실행됩니다.
참고: 1. 페이지가 로드되면 onload 이벤트가 트리거되고 해당 이벤트가 6c04bd5ca3fcae76e30b72ad730ca86d 태그에 기록됩니다.
2. 이 섹션의 로딩 페이지는 새로운 페이지를 여는 것으로 이해될 수 있습니다.
다음 코드에서는 새 페이지가 로드되면 "로드 중입니다. 잠시 기다려 주십시오."라는 대화 상자가 나타납니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
function message(){
alert("加载中，请稍等…"); }
</script>
</head>
<body onload="message()">
欢迎学习JavaScript。
</body>
</html>
9. 언로드 이벤트(onunload)
사용자가 페이지를 종료하면(페이지 닫기, 페이지 새로 고침 등) onUnload 이벤트가 트리거되고 동시에 호출된 프로그램이 실행됩니다.
참고: 브라우저마다 onunload 이벤트 지원이 다릅니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 卸载事件 </title>
<script type="text/javascript">
window.onunload = onunload_message;
function onunload_message(){
alert("您确定离开该网页吗？");
}
</script>
</head>
<body onunload="onunload_message">
欢迎学习JavaScript。
</body>
</html>
테스트 결과 IE 브라우저에서만 실행되고 다른 브라우저에서는 실행되지 않는 것으로 나타났습니다.
위 내용은 Javascript 이벤트 응답의 9가지 상태입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.