事件上
2020-07-08 本文已影响0人
升龙无涯
typora-copy-images-to: media
事件对象（上）
事件复习
事件三要素： 事件源 + 事件名称 + 事件处理程序
- 事件源 : 谁触发这个事件 (按钮 btn)
- 事件类型 : 触发了什么事件 (点击click事件)
- 事件处理程序 : 事件触发后要执行的代码(函数形式)----可以是有名字的函数，要不要加小括号？不加
事件对象
浏览器为事件提供了一个对象，用来记录事件的各种具体信息，例如，鼠标点击的位置、鼠标按键的信息、键盘的键码。。。
这就是事件对象。
<body>
<button id="btn">按钮</button>
</body>
<script type="text/javascript">
btn.onclick=function(){
console.log(window.event);
}
</script>
点击访问结果：
| 事件对象 |
|---|
1565841834616.png
|
从结果中可以看出，这个事件对象中包含了事件的类型、鼠标点击的位置，在屏幕中和在浏览器中的位置。点开的话，里面还有很多信息。
还有另外一种写法：
btn.onclick=function(e){
console.log(e);
}
以前的时候，前面的写法是针对IE浏览器的，下面的写法是针对W3C标准浏览器的。上面的写法，现在基本都兼容了；下面这种写法，在IE低版本浏览器中还不兼容。
兼容所有浏览器的写法：
btn.onclick = function(e){
var ev = e || window.event
console.log(ev);
}
使用的是短路运算法。
var a = 1;
var b;
// 将赋值作为条件，永远是成立的
if(b=2){
console.log(b); // 2
}
console.log(b); // 2
// 在或者的逻辑中，如果第一个条件为true，则不再执行第二个条件
if(a>0 || (b=3)){
console.log(b); // 2
}
console.log(b); // 2
// 只有第一个条件是false的时候才会执行第二个条件
if(a>1 || (b=3)){
console.log(b); // 2
}
console.log(b); // 2
// 逻辑运算符||两边都会转为布尔值进行判断
// 短路运算
var c = 0 || 1;
console.log(c); // 1
// 因为0转为布尔值是false，所以赋值的时候0没有执行
/* 相当于下面这几行代码 */
if(0){
c = 0;
}else if(1){
c = 1;
}else{
c = undefined;
}
// 当e是false的时候，将window.event赋值给ev
ev = ev || window.event;
如果是行内绑定的事件，就将事件对象当做参数传进来即可。<font color="red">且必须是event。</font>
例：
<button onclcik="fn(event)">
按钮
</button>
<script>
function fn(e){
console.log(e);
}
</script>
事件类型
在事件函数中有一个参数，里面记录了事件的所有信息。
在事件对象中有个一个属性type可以获取到当前事件的类型。
window.onload = function(e){
var ev = e || window.event;
console.log(ev.type); // load
}
鼠标事件
| 事件 | 描述 |
|---|---|
| click | 左键单击 |
| contextmenu | 右键单击 |
| dblclick | 双击 |
| mousedown | 左键按下 |
| mouseup | 左键弹起 |
| mouseover | 鼠标放上去（在子元素上也会触发） |
| mouseout | 鼠标离开 |
| mouseenter | 鼠标放上去 |
| mouseleave | 鼠标离开 |
| mousemove | 鼠标移动事件 |
| mousewheel | 鼠标滚轮事件 |
注意：鼠标滚轮事件有兼容性问题，在IE、Chrom中是mousewheel，在FireFox中是DOMMouseScroll，且在FirFox中不能使用on来绑定。在IE和Chrom中向上滚动，事件对象中的wheelDelta是120，向下滚动是-120，在FirFox中向上滚动，事件对象中的e.detail是3，向下滚动是-3。
案例：星星评分
<body>
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
<img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt="">
</body>
<script type="text/javascript">
var imgs = document.querySelectorAll("img");
for(var i=0;i<imgs.length;i++){
imgs[i].index = i;
imgs[i].onmouseover=function(){
for(var j=0;j<=this.index;j++){
if(j%2==0){
imgs[j].src = './images/rank_1.gif'
}else{
imgs[j].src = './images/rank_2.gif'
}
}
for(var j=this.index+1;j<imgs.length;j++){
if(j%2==0){
imgs[j].src = './images/rank_3.gif'
}else{
imgs[j].src = './images/rank_4.gif'
}
}
}
}
</script>
