JS的精髓，事件详解
JS的精髓，事件详解
- 1.鼠标事件
- 鼠标单击
- 鼠标移入和鼠标移出
- 鼠标按下和鼠标松开
- 2.键盘事件
- 3.表单事件
- onfocus和onblur
- onselect
- onchange
- 4.编辑事件
- oncopy
- onselectstart
- oncontextmenu
- 5.页面事件
- onload
- onbeforeunload
1.鼠标事件
在JavaScript中，常见的鼠标事件如下：
鼠标单击
单击事件onclick，如点击某个按钮弹出一个提示框。这里要特别注意一点，单击事件不只是按钮才有，任何元素我们都可以为它添加单击事件！
鼠标移入和鼠标移出
当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件；而将鼠标移出某个元素时，就会触发onmouseout事件
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEXT</title>
<script src="js/index.js"></script>
</head>
<body>
<p id="content">菜单</p>
</body>
</html>
window.onload=function () {
var oP = document.getElementById("content");
oP.onmouseover = function() {
this.style.color = "red";
}
oP.onmouseout = function() {
this.style.color = "blue";
}
}
鼠标按下和鼠标松开
当用户按下鼠标时，会触发onmousedown事件；当用户松开鼠标时，则会触发onmouseup事件
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEXT</title>
<script src="js/index.js"></script>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
</html>
window.onload=function () {
var oBtn = document.getElementById("btn");
oBtn.onmousedown = function() {
oBtn.style.color = "red";
}
oBtn.onmouseup = function() {
oBtn.style.color = "blue";
}
}
2.键盘事件
在JavaScript中，常用的键盘事件共有两种。键盘按下：onkeydown。键盘松开：onkeyup
onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件
案例1：统计输入字符个数：🥞
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function()
{
var oTxt=document.getElementById("txt");
var oNum=document.getElementById("num");
oTxt.onkeyup=function()
{
var str=oTxt.value;
oNum.innerHTML=str.length;
};
};
</script>
</head>
<body>
<input id="txt" type="text" />
<div>字符串长度为：<span id="num">0</span></div>
</body>
</html>
案例2：验证输入是否正确：🤍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function()
{
var oTxt=document.getElementById("txt");
var oDiv=document.getElementById("content");
//定义一个变量，保存正则表达式
var myregex=/^[0-9]*$/;
oTxt.onkeyup=function()
{
//判断是否输入为数字
if(myregex.test(oTxt.value)){
oDiv.innerHTML="输入正确";
} else {
oDiv.innerHTML="必须输入数字";
}
};
};
</script>
</head>
<body>
<input id="txt" type="text" />
<div id="content" style="color:red;"></div>
</body>
</html>
3.表单事件
在JavaScript中，常用的表单事件有3种。onfocus和onbluronselect,onchange
onfocus和onblur
onfocus表示获取焦点时触发的事件，而onblur表示失去焦点时触发的事件，两者是相反的操作。
onfocus和onblur这两个事件往往都是配合一起使用的。例如用户准备在文本框中输入内容时，此时文本框会获得光标，就会触发onfocus事件。当文本框失去光标时，就会触发onblur事件。
案例：模仿百度搜索框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEXT</title>
<script src="js/index.js"></script>
</head>
<body>
<input type="text" id="search" value="百度一下，你就知道"/>
<input type="button" id="btn" value="搜索"/>
</body>
</html>
window.onload=function() {
var oSearch = document.getElementById("search");
// 获取焦点
oSearch.onfocus = function() {
if (this.value == "百度一下，你就知道") {
this.value = "";
};
}
// 失去焦点
oSearch.onblur = function() {
if (this.value == "") {
this.value = "百度一下，你就知道";
};
}
}
点击搜索框后：
对于焦点事件来说，还有一点需要补充。默认情况下，文本框是不会自动获取焦点的，而必须点击文本框才可以。但是我们经常看到很多页面一打开，文本框就已经自动获取了焦点，如百度首页。那么这个效果是怎么实现的呢？很简单，一个focus()方法就可以轻松搞定
window.onload=function() {
var oSearch = document.getElementById("search");
oSearch.focus();
}
onselect
在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function()
{
var oTxt1=document.getElementById("txt1");
var oTxt2=document.getElementById("txt2");
oTxt1.onselect=function()
{
alert("你选中了单行文本框中的内容");
};
oTxt2.onselect=function()
{
alert("你选中了多行文本框中的内容");
};
}
</script>
</head>
<body>
<input id="txt1" type="text" value="如果我真的存在，也是因为你需要我。"/><br />
<textarea id="txt2" cols="20" rows="5">如果我真的存在，也是因为你需要我。</textarea>
</body>
</html>
实际开发中，我们在使用搜索框的时候，每次点击搜索框，它就自动帮我们把文本框内的文本全选中了，此时就用到了select()方法
window.onload=function() {
var oSearch = document.getElementById("search");
oSearch.onclick = function() {
this.select();
};
}
点击输入框后：
onchange
在JavaScript中，onchange事件常用于“具有多个选项的表单元素”的操作。单选框选择某一项时触发。复选框选择某一项时触发。下拉列表选择某一项时触发。
案例：复选框的全选与反选：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TEXT</title>
<script src="js/index.js"></script>
</head>
<body>
<div>
<p><label><input type="checkbox" id="selectAll">全选/反选：</label></p>
<p><label><input type="checkbox" name="lan" value="C++">C++</label></p>
<p><label><input type="checkbox" name="lan" value="Go">Go</label></p>
<p><label><input type="checkbox" name="lan" value="Java">Java</label></p>
</div>
</body>
</html>
window.onload=function() {
var oSelectAll = document.getElementById("selectAll");
var oLan = document.getElementsByName("lan");
oSelectAll.onchange = function() {
if (this.checked) {
for (var i = 0 ; i < oLan.length ; i++) {
oLan[i].checked = true;
}
} else {
for (var i = 0 ; i < oLan.length ; i++) {
oLan[i].checked = false;
}
}
};
}
当【全选】复选框被选中时，下面的复选框就会被全部选中。再次点击【全选】按钮，此时下面所有复选框就会被取消选中
4.编辑事件
在JavaScript中，常用的编辑事件有3种。
oncopy,onselectstart,oncontextmenu
oncopy
在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制
window.onload=function() {
document.body.oncopy = function() {
return false;
}
}
选取文本后点击鼠标右键，【复制】这个选项还可以点击，但实际上，点击【复制】选项后再粘贴，是粘贴不出内容来的
onselectstart
在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取
window.onload=function() {
document.body.onselectstart = function() {
return false;
}
}
oncontextmenu
在JavaScript中，我们可以使用oncontextmenu事件来禁止使用鼠标右键
window.onload=function() {
document.oncontextmenu = function() {
return false;
}
}
5.页面事件
在JavaScript中，常用的页面事件只有下面2个。
onload,onbeforeunload
onload
在JavaScript中，onload表示文档加载完成后再执行的一个事件
onbeforeunload
在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件
window.onload = function() {
alert("欢迎！");
}
window.onbeforeunload = function(e) {
e.returnValue = "再见！";
}