js事件基础
事件绑定
什么是事件绑定？ 可以在一个事件上增加多个函数，详细如下
<body>
<input type="button" name="" id="btn1" value="按钮" />
<script type="text/javascript">
var btn=document.getElementById("btn1");
// 事件绑定方法：attachEvent(事件,函数):兼容火狐和IE
/* btn.attachEvent(onclick,function(){
alert("被点击了a")
})
btn.attachEvent(onclick,function(){
alert("被点击了b")
}) */
//事件绑定方法:addEventListener(事件名，函数布尔值):兼容谷歌,360等
btn.addEventListener("click",function(){
alert("被点击了a")
});
btn.addEventListener("click",function(){
alert("被点击了b")
})
//没有用事件绑定,前面一个事件被覆盖
/* btn.onclick=function(){
alert("被点击了a")
}
btn.onclick=function(){
alert("被点击了b")
} */
</script>
</body>可以实现点击一次按钮，执行两个函数里面的内容， 需要注意的是attachEvent方法和addEventListener的使用，这是一个兼容性的问题 兼容性：IE支持attachEvent而不支持addEventListener，否则会报错；而谷歌火狐则支持addEventlistener。所以存在兼容性的问题。
事件冒泡
事件冒泡就是当事件的对象有父子级关系时，当执行子级事件后，父级事件也会因为事件冒泡，也会执行，因此，大多数时候，事件冒泡需要消除。 使用event.cancelBubble = true;方法来消除事件冒泡 案例如下
<body>
<button type="button" id="btn">显示</button>
<div id="box">
</div>
<script type="text/javascript">
var btn = document.getElementById("btn");
var div = document.getElementById("box")
btn.onclick = function(e) {
var oEvent = e || event;
div.style.display = "block";
// alert("按钮被点击了");
//阻止事件冒泡
oEvent.cancelBubble = true;
}
document.onclick = function() {
div.style.display = "none";
// alert("document被点击了");
}
</script>
</body>事件对象的兼容性
在火狐或者谷歌浏览器下，使用事件的方法是将函数中传进来的e； 而在IE浏览器下，使用事件不需要传进e，直接使用event。 所以为了避免事件的兼容性问题 var oEvent = e || event; 一般使用这样的方法来消除浏览器对事件的兼容
鼠标点击事件
鼠标的位置
oevent.clientX：返回鼠标的横坐标的位置 oevent.clientY：返回鼠标的纵坐标的位置
<body>
<script type="text/javascript">
document.onclick=function(e){
//IE支持event
//火狐不支持event,必须从函数中传进一个事件
//所以一般避免兼容性,会使用var oevent=e||event;
var oevent=e||event;
alert("鼠标横坐标是："+oevent.clientX+" 纵坐标是："+oevent.clientY)
}
</script>
</body>鼠标跟踪
鼠标跟踪是实现对象跟着鼠标移动，其实就是在onmousemove函数中将改对象的横纵坐标都赋值为鼠标的横纵对象 实现如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
document.onclick=function(e){
//IE支持event
//火狐不支持event,必须从函数中传进一个事件
//所以一般避免兼容性,会使用var oevent=e||event;
var oevent=e||event;
alert("鼠标横坐标是："+oevent.clientX+" 纵坐标是："+oevent.clientY)
}
</script>
</body>
</html>鼠标跟踪小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div {
width: 10px;
height: 10px;
background-color: #FF69B4;
position: absolute;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
function getPos(e) {
//避免鼠标滚动
var scorllTop = document.documentElement.scrollTop || document.body.scrollTop;
var scorllLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {
x: e.clientX + scorllLeft,
y: e.clientY + scorllTop
};
}
document.onmousemove = function(e) {
var div = document.getElementsByTagName("div");
var oEvent = e || event;
var pos = getPos(oEvent);
for (var i = div.length - 1; i > 0; i--) {
div[i].style.left = div[i - 1].offsetLeft + "px";
div[i].style.top = div[i - 1].offsetTop + "px";
}
div[0].style.left = pos.x + "px";
div[0].style.top = pos.y + "px";
}
</script>
</body>
</html>实现效果如下
（ps:可以将div小方块换成自己喜欢的图片 ^ _ ^ ）
小案例——自定义右菜单
1.实现点击鼠标右键弹出自己的菜单 2.实现点击空白时,菜单消失 3.实现点击菜单时,菜单不会消失（事件冒泡）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul{
width: 100px;
height: 150px;
background: #ADD8E6;
list-style: none;
position: absolute;
padding-left: 5px;
display: none;
}
li{
}
</style>
</head>
<body>
<ul>
<li>abc</li>
<li>abc</li>
<li>abc</li>
<li>abc</li>
</ul>
<script type="text/javascript">
//点击鼠标右键弹出自己的菜单
document.oncontextmenu=function(e){
var oEvent=e|| event;
ull[0].style.display="block";
ull[0].style.left=oEvent.clientX+"px";
ull[0].style.top=oEvent.clientY+"px";
//阻止默认行为
return false;
}
//点击空白时,菜单消失
document.onclick=function(){
var ull=document.getElementsByTagName("ul");
ull[0].style.display="none";
}
//点击菜单时,菜单不会消失
var ull=document.getElementsByTagName("ul");
ull[0].onclick=function(e){
var oEvent=e|| event;
//阻止冒泡
oEvent.cancelBubble = true;
}
</script>
</body>
</html>效果如下
键盘事件
键盘控制移动
使用 oEvent.keyCode=="数字" 来监听按下了键盘的哪一个键 数字是ASCII码值
<body>
<div id="box">
</div>
<script type="text/javascript">
document.onkeydown=function(e){
var oEvent=e|| event;
var div =document.getElementById("box");
if(oEvent.keyCode==37){
div.style.left=div.offsetLeft-10+"px";
}
else if(oEvent.keyCode==39){
div.style.left=div.offsetLeft+10+"px";
}
}
</script>
</body>可以控制div方块左右移动
键盘提交
就是按下 回车 或者 ctr + 回车 键，来对信息进行提交 本案例借用了前几篇文档中的运动封装：animate.js 代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.ull {
width: 300px;
height: 400px;
background-color: lightblue;
/* 超出部分显示滚动条 */
margin: 20px auto;
border: 5px solid #8A2BE2;
overflow-y: auto;
/* 让字符换行显示 */
word-wrap: break-word;
}
.ull li {
border-bottom: 1px dashed #999;
list-style: none;
padding: 4px;
padding-left: 20px;
/* overflow: hidden; */
opacity: 0;
}
.txt {
margin: 20px 10px;
}
</style>
<script src="封装animate.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<textarea rows="4" cols="40" class="txt"></textarea>
<button type="button" class="btn">发布</button>
<ul class="ull">
</ul>
<script type="text/javascript">
//获取各个元素的节点
var Otext = document.querySelector(".txt");
var Obtn = document.querySelector(".btn");
var Oul = document.querySelector(".ull");
// 点击发布按钮,就将文本框的内容插入到容器中
Obtn.onclick = function() {
var Oli = document.createElement("li");
Oli.innerHTML = Otext.value;
Otext.value = "";
if (Oul.children.length > 0) {
Oul.insertBefore(Oli, Oul.children[0]);
} else {
Oul.appendChild(Oli);
}
//运动
var iHeight = Oli.offsetHeight;
Oli.style.height = "0";
animate(Oli, {
height: iHeight
}, function() {
animate(Oli, {
opacity: 100
})
})
}
//实现键盘提交
Otext.onkeydown = function(e) {
var oEvent = e || event;
//按ctrl加回车提交
if (oEvent.keyCode == 13 && oEvent.ctrlKey) {
var Oli = document.createElement("li");
Oli.innerHTML = Otext.value;
Otext.value = "";
if (Oul.children.length > 0) {
Oul.insertBefore(Oli, Oul.children[0]);
} else {
Oul.appendChild(Oli);
}
//运动
var iHeight = Oli.offsetHeight;
Oli.style.height = "0";
animate(Oli, {
height: iHeight
}, function() {
animate(Oli, {
opacity: 100
})
})
}
}
</script>
</body>
</html>实现效果如下
只能输入数字的文本框
该文本框要实现 1.只能输入数字：可以按大键盘上的数字，也可以按小键盘的数字 2.可以进行回删，按backspace键 3.按方向键可以移动光标位置 实现代码如下
<body>
<input type="text" name="" id="txt" value="" />
<script type="text/javascript">
var otxt = document.getElementById("txt");
otxt.onkeydown = function(e) {
var oEvent = e || event;
// alert(oEvent.keyCode)
//只能输入数字
if (oEvent.keyCode != 8 && oEvent.keyCode != 37 && oEvent.keyCode != 39 && (oEvent.keyCode < 48 || oEvent.keyCode >
57) && (oEvent.keyCode < 96 || oEvent.keyCode > 105)) {
//阻止默认事件
return false;
}
}
</script>
</body>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
![【如果你要学JS XV】——趣学[ 阻止冒泡事件、常见的鼠标事件和键盘事件 ]](https://developer.qcloudimg.com/column/article/9832316/20231220-b9fd4e77.jpg)
推荐阅读
相关推荐
前端day16-JS(WebApi)学习笔记（事件补充、事件冒泡与捕获）
更多 >
腾讯云开发者
