Home >Web Front-end >JS Tutorial >Case code for event capture in js
Case code for event capture in js
- 不言Original
- 2018-08-29 16:30:321555browse
The content of this article is about the case code of event capture in js. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
1. Event type
Onclick means it is triggered when the mouse clicks;
Ondblclick means it is triggered when the mouse double-clicks;
Onmouseover means it is triggered when the mouse moves in;
onmouseout means it is triggered when the mouse moves out;
2. Write a case and code
<!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. Display the results
3.1 Click the first column in the table, and "Click event is captured" will pop up
3.2 Double-click the second column in the table, and "Double-click event captured" will pop up
3.3 When the mouse moves into the third column of the table, "Mouse move event is captured" will pop up
3.4 When the mouse is moved out of the fourth column of the table, "Mouse out event captured" will pop up
Related recommendations: Summary and cases of mathematical functions in js
Detailed analysis of understanding JavaScript event mechanism
The above is the detailed content of Case code for event capture in js. For more information, please follow other related articles on the PHP Chinese website!