js의 이벤트 캡처를 위한 케이스 코드
- 不言원래의
- 2018-08-29 16:30:321511검색
이 기사는 js의 이벤트 캡처에 대한 사례 코드를 제공합니다. 특정 참조 값이 있으므로 도움이 될 수 있습니다.
1. 이벤트 유형
Onclick은 마우스를 클릭할 때 트리거된다는 의미입니다.
Ondblclick은 마우스를 두 번 클릭할 때 트리거된다는 의미입니다.
Onmouseover는 마우스가 안으로 움직일 때 트리거됨을 의미합니다.
onmouseout은 마우스가 밖으로 움직일 때 트리거됨을 의미합니다.
2. 케이스 및 코드 작성
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Document</title><style type="text/css">
*{margin:0;padding:0;list-style:none;}
#myul{
width:500px;
margin:100px auto;
}
#myul li{
width:500px;
height:30px;
line-height:30px;
text-align:center;
background:#ccc;
border:1px solid #000;
}
</style>
</head>
<body>
<ul id="myul">
<li id="li01">单击</li>
<li id="li02">双击</li>
<li id="li03">鼠标移入</li>
<li id="li04">鼠标移出</li>
<li>打酱油滴</li>
</ul></body></html><script type="text/javascript">
var li01 = document.getElementById('li01');
li01.onclick = function(){
alert('单击事件被捕获');
} var li02 = document.getElementById('li02');
li02.ondblclick = function(){
alert('双击事件被捕获');
} var li03 = document.getElementById('li03');
li03.onmouseover = function(){
alert('鼠标移入被捕获');
} var li04 = document.getElementById('li04');
li04.onmouseout = function(){
alert('鼠标移出被捕获');
}
</script> 3. 결과 표시 #🎜 🎜# #🎜 🎜#
3.1 표의 첫 번째 열을 클릭하면 "클릭 이벤트가 캡처되었습니다"라는 메시지가 나타납니다.
3.2 표의 두 번째 열을 두 번 클릭하면 "두 번 클릭 이벤트 캡처됨"이 나타납니다.
3.3 마우스를 표의 세 번째 열로 이동하면 "마우스 이동 이벤트가 캡처되었습니다"라는 메시지가 나타납니다.
3.4 표의 네 번째 열 밖으로 마우스를 이동하면 "마우스 아웃 이벤트 캡처됨" 팝업이 나타납니다. 
js 중국어 수학 함수 요약 및 사례 소개
위 내용은 js의 이벤트 캡처를 위한 케이스 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.