事件包括3部分:
(1)事件主角:按钮、div元素、其他
(2)事件类型:点击、移动、其他
(3)事件过程
事件类型:
1、鼠标事件
事件 | 含义 |
---|---|
onclick | 鼠标单击事件 |
onmouseover | 鼠标移入事件 |
onmouseout | 鼠标移出事件 |
onmousedown | 鼠标按下事件 |
onmouseup | 鼠标松开事件 |
onmousemove | 鼠标移动事件 |
(1)鼠标单击
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = alertMes;
function alertMes() {
alert("欢迎来到绿叶学习网!");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="按钮"/>
</body>
</html>
(2)鼠标移入和鼠标移出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oP = document.getElementById("content");
oP.onmouseover = function ()
{
this.style.color = "red";
};
oP.onmouseout = function ()
{
this.style.color = "black";
};
};
</script>
</head>
<body>
<p id="content">绿叶学习网</p>
</body>
</html>
(3)鼠标按下和鼠标松开
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oTitle = document.getElementById("title");
var oBtn = document.getElementById("btn");
oBtn.onmousedown = function ()
{
oTitle.style.color = "red";
};
oBtn.onmouseup = function ()
{
oTitle.style.color = "black";
};
};
</script>
</head>
<body>
<h1 id="title">绿叶学习网</h1>
<hr />
<input id="btn" type="button" value="button" />
</body>
</html>
2、键盘事件
(1)键盘按下:onkeydown
(2)键盘松开:onkeyup
例:统计输入字符的长度
<!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>
3、表单事件
(1)获取(失去)焦点:onfocus、onblur
具有“获取焦点”和“失去焦点”特点的元素有:表单元素(单选框、复选框、单行文本框、多行文本框、下拉列表)、超链接
例:搜索框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#search{color:#bbbbbb;}
</style>
<script>
window.onload = function ()
{
//获取元素对象
var oSearch = document.getElementById("search");
//获取焦点
oSearch.onfocus = function ()
{
if (this.value == "百度一下,你就知道")
{
this.value = "";
}
};
//失去焦点
oSearch.onblur = function ()
{
if (this.value == "")
{
this.value = "百度一下,你就知道";
}
};
}
</script>
</head>
<body>
<input id="search" type="text" value="百度一下,你就知道"/>
<input type="button" value="搜索" />
</body>
</html>
(2)选中“单行文本框”或“多行文本框”中的内容: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>
(3)具有多个选项的表单元素:onchange
在单选框、复选框、下拉列表选择某一项时触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oFruit = document.getElementsByName("fruit");
var oP = document.getElementById("content");
for (var i = 0; i < oFruit.length; i++)
{
oFruit[i].onchange = function ()
{
if (this.checked)
{
oP.innerHTML = "你选择的是:" + this.value;
}
};
}
}
</script>
</head>
<body>
<div>
<label><input type="radio" name="fruit" value="苹果" />苹果</label>
<label><input type="radio" name="fruit" value="香蕉" />香蕉</label>
<label><input type="radio" name="fruit" value="西瓜" />西瓜</label>
</div>
<p id="content"></p>
</body>
</html>
4、编辑事件
(1)防止内容被复制:oncopy
语法:
document.body.oncopy = function()
{
return false;
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.body.oncopy = function ()
{
return false;
}
}
</script>
</head>
<body>
<div>不要用战术上的勤奋,来掩盖战略上的懒惰。</div>
</body>
</html>
(2)防止页面内容被选取:onselectstart
document.body.onselectstart=function()
{
return false;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
document.body.onselectstart = function ()
{
return false;
}
}
</script>
</head>
<body>
<div>成功的人总喜欢神化自己,为的是让其他人觉得成功很难。</div>
</body>
</html>
(3)禁止鼠标右键:oncontextmenu
document.oncontextmenu = function ()
{
return false;
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function () {
document.oncontextmenu = function () {
return false;
}
}
</script>
</head>
<body>
<div>每个人的人生掌握在自己的手里,而不是别人的评价里。</div>
</body>
</html>
说明:尽管鼠标右键功能被禁用,但可以用快捷键,如使用ctrl+c快捷键来复制内容;使用ctrl+s快捷键来保存网页等。
5、页面事件
(1)文档加载完成后再执行的一个事件:onload
语法:
window.onload = function()
{
……
}
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
var oBtn = document.getElementById("btn");
oBtn.onclick = function ()
{
alert("JavaScript");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="提交" />
</body>
</html>
(2)离开页面之前触发的一个事件:onbeforeunload
语法:
window.onbeforeunload = function()
{
...
}
例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
alert("欢迎来到绿叶学习网!");
}
window.onbeforeunload = function (e)
{
e.returnValue = "记得下来再来喔!";
}
</script>
</head>
<body>
</body>
</html>
事件调用方式
1、在script标签中调用
obj.事件名 = function()
{
...
};
说明:obj是一个DOM对象,所谓的DOM对象,指的是使用getElementById()、getElementsByTagName()等方法获取到的元素节点。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload = function ()
{
//获取元素
var oBtn = document.getElementById("btn");
//为元素添加点击事件
oBtn.onclick = function ()
{
alert("绿叶学习网");
};
}
</script>
</head>
<body>
<input id="btn" type="button" value="弹出" />
</body>
</html>
2、在元素中调用
指的是直接在HTML属性中来调用事件,这个属性又叫做“事件属性”。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function alertMes()
{
alert("绿叶学习网");
}
</script>
</head>
<body>
<input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>