一、JavaScript鼠标事件
JavaScript鼠标事件
- 通常，事件处理器的命名原则是，在事件名称前加上前缀on。例如，对于click事件，其处理器名为onclick。对于事件名称，也是很好记忆的，顾名思义即可
鼠标单击事件
- 单击事件可谓JavaScript中最常用的事件了，例如点击某个按钮弹出一个提示框。这里大家一定要注意一点，单击事件并不是只有按钮才有，任何元素我们都可以为它添加单击事件！
<div id="btn">调试代码</div>
<script type="text/javascript">
var e = document.getElementById("btn");
e.onclick = function () {
alert("玩我么？");
}
</script>
鼠标移入和移出事件
- 其实， onmouseover和onmouseout这2个事件其实是好基友关系，平常都形影不离。这2个事件都是共同使用来分别控制鼠标“移入”和“移出”2种状态的
<h1 id="lvye">绿叶学习网</h1>
<script type="text/javascript">
var e = document.getElementById("lvye");
e.onmouseover = function () {
this.style.color = "red";
this.style.borderColor="red"
}
e.onmouseout = function () {
this.style.color = "black";
this.style.borderColor = "black"
}
</script>
分析：this.style.color = "black";
在这里this指向的是e元素节点，也就是说这句代码等价于：
e.style.color = "black";
鼠标按下和松开事件
- 在JavaScript中，鼠标的按下和松开事件分别是onmousedown和onmouseup。又一对好基友闪亮登场
<div id="main">
<h1 id="lvye">绿叶学习网</h1>
<hr />
<input id="btn" type="button" value="button" />
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var e = document.getElementById("lvye");
btn.onmousedown = function () {
e.style.color = "red";
}
btn.onmouseup = function () {
e.style.color = "black";
}
</script>
二、JavaScript键盘事件
- 在JavaScript中，常用的键盘事件有3种：
（1）onkeypress事件；
（2）onkeydown事件；
（3）onkeyup事件；
- JavaScript事件通过以下3个事件来捕获键盘事件：onkeydown、onkeypress与onkeyup。这三个事件的执行顺序如下：onkeydown → onkeypress → onkeyup。
onkeypress事件
- 在JavaScript中，onkeypress事件是在键盘上的某个键被按下到松开整个过程中触发的事件
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function refresh() {
//判断是否按下R键
if (window.event.keyCode == 82) {
location.reload(); //刷新页面
}
}
//调用函数
document.onkeypress = refresh;
</script>
</head>
<body>
<div>欢迎来到绿叶学习网！</div>
</body>
</html>
- 其中“window.event.keyCode == 82”表示判断是否按R键（大写R）刷新页面。当我们按下R键，会发现页面被刷新了
onkeydown事件
- onkeydown跟onkeypress非常相似，也是在键盘的按键被按下时触发。但是这2个事件有一下2大区别：
（1）onkeypress事件只在按下键盘的任一“字符键”（如A~Z、数字键）时触发，单独按下“功能键”（如F1 ~ F12、Ctrl键、Shift键、Alt键等）不会触发；而onkeydown无论是按下“字符键”还是“功能键”都会触发；
（2）按下“字符键”会同时触发onkeydown和onkeypress这2个事件，但是这2个事件有一定顺序：onkeydown>onkeypress；
onkeyup事件
- 在JavaScript中，onkeyup事件是在键盘的某个键被按下之后松开的一瞬间触发的事件。
- onkeyup事件在实际开发也常用到，比如在登录注册时，很多文本框都是在用户输入的同时判断是否符合要求
<input id="txt" type="text"/>
<div>字符串长度为：<span id="num">0</span></div>
<script type="text/javascript">
//获取DOM元素节点
var e = document.getElementById("txt");
var n = document.getElementById("num");
//定义文本框的onkeyup事件
e.onkeyup = function () {
var str = e.value.toString();
n.innerHTML = str.length;
}
</script>
- 这里实现了用户输入字符串的同时，JavaScript会自动计算字符串的长度。原理是这样：在输入字符串的时候我们需要点击键盘按钮，每输入一个字符我们都会触发onkeyup事件，因此我们可以使用onkeyup事件来统计
三、JavaScript表单事件
- 在JavaScript中，常用的表单事件有4种：
（1）onfocus事件；
（2）onblur事件；
（3）onchange事件；
（4）onselect事件；
onfocus和onblur事件
- onfocus和onblur这2个事件往往都是配合使用。例如。在用户在文本框输入信息时，将光标放在文本框中，文本框会获取焦点。当文本框失去光标时，文本框失去焦点
- onfocus表示获取焦点触发的事件，onblur表示失去焦点触发的事件
- 具有获得焦点和失去焦点事件的元素有3个：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
- 在这个例子中，当文本框获取焦点时，文本框提示文字就会消失；当文本框失去焦点后，会判断是否已经输入字符串，如果没有的话，文本框提示文字会重新出现
onchange事件
- 在JavaScript中，当用户在单行文本框text和多行文本框textarea输入文本时，由于文本框内字符串的改变将会触发onchange事件。此外，在下拉列表select中一个选项的状态改变后也会触发onchange事件。
- 具有获得onchange事件的元素有3个：
（1）单行文本框text；
（2）多行文本框textarea；
（3）下拉列表select；
<textarea id="txt" rows="5" cols="20"></textarea><br />
输入字符长度为：<span id="num"></span>
<script type="text/javascript">
var e = document.getElementById("txt");
var n = document.getElementById("num");
e.onchange = function () {
var len = e.value.length;
n.innerText = len;
}
</script>
- 当我们在文本框输入字符，然后让文本框失去焦点，即可看到统计字符串的长度值
onselect事件
- 在JavaScript中，当用户选中单行文本框text或多行文本框textarea的文本时，会触发onselect事件。onselect事件的具体过程是从鼠标按键被按下，到鼠标开始移动并选中内容的过程。这个过程并不包括鼠标键的放开
- 下拉列表列表项的选中触发的事件是onchange而不是onselect
<input id="txt1" type="text" value="欢迎来到绿叶学习网学习JavaScript入门教程" />
<br />
<textarea id="txt2" cols="20" rows="5">欢迎来到绿叶学习网学习JavaScript入门教程</textarea>
<script type="text/javascript">
document.getElementById("txt1").onselect = function() {
alert("你选中了单行文本框中的内容");
}
document.getElementById("txt2").onselect = function() {
alert("你选中了多行文本框中的内容");
}
</script>
四、JavaScript编辑事件
- 在JavaScript中，常见的编辑事件有3种：
（1）复制事件oncopy；
（2）剪切事件oncut；
（3）粘贴事件onpaste；
复制事件
- 在JavaScript中，在网页中复制内容时会触发复制事件oncopy。我们可以通过oncopy事件来禁止用户复制网页内容
- 此外，与oncopy配对的还有一个onbeforecopy，表示在复制内容之前触发的事件。也就是在时间上，onbeforecopy比oncopy早
<div>绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。绿叶学习网为广大网络工作者（网页开发人员、站长等）提供各种精品教程以及最精华资料。</div>
<script type="text/javascript">
document.body.oncopy = function() {
alert("版权所有，禁止复制！");
return false; //返回false，表示屏蔽复制功能
}
</script>
- 上述方法不能真正做到完全屏蔽，因为我们可以到浏览器中设置“禁用JavaScript”，这时使用JavaScript实现屏蔽复制就无效了。进一步扩展，使用这种屏蔽方式也极大影响了用户体验，大家在实际开发的时候如果不想你的网站成为鸟不拉屎的地方的话，还是少点用
剪切事件
- 在JavaScript中，当网页文本框等中选中的内容被剪切时会触发剪切事件oncut。
- 此外，与oncut配对的还有一个onbeforecut，表示在复制内容之前触发的事件。也就是在时间上，onbeforecut比oncut早
<textarea id="txt" cols="20" rows="5">绿叶学习网成立于2015年4月1日，是一个富有活力的技术学习网站。</textarea>
<script type="text/javascript">
var e = document.getElementById("txt");
e.oncut = function() {
alert("禁止剪切文本框内容！");
return false;
}
</script>
粘贴事件
- 在JavaScript中，当我们往文本框等中粘贴内容时会触发粘贴事件onpaste。
- 此外，与oncopy配对的还有一个onbeforepaste，表示在复制内容之前触发的事件。也就是在时间上，onbeforepaste 比onpaste早
<textarea id="txt" cols="20" rows="5"></textarea>
<script type="text/javascript">
var e = document.getElementById("txt");
e.onbeforepaste = function () {
window.clipboardData.setData("text",""); //清空剪贴板
}
</script>
五、JavaScript页面相关事件
window.通用事件名 = 要执行的JavaScript代码;
- 在JavaScript中，常用的页面相关事件共有3种：
（1）onload（加载事件）；
（2）onresize（页面大小事件）；
（3）onerror（出错事件）；
onload事件
window.onload=function(){
……
}
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
var e = document.getElementById("btn");
e.onclick = function () {
alert("JavaScript");
}
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
- 在CSS入门教程中的HTML文档流这一节我们知道，HTML文档是从上到下解析的。
- 当我们点击“提交”按钮的时候，浏览器会报错，这是因为默认情况下浏览器对一个页面是从上到下进行解析的，当浏览器解析到“var e = document.getElementById("btn");”就会感觉很疑惑，怎么半路杀出个程咬金呢？然后顿时崩溃了，
(>_<)
- 正确的JavaScript实现代码应该如下：
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
window.onload = function () {
var e = document.getElementById("btn");
e.onclick = function () {
alert("JavaScript");
}
}
</script>
</head>
<body>
<div id="main">
<input id="btn" type="button" value="提交" />
</div>
</body>
</html>
- 浏览器从上到下解析到window.onload时，就会先不解析window.onload里面的代码，而是继续往下解析，直到把整个HTML文档解析完成再去解析window.onload内部的代码。这时不需要程咬金自己报号，人家都知道他来了
- 还有人就问了，像下面JavaScript这种函数为什么就不需要加window.onload都正确呢？
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
function change() {
var e = document.getElementById("lvye");
e.style.color = "red";
e.style.border = "1px solid gray";
}
</script>
</head>
<body>
<h1 id="lvye">绿叶学习网</h1>
<input type="button" value="改变样式" onclick="change()"/>
</body>
</html>
- 我们知道函数必须调用才会生效，函数的定义本身不会自己执行。虽然浏览器从上到下解析页面代码，但是碰到函数的定义，它不会立刻解析。假如浏览器立刻解析的话，函数岂不是自动执行了，那这还是函数么？
- 当文档载入时产生就会产生onload事件，onload事件一个很重要的作用就是在首次载入文档时检测cookie的值，并用一个变量为其赋值，使它可以被源代码使用
onresize事件
- 在JavaScript中，对于页面大小改变的事件我们用的是onresize。这个事件常用于固定浏览器的大小
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<script type="text/javascript">
window.onresize = function () {
alert("窗口大小被改变");
}
</script>
</head>
<body>
</body>
</html>
onerror事件
- 在JavaScript中，当文档或图像加载过程中发生错误时就会触发onerror事件。onerror事件只有在IE浏览器下才有效
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
</head>
<body>
<img src="logo.jpg" onerror="alert('图片没有加载成功！')"/>
</body>
</html>
- 由于根据src找不到图片，图片加载失败，因此触发了onerror事件。
网友评论