JS中event事件

最新推荐文章于 2025-04-19 19:54:25 发布

weixin_33971130

最新推荐文章于 2025-04-19 19:54:25 发布

阅读量118

点赞数

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/499456

JS事件基础

1.event对象

（1）用来获取事件的详细信息：鼠标位置、键盘位置

document的本质：document.childNodes[0].tagName

例子：获取鼠标位置：clientX横坐标，clientY纵坐标

代码如下：

<!DOCTYPE html>

<html>

<head>

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>

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>

<style>

div{

padding:50px;

}

</style>

</head>

这个例子就是说明子级的事件会传递给父级，这就是事件冒泡

</div>

</body>

</html>

执行上面代码点击一下最里面的红色就懂了

3.键盘事件

KeyCode：获取用户按下键盘的哪个按键

用法代码：

document.onkeydown=function(ev)

{

var oEvent=ev||event;

alert(oEvent.keyCode);

}

</script>

执行以上代码随便按下某个键就会报出数字，这个数字就对应这个按键

例子2：如何使用按键回车提交某个信息

<!DOCTYPE html>

<html>

<head>

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>

</body>

</html>

还有如何使用ctry+回车提交

只需要把如上代码if部分改为

if(event.keyCode==13 || oEvent.ctrlkey)

keyCode其他属性

ctrlKey、shiftKey、altKey

本文转自

新网学会 51CTO博客，原文链接：http://blog.51cto.com/xwxhvip/1983467 ，如需转载请自行联系原作者