事件上

作者: 升龙无涯 | 来源:发表于2020-07-08 16:03 被阅读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>

相关文章

  • 事件(上)

    事件流 所谓事件流就是从页面中接收事件的顺序。 冒泡事件 IE的事件流叫做冒泡事件,即事件开始时由最具体的元素接收...

  • 事件上

    typora-copy-images-to: media 事件对象(上) 事件复习 事件三要素: 事件源 + 事...

  • 减肥事件(上)

    春节之后,长肉很快。居然稳居120斤下不来了。很想减肥,可是又忍不住吃的诱惑,犹犹豫豫,都快长到125了。 正有减...

  • 上滑触发事件

    // 上滑查看时继续加载 在scroll事件中处理

  • 原生js事件上

    各种事件 鼠标事件 onclick 单击事件 oncontextmenu 鼠标右击时触发 ondblclick 鼠...

  • 幸运失踪事件(上)

    文/鱼筱豆 01 她叫幸运,在一家报社工作,是一名负责采风的记者,专门到世界各地深挖各种神秘事件。 这一天,她被主...

  • 古装拍摄事件(上)

    2019年12月我和小伙伴在微信朋友圈看到关于XX古装拍摄的信息流广告,广告内容大概是水瓶座两人同行可9.9元拍摄...

  • 灵异事件(上)

    灵异是什么?就我的理解,就是那事儿和鬼神有关,人们通常都把它称之为灵异事件。尽管,我们接受无神论教育已经快百年了,...

  • JavaScript--事件(上)

    一、事件的概述 1、JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意...

  • Android触摸事件(上)——事件的由来

    从接触Android开发以来,貌似Android的事件就一直伴随着我。从一开始的setOnclickListene...

网友评论

      本文标题:事件上

      本文链接:https://www.haomeiwen.com/subject/peuccktx.html