一、事件对象
鼠标/键盘属性
altKey 返回当事件被触发时，“ALT”是否被按下。
button 返回当事件被触发时，哪个鼠标按钮被点击
clientX 返回当事件被触发时，鼠标指针的水平坐标。
clientY 返回当事件被触发时，鼠标指针的垂直坐标。
ctrlkey 返回当事件被触发时，“CTRL" 键是否被按下。
metakey 返回当事件被触发时，"meta"键是否被按下。
relatedTarget 返回与事件的目标节点相关的节点。
screenX 返回当某个事件被触发时，鼠标指针的水平坐标。
screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。文章来源：https://www.toymoban.com/news/detail-823372.html
shiftKey 返回当事件被触发时，"SHIFT"键是否被按下。文章来源地址https://www.toymoban.com/news/detail-823372.html
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
#areaDiv{
width:500px;
height:300px;
border:1px solid black;
}
#showMsg{
width:500px;
height:200px;
border:1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function() {
/*当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标*/
//获取div
var areaDiv=document.getElementById("areaDiv");
var showMsg=document.getElementById("showMsg");
/*onmousemove该事件将会在鼠标在元素中移动时被触发
事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
这个实参的名字可以自己定义，就算不写实参也会传递，
在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘哪个案件被按下，鼠标滚轮滚动的方向
*
* */
areaDiv.onmousemove=function(e){
/*在IE8中，响应函数被触发时，浏览器不会传递事件对象
在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
需要写为window.event.clientX*/
//解决事件对象的兼容性问题
if(!event){
event=window.event;
}
//写成这种也可以 event=event||window.event;
//在showMsg中显示鼠标的坐标
/*clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标*/
showMsg.innerHTML="鼠标的X坐标为"+e.clientX+",鼠标的Y坐标为"+e.clientY;
};
};
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>二、div跟随鼠标移动
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
#box1{
width:80px;
height:80px;
border:1px solid black;
position: absolute;/*开启相对定位也行，一般开启绝对定位*/
background-color: greenyellow;
}
</style>
<script type="text/javascript">
window.onload = function() {
var box1=document.getElementById("box1");
//之所以把box1改为document，给documnet绑定事件，是因为document的范围大点
//给box1绑定的话鼠标的作用范围很小，只有在box1里面的时候才会起作用
//获取滚动条滚动的距离
/*chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
火狐等浏览器认为滚动条是html的*/
var st=document.body.scrollTop||document.documentElement.srcollTop;
// var st=document.body.scrollTop;
var sl=document.body.scrollLeft||document.documentElement.scrollLeft;
document.onmousemove=function(event){
/*使得div可以跟随鼠标移动*/
//解决兼容问题
/*clientX和clientY用于获取鼠标在当前的可见窗口的坐标
div的偏移量，是相对于整个页面来说的*/
event=event||window.event;
//获取到鼠标的坐标
var left=event.clientX;
var top=event.clientY;
/*pageX和pageY可以获取到鼠标相对于当前页面的坐标
在IE8中不支持使用*/
/*var left=event.pageX;
var top=event.pageY;*/
//只对开启定位的元素起作用，需要开启定位position:absolute;
box1.style.left=left+sl+"px";
box1.style.top=top+st+"px";
};
};
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>三、事件的冒泡
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
#box1{
width:200px;
height:200px;
border:1px solid black;
background-color: greenyellow;
}
#s1{
background-color: yellow;
}
</style>
<script type="text/javascript">
/*事件的冒泡（Bubble)
所谓的冒泡指的就是事件的向上传到，
当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
notice:
1.相同事件
2.从子到父
在开发中大部分情况下冒泡都是有用的，如果不希望发生事件
冒泡可以通过事件对象来取消冒泡*/
window.onload = function() {
//为s1绑定一个单击响应函数
var s1=document.getElementById("s1");
//浏览器的兼容问题
event=event||window.event;
s1.onclick=function(event){
alert("我是span的单击响应函数");
//取消冒泡
//可以将事件对象的cancelBubble设置为true,即可取消冒泡
//这个属性没有兼容性问题
event.cancelBubble=true;
};
//为box1绑定一个单击响应函数
var box1=document.getElementById("box1");
box1.onclick=function(){
alert("我是box1的单击响应函数");
};
//为body绑定一个单击响应函数
document.body.onclick=function(){
alert("我是body的单击响应函数");
};
};
</script>
</head>
<body>
<div id="box1">我说box1
<span id="s1">我是span</span></div>
</body>
</html>四、事件的委派
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
window.onload = function() {
//获取按钮
var btn01=document.getElementById("btn01");
var ul=document.getElementById("ul");
btn01.onclick=function(){
//创建一个li
var li=document.createElement("li");
li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";
ul.appendChild(li);
};
/*为每个超链接都绑定一个单击响应函数
这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定*/
var a=document.getElementsByTagName("a");
/* for(var i=0;i<a.length;i++){
a[i].onclick=function(){
alert("我是a的单击响应函数");
};
};
*/
/*我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
我们了可以尝试将其绑定给元素的共同的祖先元素*/
//为ul绑定一个单击响应函数
//事件委派利用的是事件冒泡的原理
/*事件的委派
指将事件统一绑定给元素的共同的祖先，这样当后代元素上的事件触发时，会一直
冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能*/
ul.onclick=function(event){
//
// alert(this); //this是绑定事件的对象，不是触发的事件对象
// 处理兼容性问题
event=event||window.event;
/*target
event中的target表示的是触发事件的对象*/
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
//存在的隐患就是class可以写多个
if(event.target.className=="link"){
alert("我是ul的单击响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="ul">
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</html>五、事件的绑定
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
window.onload = function() {
/*点击按钮以后弹出一个内容*/
var btn01=document.getElementById("btn01");
/*使用 对象.事件=函数 的形式绑定响应函数
它只能同时为一个元素的一个事件绑定一个响应函数，比如.onclick=function(){}
如果绑定多个也只有最后一个会执行，后面的会覆盖掉前面的*/
/*addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1.事件的字符串，不要on
2.回调函数，当事件触发时该函数会被调用
3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false
*使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
* 这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
* 这个方法不支持IE8及以下的浏览器*/
/* btn01.addEventListener("click",function(){
alert(1);
},false);
btn01.addEventListener("click",function(){
alert(2);
},false);
btn01.addEventListener("click",function(){
alert(3);
alert(this); //btn01
},false);
*/
/*attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数：
1.事件的字符串，要on
2.回调函数
*
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定先执行，
执行顺序和addEventLister()相反,3,2,1*/
event=event||window.event;
//报错了，说没有这个方法
/* btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});
btn01.attachEvent("onclick",function(){
alert(3);
});
*/
/*
定义一个函数，用来为指定元素绑定响应函数
addEventListener()中的this,是绑定事件的对象
attachEvent()中的this，是window
需要统一两个方法中的this
* */
/*参数：
obj 要绑定事件的对象
eventStr 事件的字符串
callback 回调函数*/
function bind(obj,eventStr,callback){
}
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
</html>六，通过bind()方法绑定，完成不同浏览器的兼容，统一this
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
</style>
<script type="text/javascript">
window.onload = function() {
var btn01=document.getElementById("btn01");
bind(btn01,"click",function(){
alert(1);
});
bind(btn01,"click",function(){
alert(2); //按顺序弹出1，2
});
/*参数：
obj 要绑定事件的对象
eventStr 事件的字符串(不要on)
callback 回调函数*/
//为了处理兼容性问题
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);//执行顺序 前 到 后
}else{
/*this是谁，由调用方式决定
函数调用 ，this是window
方法调用，this是调用的对象
可以用callback.call(obj)修改调用的对象*/
//IE8可以使用的方式
/* obj.attachEvent("on"+eventStr,callback); //顺序 后 到 前*/
//为了使用call()进行的修改
//这样做的目的是统一不同浏览器里面的this
obj.attachEvent("on"+eventStr,function(){
callback().call(obj);
});
}
};
};
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
</html>七、事件的传播
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>
</title>
<style>
#box1{
width:300px;
height:300px;
background-color: yellowgreen;
}
#box2{
width:200px;
height:200px;
background-color: yellow;
}
#box3{
width:150px;
height:150px;
background-color: skyblue;
}
</style>
<script type="text/javascript">
window.onload = function() {
//事件的传播
//为三个Box绑定单击响应函数
var box1=document.getElementById("box1");
var box2=document.getElementById("box2");
var box3=document.getElementById("box3");
bind(box1,"click",function(){
alert("我是box1的单击响应函数");
});
bind(box2,"click",function(){
alert("我是box2的单击响应函数");
});
bind(box3,"click",function(){
alert("我是box3的单击响应函数");
});
/*事件的传播
——关于事件的传播网景公司和微软公司有不同的理解
——微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件
然后再向当前元素的祖先元素上传播，也就是事件应该在冒泡阶段执行（也就是本例子的执行顺序）
box3->box1
——网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，
应该先触发当前元素的最外层的祖先元素的事件,然后再向内传播给后代元素，
在事件的捕获阶段执行。box1——>box3
W3C综合了两个公司的方案，将事件传播分为了两个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
如果想要在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件、所以这个参数一般都是false
以上内容适用于IE9及以上的浏览器
IE8及以下的浏览器中没有捕获阶段
* */
//bind方法
function bind(obj,eventStr,callback){
if(obj.addEventListener){
//大部分浏览器兼容的方式
obj.addEventListener(eventStr,callback,false);//执行顺序 前 到 后
}else{
obj.attachEvent("on"+eventStr,function(){
callback().call(obj);
});
}
};
};
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</html>到了这里，关于web前端javascript笔记——（13）事件(1)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
