第6天-javascript事件
什么是事件
事件是用户在访问页面执行时的操作，也就是用户访问页面时的行为。当浏览器探测到一个事件时，比如鼠标点击或者按键。它可以触发与这个事件相关的JavaScript对象（函数）,这些对象成为事件处理程序。
事件函数绑定
事件函数：当事件发生了，用于处理该事件的具体应对方案，表现出来就是一些代码块。例如：当鼠标点击（事件）---做什么操作？就由处理函数来完成
总结：
注意的就是事件发生和事件处理函数是不同的概念
事件发生以后，可以有事件处理函数来做对应的事情，也可以没有
如果没有事件处理函数，不会影响事件的发生，该发生的还是会发生，至于做什么事情，由事件处理函数来决定
<button id="btn1">按钮1</button> <button id="btn2">按钮2</button> <script> oBtn1 = document.getElementById('btn1'); oBtn2 = document.getElementById('btn2'); oBtn1.onclick = function(){ alert('hello world'); } oBtn2 = null </script>事件函数绑定
鼠标事件
| onmousedown | 当鼠标按下的时候触发 |
| onmouseup | 当鼠标抬起的时候触发 |
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div> <script> oBox = document.getElementById('box'); oBox.onmousedown = function(){ oBox.style.backgroundColor = 'green'; }; oBox.onmouseup = function(){ oBox.style.backgroundColor = 'orange'; }; </script>示例
| onmouseover | 当鼠标移入的时候触发 |
| onmouseout | 当鼠标移出的时候触发 |
<style> a{ padding: 20px; text-decoration: none; color: black; } </style> ... <a href="#">首页</a> <a href="#">产品介绍</a> <a href="#">关于我们</a> <script> //找到a标签 aA = document.getElementsByTagName('a'); //oA是一个数组,遍历出每个a标签 for(i in aA){ //鼠标移入事件 aA[i].onmouseover = function(){ //如何确定是哪个a标签，可以使用this //onsole.log(this) this.style.backgroundColor = 'red'; this.style.color = 'white'; }; //鼠标移出事件 aA[i].onmouseout = function(){ this.style.backgroundColor = 'white'; this.style.color = 'black'; }; } </script>示例
| onclick | 当鼠标点击的时候触发 |
| ondblclick | 当鼠标双击的时候触发 |
| onmousemove | 当鼠标移动的时候触发 |
| oncontextmenu | 当鼠标右键的时候触发（可以定义右键菜单） |
<button>按钮</button> <script> //通过标签获取元素，获取到的是一个数组 oBtn = document.getElementsByTagName('button'); //鼠标双击，因为是数组，所以必须要oBtn加索引才能获取到具体的元素 oBtn[0].ondblclick = function(){ alert('鼠标双击了'); } //鼠标移动事件 document.onmousemove = function(){ console.log('鼠标移动了'); } //鼠标右键事件 document.oncontextmenu = function(){ alert('右键显示菜单'); //阻断原来的右击动作 return false; } </script>示例
键盘事件
| onkeydown | 当键盘按下的时候触发 |
| onkeyup | 当键盘抬起的时候触发 |
<script>
//键盘按下
document.onkeydown = function(){
console.log('键盘按下');
//alert('键盘按下') 这个会阻断事件，导致键盘抬起的动作函数不会执行
}
document.onkeyup = function(){
console.log('键盘抬起');
}
</script>
示例
那么键盘事件有什么使用场景呢。比如：百度搜索框，当我们输入完关键字，按下回车键后，就会执行搜索
<script>
//传一个事件参数
document.onkeydown = function(evt){
console.log(evt);
}
</script>
示例
然后我们随便按一个键盘，查看console， 有一项 keyCode（键盘码），每一个按键都有一个唯一的keyCode
我们可以，这样，来按下回车键，查看到回车键的keyCode为13
<script> document.onkeydown = function(evt){ //console.log(evt); console.log(evt.keyCode); } </script>示例
因此，我们可以这样模拟回车搜索
<script>
//键盘按下
document.onkeydown = function(evt){
if(evt.keyCode === 13){
alert('开始搜索..');
}
}
</script>
示例
表单事件
onsubmit 当表单提交的时候触发
<form action="https://www.baidu.com/s">
<input name="wd" id='ipt' />
<button type="submit">提交</button>
</form>
<script>
oForm = document.getElementsByTagName('form');
oIpt = document.getElementById('ipt');
oForm[0].onsubmit = function(){
iptValue = oIpt.value;
if (iptValue == ''){
alert('内容不能为空');
//return flase可以阻止提交
return false;
};
return true;
};
</script>
示例
onchange 当修改表单字段的时候会触发(内容改变就会触发)
商品单价： <span id="price">198</span> <br/> 商品数量：<input id="ipt1" type="text" value="1" /> 商品总价：<input id="ipt2" type="text" value="198"> <script> var oIpt1 = document.getElementById('ipt1'); oIpt1.onchange = function(){ var price = document.getElementById('price').innerHTML; var oIpt2 = document.getElementById("ipt2"); oIpt2.value = price * this.value; }; </script>示例
<form action="https://www.baidu.com/s" id="fm">
<input id="ipt" type="text" value="请输入搜索内容" name="wd"/>
</form>
<script>
var oIpt = document.getElementById('ipt');
//获取焦点事件
oIpt.onfocus = function(){
//把输入框内容清空
oIpt.value = "";
};
//失去焦点事件
oIpt.onblur = function(){
//让输入框内容恢复原样，当用户没有输入内容的时候
if(oIpt.value == ""){
oIpt.value = "请输入搜索内容";
};
}
//按回车键表单会自动提交到action设置的地址，浏览器的默认行为
//当用户没有输入内容的时候，提示不能提交，只有当用户输入内容后才可以提交
var oForm = document.getElementById("fm");
oForm.onsubmit = function(){
if(oIpt.value == ""){
alert('内容不能为空');
return false;
};
};
</script>
获取焦点和失去焦点事件
窗口事件
onload 当对象加载完成以后触发
要解决这个问题，我们就需要当整个对象加载完再执行，这样就不会报错了
onresize 当窗口改变的时候的触发
<script> window.onresize = function(){ //窗口改变的时候去计算宽高，来做布局 //获取浏览器可视区的高端 console.log(document.documentElement.clientHeight); console.log(document.documentElement.clientWidth); } </script>示例
事件对象 event以及兼容性
事件对象就是当事件发生的时候，用来记录事件的相关信息的对象
<script> alert(event); window.onload = function(){ alert(event); //object event console.log(event); } //注意 ：必须要在事件发生的时候才有值，否则就是undefined //兼容性问题 // 1、在IE和chrome下event对象是内置的，直接使用event就可以了， 在火狐下不支持 // 2、在火狐和chrome下事件对象是事件处理函数的第一个参数，在ie低版本下不支持 window.onload = function(evt){ alert(evt); //object event console.log(evt); } //如果要解决兼容性，可以这样 window.onload = function(evt){ var ev = evt || event; alert(ev); } </script>事件对象及兼容性
event对象上的属性 clientX, clientY
clientX和clientY是鼠标指针在浏览器页面可视区的坐标
<div id="box" style="height: 200px; background-color: orange;"></div> <script> oBox = document.getElementById('box'); oBox.onclick = function(event){ console.log('x',event.clientX, 'y',event.clientY); } </script>
百度登录拖拽效果前置知识-offsetLeft和offsetTop
<style type="text/css"> #box{ height: 200px; width: 200px; background-color: red; position: absolute; left: 0px; top: 30px; } </style> ... <script> //基本思想：要让div移动，可以通过改变left和top值 //通过js来动态改变 //条件：需要知道如何获取left值和top值 oBox = document.getElementById('box'); oBox.onclick = function(){ console.log(oBox.offsetLeft, oBox.offsetTop); } </script>
拖拽效果
<style type="text/css"> #box{ height: 200px; width: 200px; background-color: orange; position: absolute; left: 0; top: 0; } </style> ... <div id="box"></div> <script> var oBox = document.getElementById('box'); oBox.onmousedown = function(event){ var difX = event.clientX - oBox.offsetLeft; var difY = event.clientY - oBox.offsetTop; //鼠标移动 oBox.onmousemove = function(event){ oBox.style.left = event.clientX - difX + "px"; oBox.style.top = event.clientY - difY + "px"; }; //鼠标抬起后，box不再移动 oBox.onmouseup = function(){ oBox.onmousemove = null; } } </script> //这段代码实现了拖拽效果 //但是当快速移动鼠标的时候还有问题，这个后面再解决拖拽效果代码实现
事件冒泡机制
当一个元素接收到一个事件以后，会将事件传播给它的父级元素，它的父级元素会一层一层往上传播，直到最顶层的window，这种事件传播机制叫做事件冒泡
<style type="text/css"> #box1{ height: 400px; width: 400px; background-color: green; margin: 0 auto; } #box2{ height: 300px; width: 300px; background-color: orange; margin: 0 auto; } #box3{ width: 200px; height: 200px; background-color: red; margin: 0 auto; } </style> ... <script> var oBox1 = document.getElementById('box1'); var oBox2 = document.getElementById('box2'); var oBox3 = document.getElementById('box3'); function fn(event){ alert(this.id); } oBox1.onclick = fn; oBox2.onclick = fn; oBox3.onclick = fn; </script>示例
当点击div3的时候，先触发div3的点击事件，弹出div3的id值为box3
然后把点击事件传给父级元素div2，触发div2的点击事件，div2绑定了事件处理函数fn，因此会弹出div2的id属性值box2
接着div2再把点击事件传播给div1，div1同样也绑定了事件处理函数，弹出id值为box1
div1再往上传播点击事件，由于div1的父级没有绑定事件处理函数，所以没有弹出值，但是div1的父级还是接收了点击事件，只是没有做出响应
这个就是冒泡机制的全过程，冒泡机制在javascript中是默认存在的
事件冒泡带来的影响
<style type="text/css"> #box{ width: 300px; height: 300px; background-color: orange; display: none; } </style> ... <button id="btn">显示</button> <div id="box"></div> <script> var oBtn = document.getElementById('btn'); var oBox = document.getElementById('box'); //点击按钮显示div, 但是因为冒泡机制，会触发它的父级onclick时间，而document的onclick时间处理函数有把div隐藏 //因此时间冒泡机制会导致div不能显示出来 oBtn.onclick = function(){ oBox.style.display = 'block'; } document.onclick = function(){ oBox.style.display = 'none'; } </script>事件冒泡机制带来的影响
... <script> var oBtn = document.getElementById('btn'); var oBox = document.getElementById('box'); oBtn.onclick = function(event){ oBox.style.display = 'block'; event.stopPropagation(); //阻止冒泡 } document.onclick = function(){ oBox.style.display = 'none'; } </script>阻止事件冒泡
事件冒泡带来的好处
虽然事件冒泡带来了一些不好的影响，但是可以通过取消事件冒泡来解决，之所以默认事件冒泡机制开启，是因为事件冒泡会节省很多代码。例如：有一个需求，点击一个按钮，显示div，点击除按钮外的其他元素，需要隐藏div ,这个时候有两种解决方案。第一种，找到页面中除了按钮外的其他元素，都给这些元素加点击事件，然后隐藏div。这一种如果页面中有几百个元素，那么实现起来就相当复杂，因此不能采用。第二种解决方案，给这些元素的共同父级加点击事件，当这些元素触发点击事件以后，把事件传播给父级元素的点击事件，这样就节省很多代码，也就是上面案例中的应用实现。
事件源
<ul>
<li>python</li>
<li>Java</li>
<li>Golang</li>
</ul>
<script>
//我们已经学习过事件冒泡机制
//现在在li的父级元素配置点击事件，那么子元素li点击就会传播到ul的点击事件
var oUl = document.getElementsByTagName('ul')[0];
//那么当点击li的时候，我们怎么知道点击了哪个li呢？这就需要用到事件源了event.target
oUl.onclick = function(event){
console.log(event.target);
}
</script>
事件源
下面我们来完成一个小案例，在表单中输入内容，点击添加按钮，会把 表单的内容作为li元素追加到ul中，当点击li的时候，字体变成红色
<input type="text" id="ipt" /> <button id="btn">添加</button>
<ul>
<li>Python</li>
<li>Java</li>
<li>Golang</li>
</ul>
<script>
//找到input元素
var oInput= document.getElementById('ipt');
//找到按钮
var oBtn = document.getElementById('btn');
//找到ul
oUl = document.getElementsByTagName('ul')[0];
//找到li,注意这里获取到的是个数组
var oLis = document.getElementsByTagName('li');
//按钮点击事件
oBtn.onclick = function(){
//获取input的值
var oInputvalue = oInput.value;
//如果值为空则弹窗提示不能为空
if(oInputvalue == ""){
alert('值不能为空！');
return false;
}
//创建一个li元素
var oLi = document.createElement('li');
//li里面的内容为 input的值
oLi.innerHTML = oInputvalue;
//把这个li加入到ul中
oUl.appendChild(oLi);
}
//设置li的点击事件，字体变为红色
for(var i=0;i<oLis.length;i++){
oLis[i].onclick = function(){
this.style.color = "red";
}
}
</script>
方案1
这是为什么呢？
这是因为先执行了循环，只有3个值，因为前面的3个可以正常变色。那么这种情况下，我们就可以不用循环，利用冒泡机制来解决
把点击事件放在li的父级元素ul上（因为冒泡机制，点击li会传播到ul），然后根据事件源能够做到点击了哪个li，然后把它的字体变色
//设置ul的点击事件 oUl.onclick = function(event){ event.target.style.color = "red"; }
前面我们还遗留了一个拖拽效果，速度变快出现 bug的问题，那是因为移动过快导致鼠标已经移出了div，从而导致oBox.onmousemove事件没有发生了。这个问题也可以通过冒泡机制解决，我们只要把鼠标按下，移动，抬起的事件绑定到它的父级元素document就可以了
优质内容筛选与推荐>>1、OpenVPN详细搭建
2、nrm的安装和使用
3、Salesforce学习之路（十）Aura组件工作原理
4、R = [obj for obj in recs[imagename] if obj['name'] == classname] KeyError: '007765'
5、jdbc的封装