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>
点击访问结果:
事件对象 |
---|
![]() |
从结果中可以看出,这个事件对象中包含了事件的类型、鼠标点击的位置,在屏幕中和在浏览器中的位置。点开的话,里面还有很多信息。
还有另外一种写法:
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>
网友评论