JavaScript 事件绑定
◆键盘鼠标◆
键盘事件: 当键盘接收到按下弹起等按键时,执行操作.
<body onkeypress="keycode()">
<input type="text" name="text" onkeydown="func_keydown()">
<input type="text" name="text" onkeyup="func_keyup()">
<input type="text" name="text" onkeypress="func_keypress()">
<script type="text/javascript">
function func_keydown() { alert("你按下了键"); }
function func_keyup() { alert("你松开了键"); }
function func_keypress() { alert("你按下并松开"); }
function keycode(){
if(window.event.keyCode==32)
{
alert("你在body区域按下了空格.");
}
}
</script>
</body>
Resize: 当浏览器窗口或帧的大小发生变化时触发Resize事件.
<body onresize="mesg()">
<script type="text/javascript">
function mesg() {
document.write("窗口大小已被改变了..." + "<br>")
}
</script>
</body>
鼠标 Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.
<body>
<input type="button" id="button1" value="按钮1" onclick="alert('按钮1被按下了...')">
<input type="button" id="button2" value="按钮2" onclick="alert('按钮2被按下了...')">
<script type="text/javascript">
</script>
</body>
MouseDown&MouseUP: 当我们按下鼠标,系统触发MouseDown事件,释放鼠标时自动触发MouseUP事件.
<body>
<input type="button" value="点我" onmousedown="down()">
<input type="button" value="点我" onmouseup="up()">
<script type="text/javascript">
function down() {
document.write("你按下了按键...")
}
function up() {
document.write("你释放了按键...")
}
</script>
</body>
MouseOver&MouseOut: 鼠标指针到达一个对象之上时,触发MouseOver事件,鼠标离开时触发MouseOut事件.
<body>
<input type="submit" value="鼠标在按钮上" onmouseover="in_over()"></input>
<input type="submit" value="鼠标离开按钮" onmouseout="out_over()"></input>
<script type="text/javascript">
function in_over() {
alert("鼠标在按钮上...")
}
function out_over(){
alert("鼠标离开按钮...")
}
</script>
</body>
OnClick: 通用事件,可以绑定到任何可以操作的标签中,当事件触发后,执行对应的函数体.
<body>
<input type="button" value="弹窗" onclick="show()">
<script type="text/javascript">
function show(){
alert("触发弹窗一个窗口提示...")
}
</script>
</body>
Focus&Blur: 当屏幕上的光标进入对象区域内时触发focus事件,反之当光标离开时触发blur事件.
<body>
<input onfocus="Focus(this);" onblur="Blur(this);"
id="search" value="请输入关键字" style="color: gray;" />
<script type="text/javascript">
function Focus(ths){ //光标来到执行
ths.style.color = "black";
if(ths.value == '请输入关键字' || ths.value.trim() == ""){
ths.value = "";
}
}
function Blur(ths){ //光标离开执行
if(ths.value.trim() == ""){
ths.value = '请输入关键字';
ths.style.color = 'gray';
}else{
ths.style.color = "black";
}
}
</script>
</body>
Submit: 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form name="forms" method="post" onsubmit="return check()">
<input type="text" name="texts" size="20">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
function check() {
if(document.forms.texts.value == ""){
document.forms.focus()
alert("用户没有输入任何内容...")
return false
}else
{
alert("用户输入了内容...")
return true
}
}
</script>
</body>
Submit: 通常和form标记配合使用,其作用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.
<body>
<form action="https://www.baidu.com">
<input type="text" id="username">
<input type="submit" value="提交" onclick="return MySub()">
</form>
<script type="text/javascript">
function MySub(){
var user = document.getElementById("username");
if(user.value.length > 0){
alert("编辑框内有数据,允许提交数据..")
return true;
}else
{
alert("用户名输入不能为空...")
return false;
}
}
</script>
</body>
Reset: 通常情况下和form标记配合使用,其起到的作用是,当用户完成信息输入后,按下按钮自动清空已经输入的数据.
<body>
<form name="forms" method="post" >
<input type="text">
<input type="password">
<input type="reset" value="重置" onreset="reset()">
</form>
<!--<script type="text/javascript">-->
<!--function reset(){-->
<!--alert("内容已经清空了...")-->
<!--return 1-->
<!--}-->
<!--</script>-->
</body>
Change: 当文本区域中的鼠标指针移离该对象时,若对象内容与原来内容不同,则就会触发Change事件.
<body>
<textarea name="text" rows="3" cols="30" value=""
onchange="show()"></textarea>
<script type="text/javascript">
function show(){
alert("您在文本框中添加了新的内容...")
}
</script>
</body>
Select: 当一个文本框,文本区域对象中的文本被选中时就会触发Select事件,未被选择则不会出现提示框.
<body>
<input type="text" value="hello lyshark" onselect="show()">
<script type="text/javascript">
function show(){
alert("您选中了文本框中的文本内容...")
}
</script>
</body>
Error: 当网页因为某种原因出现错误时就会触发,在错误处理程序中可以绑定操作,该标签常用与<body>,<img>配合.
<body>
<img src="temp.jpg" onerror="error_msg()">
<script type="text/javascript">
function error_msg(){
alert("图片加载失败了...")
}
</script>
</body>
JavaScript 对象编程
对象是编程语言中很重要的特征之一,JS是基于对象的编程语言,所以支持面向对象的所有特性,灵活使用这些对象能够实现丰富而强大的功能,下面我们首先来看如何创建一个自定义类,代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){ //定义类,类名MyClass
this.name = name;
this.age = age;
this.print = function(name,age){ //定义的一个函数体
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
上述代码执行后会打印出姓名和年龄,但是这种写法在实例化对象时,系统会为每个对象中均保存了一个相同的print()函数,从而浪费内存,使用原型写法可以解决该问题,改进代码如下:
<body>
<script type="text/javascript">
function MyClass(name,age){
this.name = name;
this.age = age;
}
MyClass.prototype = {
print:function(){
document.write("姓名: " + this.name + "年龄: " + this.age);
}
}
var temp = new MyClass("lyshark",22); //实例化一个对象
temp.print() //调用对象中的函数体
</script>
</body>
◆其他事件◆
打开关闭窗口: 利用window.open()打开网页,window.close()关闭打开的网页.
msg.html
<body bgcolor="#bc8f8f">
<table width="300" height="200" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"> 网页通知
<p> 这是一个通知信息,您可以忽略掉</p>
</td>
</tr>
</table>
</body>
index.html
<body>
<input type="button" value="弹出通知" onclick="msg()">
<input type="button" value="关闭通知" onclick="msg_close()">
<script type="text/javascript">
function msg(){
open("msg.html","通知",height=50,width=30,top=20,left=10);
}
function msg_close() {
close()
}
</script>
</body>
弹出提示框: 点击按钮自动弹出Window.alert()提示消息框.
<body>
<input type="button" value="点击弹窗" onclick="msg()">
<script type="text/javascript">
function msg(){
alert("这是一个提示框...")
}
</script>
</body>
弹出选择框: Window.confirm()弹出一条信息让用户确认,包括确认和取消按钮.
<body>
<input type="button" value="弹窗口" onclick="msg()">
<script type="text/javascript">
function msg(){
if(confirm("请输入你的选项..")){
alert("感谢您的参与..") //确认按钮执行语句
}else{
alert("取消语句..") //取消按钮执行语句
}
}
</script>
</body>
弹出输入框: window.prompt()用于弹出一个输入框,可以让用户输入一些信息.
<body>
<script type="text/javascript">
var passwd = prompt("请输入密码(密码是123): ","");
while(passwd !="123"){
passwd = prompt("密码错误,请重新输入: ");
}
if(passwd =="123"){alert("密码正确...")}
</script>
</body>
设置单次定时器: 以下案例,实现当点击删除按钮时,屏幕提示删除成功,在5秒后自动的隐藏标签.
<body>
<div id="status" style="color: red;"> </div>
<input type="button" value="删除定时" onclick="DeleteStatus()">
<script type="text/javascript">
function DeleteStatus(){
var temp = document.getElementById("status");
temp.innerText = "删除成功了...";
setTimeout(function(){
temp.innerText = "";
},50000); //设置5秒后执行清空标签
}
</script>
</body>
输入框触发事件: 当输入框中输入内容时,自动触发输入事件.
<form action="">
手机号: <input type="text" id="userphone">
<input type="submit">
</form>
<script type="text/javascript">
// 输入框发生变化触发
document.getElementById("userphone").oninput=function(){
console.log(this.value);
}
// 键盘按下触发
document.getElementById("userphone").onkeyup=function(){
console.log(this.value);
}
</script>
网络相关事件: 当网络断开,或者连接时自动触发的事件.
<script>
// 网络联通后执行
window.addEventListener("online",function(){
console.log("网络已连接");
});
// 网络断开后触发
window.addEventListener("offline",function(){
console.log("网络已断开");
});
</script>
设置循环定时器: setIntercal设置定时器,clearInterval清除定时器,定时器用于周期性执行.
<body>
<input type="text" id="clock">
<input type="button" value="开始执行" onclick="begin_func()">
<input type="button" value="取消执行" onclick="end_func()">
<script type="text/javascript">
function begin(){
var now = new Date();
var stime = now.getTime()
var ret = document.getElementById("clock");
ret.value=stime;
}
var ID; //定义全局变量,后期用于清楚定时器
function begin_func(){
ID =setInterval(begin,1000); //每隔1秒执行一次,设置定时器
}
function end_func(){
clearInterval(ID); //取消一秒内执行,清除定时器
ID = undefined;
}
</script>
</body>
定时器设置按钮: 通过定时器计时默认将按钮禁止点击,等超过五秒后将按钮变为可点击状态.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btnShow" disabled="true" value="等待5秒后可用"/>
<script type="text/javascript">
var time1 = 5;
var id1, btnShow;
onload = function ()
{
// 获取按钮,启动定时器
btnShow = document.getElementById('btnShow');
id1 = setInterval('changeBtn(btnShow)', 1000);
};
function changeBtn(btn1) {
time1--;
btn1.value = "等待" + time1 + "秒后可用";
if (time1 == 0)
{
// 当5秒结束后让按钮可用
btn1.value = "立即注册";
btn1.disabled = false;
clearInterval(id1); // 停止定时器
}
}
</script>
动态生成超链接: 通过循环的方式动态生成超链接,并设置点击后变为红色.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<div id="myDiv"></div>
<script type="text/javascript">
onload = function () {
//获取容器
var div = document.getElementById('myDiv');
//循环创建5个超链接
for (var i = 0; i < 5; i++) {
//创建a对象
var a = document.createElement('a');
//为属性赋值
a.href = 'http://www.itcast.cn';
a.innerHTML = '链接' + i;
a.onclick = function() {
//设置背景色为红色
this.style.backgroundColor = 'red';
return false;
};
//追加到容器中
div.appendChild(a);
}
};
</script>
绘制方框嵌套图: 每次循环并绘制方框图.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
onload = function () {
//根据标签获取body元素
var body = document.getElementsByTagName('body')[0];
//规定初始值
var width = 500, height = 500, left = 10, top = 10;
//循环创建div
while (true) {
//创建div加入body中
var div1 = document.createElement('div');
div1.style.position = 'absolute';
div1.style.left = left + 'px';
div1.style.top = top + 'px';
div1.style.border = '1px solid blue';
div1.style.width = width + 'px';
div1.style.height = height + 'px';
body.appendChild(div1);
//改写数值
left += 5;
top += 5;
width -= 10;
height -= 10;
//当div的宽度<=0时，在页面上不会显示，所以退出循环
if (width <= 0) {
break;
}
}
};
</script>
DIV显示隐藏: 默认DIV为显示状态,当我们点击按钮后自动收缩隐藏.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btnShow" value="隐藏"/>
<div style="border: 1px solid red;" id="divShow">test</div>
<script type="text/javascript">
onload = function() {
document.getElementById('btnShow').onclick = function () {
var divShow = document.getElementById('divShow');
if (this.value == '隐藏') {
this.value = '显示';
divShow.style.display = 'none';//控制层隐藏
} else {
this.value = '隐藏';
divShow.style.display = 'block';//控制层显示
}
};
};
</script>
图片跟随鼠标移动: 让一张图片跟随屏幕鼠标动态调整.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<img id="img1" style="background: red; 20px; height: 20px;position: absolute;" />
<script type="text/javascript">
onload = function() {
//鼠标移动：mousemove
window.onmousemove = function (e) {
//获取图片对象
var img1 = document.getElementById('img1');
//设置x坐标
img1.style.left = e.clientX - parseInt(img1.width) / 2 + 'px';
//设置y坐标
img1.style.top = e.clientY - parseInt(img1.height) / 2 + 'px';
};
};
</script>
显示按钮详细信息: 将鼠标放到按钮上,即可显示出按钮的详细信息.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" id="btn1" value="一号"/>
<input type="button" id="btn2" value="二号"/>
<div style=" 100px;height: 100px; position: absolute;display: none;" id="divShowId"></div>
<script type="text/javascript">
onload = function () {
//获取所有按钮
var btns = document.getElementsByTagName('input');
//遍历按钮，绑定事件
for (var i = 0; i < btns.length; i++) {
btns[i].onmouseover = function(e) {
//获取div
var divShowId = document.getElementById('divShowId');
divShowId.textContent = this.value;
//显示
divShowId.style.display = 'block';
//定义位置
divShowId.style.left = e.clientX + 'px';
divShowId.style.top = e.clientY + 'px';
};
btns[i].onmouseout = function() {
//获取div
var divShowId = document.getElementById('divShowId');
//隐藏
divShowId.style.display = 'none';
};
}
};
</script>
按钮点击事件: 当用户点击按钮时,会自动将按钮的标题设置为其他值.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<input type="button" name="btnCry" id="0" value="哈哈"/>
<input type="button" name="btnCry" id="1" value="哈哈"/>
<input type="button" name="btnCry" id="2" value="哈哈"/>
<input type="button" name="btnCry" id="3" value="哈哈"/>
<input type="button" name="btnCry" id="4" value="哈哈"/>
<script type="text/javascript">
//事件只能接收函数，这里直接使用匿名函数更简便
onload = function () {
//获取所有name为btnCry的按钮
var btn = document.getElementsByName('btnCry');
for (var i = 0; i < btn.length; i++) {
//逐个为按钮注册点击事件
btn[i].onclick = function () {
//改写按钮的显示文本
this.value = '呜呜';
};
}
};
</script>
给图片添加描述: 当鼠标经过特定的图片时,就显示出图片的具体信息.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#showCountry {
position: absolute;display: none;
200px;height: 100px;
border: 1px solid red;
background-color: blue;color: white;
}
</style>
<script>
var list = {
'zg': ['中国', '北京', '牡丹', '世界第二大经济体'],
'mg': ['美国', '华盛顿', '玫瑰', '白人与黑人一起劳动，却想到仇视'],
'rb': ['日本', '东京', '樱花', '世界文明的两样东西：忍者和A片'],
'hg': ['韩国', '首尔', '无穷', '民族意识超强']
};
onload = function () {
//获取所有图片
var imgs = document.getElementsByTagName('img');
//为每个图片指定指向、移开事件
for (var i = 0; i < imgs.length; i++) {
imgs[i].onmouseover = function(e) {//指向国旗显示国家信息
//获取国家信息
var msg = list[this.id];
//构造描述字符串
var msgStr = '国家：' + msg[0] + '<br>首都：' + msg[1] + '<br>国花：' + msg[2] + '<br>描述：' + msg[3];
//获取div
var showCountry = document.getElementById('showCountry');
//显示div
showCountry.style.display = 'block';
//设置描述信息
showCountry.innerHTML = msgStr;
//让div在鼠标的位置显示
showCountry.style.left = e.clientX + 'px';
showCountry.style.top = e.clientY + 'px';
};
imgs[i].onmouseout = function() {//移开国旗隐藏显示
//获取div
var showCountry = document.getElementById('showCountry');
showCountry.style.display = 'none';
};
}
};
</script>
</head>
<body>
<img id="zg" width="100" height="100" />
<img id="mg" width="100" height="100" />
<img id="rb" width="100" height="100" />
<img id="hg" width="100" height="100" />
<div id="showCountry"></div>
</body>
动态生成表格: 通过JS代码动态的生成表格,将鼠标放上后会高亮本行.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
var bgColor;
var list = [
{ id: '1', country: '中国', capital: '北京' },
{ id: '2', country: '美国', capital: '华盛顿' },
{ id: '3', country: '日本', capital: '东京' },
{ id: '4', country: '韩国', capital: '首尔' }
];
onload = function() {
var body = document.getElementsByTagName('body')[0];
//创建表格
var table = document.createElement('table');
table.border = 1;
body.appendChild(table);
//创建标题行
var thead = document.createElement('thead');
var item0 = list[0];
for (var key0 in item0) {
//创建标题单元格
var th = document.createElement('th');
th.innerText = key0;
thead.appendChild(th);
}
table.appendChild(thead);
for (var i = 0; i < list.length; i++) {
//遍历对象
var item = list[i];
//创建行
var tr = document.createElement('tr');
table.appendChild(tr);
//注册事件
tr.onmouseover = function () {//指向行时高亮
//改变颜色前，先获取值，用于恢复
bgColor = this.style.backgroundColor;
this.style.backgroundColor = 'green';
};
tr.onmouseout = function() {//移开行时恢复原来颜色
this.style.backgroundColor = bgColor;
};
//设置行的背景色
if (i % 2 == 0) {
tr.style.backgroundColor = 'red';
} else {
tr.style.backgroundColor = 'blue';
}
//遍历对象
for (var key in item) {
//创建单元格
var td = document.createElement('td');
td.innerText = item[key];
tr.appendChild(td);
}
}
};
</script>
◆反调试◆
禁用F12调试键
<script type="text/javascript">
window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
if (event.keyCode === 123) {
event.preventDefault(); // 阻止默认事件行为
window.event.returnValue = false;
}
}
</script>
禁用页面的ctrl功能,来禁止ctrl+S保存功能
<script type="text/javascript">
//禁用页面的ctrl功能，来禁止ctrl+S保存功能
window.addEventListener('keydown', function (e) {
if(e.keyCode == 83 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)){
e.preventDefault();
}
})
</script>
禁用页面的ctrl功能,来禁止ctrl+C保存功能
<script type="text/javascript">
window.addEventListener('keydown', function (e) {
if(e.keyCode == 67 && (navigator.platform.match('Mac') ? e.metaKey : e.ctrlKey)){
e.preventDefault();
}
})
</script>
屏蔽Ctrl+Shift+I
<script type="text/javascript">
window.addEventListener('keydown', function (e) {
if((e.ctrlKey) && (e.shiftKey) && (e.keyCode == 73)){
e.preventDefault();
}
})
</script>
为右键添加自定义事件,禁用菜单右键,或者使用HTML插入代码来禁用菜单.
<script type="text/javascript">
window.oncontextmenu = function() {
event.preventDefault();
return false;
}
</script>
<body leftmargin=0 topmargin=0 oncontextmenu='return false' ondragstart='return false'
onselectstart ='return false' onselect='document.selection.empty()'
oncopy='document.selection.empty()' onbeforecopy='return false' onmouseup='document.selection.empty()'>
当通过特殊途径打开浏览器调试窗口时,会无限刷新,导致无法调试
<script type="text/javascript">
var x = document.createElement('div');
var isOpening = false;
Object.defineProperty(x, 'id', {
get:function(){
console.log("Please close debug now");
window.location.reload()
}
});
console.info(x);
</script>
当通过特殊途径打开F12时,会清空页面内容.
<script type="text/javascript">
var x = document.createElement('div');
var isOpening = false;
Object.defineProperty(x, 'id', {
get:function(){
bodys=document.body.firstChild.data;
document.body.innerHTML=bodys;
heads = document.head.firstChild.data;
document.head.innerHTML=heads;
document.open();
document.close();
}
});
console.info(x);
</script>
当控制台被打开时,自动清空所有内容,只保留一段话.
<script type="text/javascript">
document.onkeydown = document.onkeyup = document.onkeypress = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 123) {
document.open();
document.close();
var docFragment = document.createDocumentFragment();
var node = document.createElement("b");
var node_text = document.createTextNode("请勿调试本页面..");
node.appendChild(node_text);
docFragment.appendChild(node);
document.body.appendChild(docFragment);
}
}
</script>
自动触发点击指定标签
<script type="text/javascript">
setTimeout(function() {
// IE
if(document.all) {
document.getElementById("clickMe").click();
}
// 其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("clickMe").dispatchEvent(e);
}
}, 2000);
</script>
<a href="http://www.baidu.com" id="clickMe">触发onclick</a>