JS事件基础（鼠标事件，键盘事件及默认行为)

最新推荐文章于 2024-05-28 16:15:16 发布

七月是我的生日

最新推荐文章于 2024-05-28 16:15:16 发布

阅读量1.1w

点赞数 10

分类专栏： JS学习文章标签： JS事件基础默认行为

本文链接：https://blog.csdn.net/qq_43955202/article/details/89815231

版权

JS学习专栏收录该内容

30 篇文章 1 订阅

订阅专栏

JS 事件基础

在这里插入图片描述
Document是一个最顶级的父节点，两个子节点分别为<!DOCTYPE>和HTML。

window.onload = function()
{
alert(document.childNodes[0].tagName); [0]=undefined [1]=HTML
}

Event对象，因为存在兼容性问题，所以通常处理如下：

document.onmousemove = function(ev)
{
var oEvent = ev || event;
}

（clientX，clientY）返回点击处的X,Y坐标。

<script>
document.onclick = function()
{
alert(event.clientX + ',' + event.clientY); //evevt 对象 返回点击的X,Y坐标
}
</script>

事件冒泡：

<!DOCTYPE html>
<html lang="en" onclick="alert('html')">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body onclick="alert('body')">
<div onclick="alert(this.style.background)" style="width:300px;height: 300px;background: red">
<div onclick="alert(this.style.background)" style="width:200px;height: 200px;background:green">
<div onclick="alert(this.style.background)" style="width:100px;height: 100px;background: #ccc"></div>
</div>
</div>
</body>
</html>
一个点击事件完成后，会相应的去触发它的父级的点击事件。
示例;
<title>Document</title>
<style>
#div1{
width: 100px;
height: 200px;
background: red;
display: none;
}
</style>
<script>
window.onload =function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');

oBtn.onclick = function()
{
oDiv.style.display = 'block';
alert('按钮被点了');
}

document.onclick = function()
{
oDiv.style.display = 'none';
alert('页面被点了');
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="显示">
<div id="div1"></div>
</body>
</html>

这样并不能达到点击按钮出现该div元素，点击空白网页div消失的效果。因为事件冒泡会导致两个事件再第一次点击按钮的同时都被触发。
那么，如何解决事件冒泡？
加入event.canclebubble= ‘true’;就可以解决事件冒泡。
如示例：

oBtn.onclick = function()
{
oDiv.style.display = 'block';
alert('按钮被点了');
event.cancelBubble = 'true'; //在需要解决事件冒泡的地方加入，可以停止事件冒泡触发父级事件。
}

鼠标事件

在这里插入图片描述
鼠标事件：
示例：跟随鼠标移动的div

<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<script>
document.onmousemove = function()
{
var oDiv = document.getElementById('div1');

oDiv.style.left = event.clientX +'px'; //client 只能在可视区域内；
oDiv.style.top = event.clientY +'px';
}
</script>
<body>
<div id="div1"></div>
</body>

因为clientX，clientY为可视区坐标定位，即根据可视区定位，而div根据整个页面（body）来定位，就会出现误差。
获取滚动条距离：

<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
</head>
<script>
document.onmousemove = function()
{
var oDiv = document.getElementById('div1');

oDiv.style.left = event.clientX +'px'; //client 只能在可视区域内；
oDiv.style.top = event.clientY +'px';
}
</script>
<body>
<div id="div1"></div>
</body>

更改后的跟随鼠标移动的div

<script>
document.onmousemove = function()
{
var oDiv = document.getElementById('div1');

oDiv.style.left = event.clientX + scrollX+ 'px'; //client 只能在可视区域内；
oDiv.style.top = event.clientY + scrollY+ 'px';
}
</script>

示例：炒鸡好玩的div跟随div跑：

<style>
div{
width: 10px;
height: 10px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function()
{
var aDiv = document.getElementsByTagName('div');
var i = 0;
document.onmousemove = function(ev)
{
var oEvent = ev || event;
for(i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left = aDiv[i-1].style.left;
aDiv[i].style.top = aDiv[i-1].style.top;
}
aDiv[0].style.left = event.clientX + 'px';
aDiv[0].style.top = event.clientY + 'px';
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>

键盘事件：

在这里插入图片描述
鼠标事件：keyCode
测出键盘每个键 keyCode的值：
示例;

<script>
document.onkeydown = function (ev)
{
var oEvent = ev||event;
alert(oEvent.keyCode);
}
</script>

键盘操作div移动：

<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
document.onkeydown = function(ev)
{
var oEvent = ev||event;
var oDiv = document.getElementById('div1');
if(oEvent.keyCode==37)
{
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
}
else if(oEvent.keyCode==39)
{
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
else if(oEvent.keyCode==38)
{
oDiv.style.top = oDiv.offsetTop - 10 + 'px';
}
else if(oEvent.keyCode==40)
{
oDiv.style.top = oDiv.offsetTop + 10 + 'px';
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>

明显第一次点击键盘会有卡顿，利用js定时器可以解决该问题；

默认行为：

在这里插入图片描述
默认行为：不是通过代码来实现的，而是浏览器自身具备的。
例如：表单在键盘输入a，b直接出来a，b，浏览器默认的。
阻止默认行为：
1，阻止右键菜单

<script>
document.oncontextmenu = function()
{
return false;
}
</script>

2.阻止表单提交（表单验证方式）

<script>
window.onload = function()
{
var oForm = document.getElementById('form1');

oForm.onsubmit = function()
{
return false; //阻止表单提交，组织默认样式
}
}
</script>
<body>
<form id="form1" action="http://www.baidu.com"> 
<input type="submit"></form> 
</body>

3.阻止默认菜单，弹出自定义菜单

<style>
*{
padding: 0;
margin: 0;
}
body{
height: 2000px;
}
#ul1{
width: 100px;
border: 3px solid border;
background: #ccc;
position: absolute;
display: none;
}
</style>
<script>
document.oncontextmenu = function(ev)
{
var oEvent = ev || event;
var oUl = document.getElementById('ul1');
oUl.style.display = 'block';
oUl.style.left = oEvent.clientX + scrollX +'px';
oUl.style.top = oEvent.clientY + scrollY + 'px';
return false;
}
document.onclick = function()
{
var oUl = document.getElementById('ul1');
oUl.style.display = 'none';
}
</script>
<title>Document</title>
</head>
<body>
<ul id="ul1">
<li>登录</li>
<li>刷新</li>
<li>提交</li>
<li>收藏</li>
<li>成为vip</li>
</ul>
</body>

在这里插入图片描述
只能输入数字的输入框：

示例：

<script>
window.onload = function()
{
var oTxt = document.getElementById('txt1');
oTxt.onkeydown = function(ev)
{
var oEvent = ev || event;
if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))  //return false 阻止了 退格 鼠标左右移动 需要加或来阻止该操作
{
return false;
}
}
}
</script>
</head>
<body>
<input id="txt1" type="text">
</body>

七月是我的生日

关注

10
点赞
踩
39

收藏

觉得还不错? 一键收藏
0
评论
JS事件基础（鼠标事件，键盘事件及默认行为)

JS 事件基础Document是一个最顶级的父节点，两个子节点分别为<!DOCTYPE>和HTML。window.onload = function(){alert(document.childNodes[0].tagName); [0]=undefined [1]=HTML}Event对象，因为存在兼容性问题，所以通常处理如下：document.onmousemov...
复制链接

扫一扫

专栏目录