JS中event事件
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS中event事件相关的知识，希望对你有一定的参考价值。
JS事件基础
1.event对象
（1）用来获取事件的详细信息：鼠标位置、键盘位置
document的本质：document.childNodes[0].tagName
例子：获取鼠标位置：clientX横坐标，clientY纵坐标
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
document.onclick=function()
{
alert(event.clientX+‘,‘+event.clientY);
}
}
</script>
</head>
<body>
</body>
</html>
以上代码会有兼容问题
alert(event.clientX+‘,‘+event.clientY);大部分适合IE
把上面代码换成alert(ev.clientX+‘,‘+ev.clientY);适用于火狐，不支持IE
现在怎么解决兼容问题呢？代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
document.onclick=function(ev)
{
//alert(event.clientX+‘,‘+event.clientY);适用于IE
//alert(ev.clientX+‘,‘+ev.clientY);//适用于火狐
var oEvent=ev||event;//报错ev不存在
alert(oEvent.clientX+‘,‘+oEvent.clientY);
}
};
</script>
</head>
<body>
</body>
</html>
以上总结出解决event对象的兼容性方法就是
设置一个变量 var oEvent=en||event
2事件冒泡： 事件冒泡就是会把事件一直传递给父级，一直到document，小知识document是一个隐藏起来的最大父级
事件冒泡例子：代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
padding:50px;
}
</style>
</head>
<body onclick="alert(‘aa‘)">
这个例子就是说明子级的事件会传递给父级，这就是事件冒泡
<div style="background:black;" onclick="alert(this.style.background)">
<div style="background:green;" onclick="alert(this.style.background)">
<div style="background:red; "onclick="alert(this.style.background)"></div>
</div>
</div>
</body>
</html>
执行上面代码点击一下最里面的红色就懂了
3.键盘事件
KeyCode：获取用户按下键盘的哪个按键
用法代码：
<script>
document.onkeydown=function(ev)
{
var oEvent=ev||event;
alert(oEvent.keyCode);
}
</script>
执行以上代码随便按下某个键就会报出数字，这个数字就对应这个按键
例子2：如何使用按键回车提交某个信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function()
{
var oBun1=document.getElementById(‘bu1‘);
var oBun3=document.getElementById(‘text1‘)
oBun1.onkeydown=function(ev)
{
var oEvent=ev||event;
if(event.keyCode==13)
{
oBun3.value=oBun3.value+oBun1.value;
oBun1.value=‘‘
}
}
}
</script>
</head>
<body>
<input id="bu1" type="text" />
<textarea id="text1" rows="10" cols="40"></textarea>
</body>
</html>
还有如何使用ctry+回车提交
只需要把如上代码if部分改为
if(event.keyCode==13 || oEvent.ctrlkey)
keyCode其他属性
ctrlKey、shiftKey、altKey
本文出自 “新网学会博客” 博客，请务必保留此出处http://xwxhvip.blog.51cto.com/13020757/1983467
以上是关于JS中event事件的主要内容，如果未能解决你的问题，请参考以下文章
JS 之 阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别