您的位置：首页 > Web前端 > JavaScript

JavaScript高级——事件监听控制

2015-07-21 01:02 639 查看

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件监听 </title>

<script type="text/javascript">

function run(){  	alert("你好");}
/*
onfocus	元素获取焦点
onblur	元素失去焦点

*/
function run1()
{
alert("获取焦点");
}
function run2()
{
alert("失去焦点");
}

/*
onload   页面加载完成时执行。。。
可以有效避免   使用元素标签时/获取元素对象时   元素未加载
*/
function run3()
{
alert(document.getElementById("HH").innerHTML);
}
/*
onchange()   当值改变时调用
*/
function run4()
{
alert("选择的值改变了");
}
/*
javascript 事件绑定方式
1、HTML属性绑定方式
2、HTML DOM  方法绑定

*/
function run5()
{
var arr = document.getElementsByTagName("input");
alert(arr.length);
alert(arr[0].value);
}
function run6(x)
{
alert(x.value);
}

/*
如果输入数字  放行
如果输入非数字  阻止默认事件（键盘输入键码值事件）

0~9   键码值  48~57    8对应退格键
*/

function run7()
{
//获取事件对象
var e = window.event;
//获取键码值进行判断
var code = e.keyCode;
if(!(code)>=48 && code<=57)
{
// 不是数字   阻止默认事件
e.returnValue = false;
}
}
function run8(e)
{
//获取键码值
var code;
if(e&&e.preventDefault)
{
//火狐或者其他浏览器
code=e.which;
}
else
{
//IE
code=window.event.keyCode;
}
//通过键码值进行判断   ！（48~57）  非数字   并且  不是退格键  8
if(!((code>=48 && code<=57)||(code==8)))
{
//阻止默认事件
if(e&&e.preventDefault)
{
//火狐或者其他浏览器
e.preventDefault();
}else
{
//IE
window.event.returnValue=false;
}

}
}
</script>
</head>

<body onload="run3()">

<input type="button" value="我是按钮 " onclick="run()" />
<input type="text" onfocus="run1()" onblur="run2()" />
<span id="HH">body启动</span>
<select onchange="run4()">
<option value="bj">北京</option>
<option value="sh">上海</option>
<option value="sz">深圳</option>

</select>
<p></p>
<input type="button" value="按钮1" onclick="run5()" />
<input type="button" value="按钮2" onclick="run6(this)" />

<!-- ------------------------------------------------- -->
<input type="text" id="i1" onkeydown="run7()" /><br/>
<input type="text" id="i2" onkeydown="run8(event)" /><br/>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航