焦点
获取焦点
事件 onfocus
oInp.onfocus=function(){ this.value='';}
函数focus();
oInp.focus():
失去焦点
事件 onblur
oInp.onblur=function(){ this.value='123'; }
函数blur();
oInp.blur():
块comfirm()
// 有返回值返回true和false ,有取消按钮
confirm(1);
右键单击事件 document.oncontentmune=function（）{}
块与submit练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form id="form" action="https://www.baidu.com" method="post">
<input type="text" name="username" value="张三" />
<input type="password" name="password" value="123456" />
<button>提交</button>
</form>
<script type="text/javascript">
var oForm=document.getElementById('form');
oForm.onsubmit=function(){
var bool=confirm("是否确认修改信息")
if(!bool){
return false;
}
}
document.oncontextmenu=function(){
return false;
}
</script>
</body>
</html>
select()全选针对的有焦点的元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<textarea id="text" cols="30" rows="10" ></textarea>
<button type="button">全选</button>
<script type="text/javascript">
var oBtn =document.getElementsByTagName('button')[0];
oBtn.onclick=function(){
document.getElementById('text').select();
}
</script>
</body>
</html>
eval计算文本框中的表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="text" type="text">
<button type="button">计算</button>
<script type="text/javascript">
// eval(str)将字符串运算出结果,字符串必须为表达式
var oBtn =document.getElementsByTagName('button')[0];
oBtn.onclick=function(){
var str=document.getElementById('text').value;
alert(eval(str));
}
</script>
</body>
</html>
Event对象存储事件对象的参数
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.onclick = function(ev) {
ev = ev || event;
for (attr in ev) {
console.log(attr + "," + ev[attr]);
}
}
</script>
</body>
</html>
事件冒泡
ev.stopPropagation(); //阻止事件冒泡
// 事件冒泡:
// 所有事件都具有穿透性,直到穿透到document(事件冒泡)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box {
width: 100px;
height: 100px;
background: #0000FF;
}
</style>
</head>
<body>
<p><button type="button">按钮</button></p>
<div id="box">
</div>
<script type="text/javascript">
document.getElementsByTagName('button')[0].onclick = function() {
var ev = ev || event;
document.getElementById('box').style.display = 'block';
ev.stopPropagation(); //阻止事件冒泡
}
// 事件冒泡:
// 所有事件都具有穿透性,直到穿透到document(事件冒泡)
document.onclick = function() {
document.getElementById('box').style.display = 'none';
}
</script>
</body>
</html>
键盘事件
onkeydown:敲键盘
keyCode ：键盘对应的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.onkeydown=function(ev){
var ev=ev||event;
alert(ev.keyCode);
}
</script>
</body>
</html>
默认事件
oncontextmenu
var oList=document.getElementById('list');
document.oncontextmenu = function(ev){
var ev = ev || event;
var x = ev.clientX + document.documentElement.scrollLeft;
var y = ev.clientY + document.documentElement.scrollTop;
oList.style.left = x +'px';
oList.style.top = y +'px';
oList.style.display = 'block';
return false;//取消默认事件
}
网友评论