JavaScript学习(十三)——事件

事件对象:当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进入响应函数,在事件对象中封装了当前事件相关的一切信息,比如鼠标坐标,键盘那个按键被按下,鼠标滚轮方向……

1.onmousemove事件

该事件会在鼠标在元素中移动时触发,clientX可以获取鼠标指针的水平座标,clientY可以获取鼠标指针的垂直坐标,他们获取的是相对于当前可见窗口的坐标,哪怕滚动条的移动,坐标还是相对于当前左上角。但是标签的偏移量坐标是相对于整个页面的,所以我们可以使用pageX和pageY来获取鼠标相对于整个页面的坐标。

    //获取button对象
    var btn=document.getElementById("btn");
    document.onmousemove=function(e){
        btn.innerHTML="("+e.clientX+","+e.clientY+")";
    }

 注意兼容性,IE8以及它以下的浏览器中,是将事件作为window对象属性(event)保存的。

    //获取button对象
    var btn=document.getElementById("btn");
    document.onmousemove=function(e){
        if(!e){
        e=window.event;
        }
        //e=e||window.event可能会是更加常用的方法
        btn.innerHTML="("+e.clientX+","+e.clientY+")";
    }

 2.事件的冒泡

事件的冒泡指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发,如果不希望发生事件冒泡那么可以通过事件对象来取消冒泡,可以将事件对象的cancelBubble设置为true,即可取消冒泡。

3.事件的委派

是指将事件统一绑定给元素共同的祖先元素,这样当后代元素上的事件触发时,就会一直冒泡到祖先元素,从而通过祖先元素的相应函数来处理事件,事件的委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序性能,但是由于父元素的区域远大于我们所希望点击处理的区域,所以我们需要借助target来判断触发事件的对象是否时我们期望的元素,否则不执行,target属性是判断触发事件的对象。


    if(event.target.className===目标的class属性值){
        执行操作;
    }

4.事件的绑定

使用 对象.事件=函数 的形式绑定相应函数,它只能同时为一个元素的一个事件绑定一个响应函数而不能绑定多个,如果绑定了多个函数则会出现后面函数覆盖前面的事件的情况

这种时候我们需要使用addEventListener()方法——通过这个方法也可以为元素绑定响应函数,第一个参数是事件的字符串(不能传入on),第二个参数是回调函数,当事件被触发时该函数会被调用,第三个参数是一个布尔值,判断是否在捕获阶段触发事件,一般传false,这样就可以为同一个元素的相同事件同时绑定多个响应函数,这样当事件被触发时,响应函数将会按照函数的绑定顺序执行

    //获取button对象
    var a=document.getElementById("btn");
    a.addEventListener("click",function(){
        alert("第一个事件触发!");
    },false);
    a.addEventListener("click",function(){
        alert("第二个事件触发!");
    },false);
    a.addEventListener("click",function(){
        alert("第三个事件触发!");
    },false);
    

 

 

 为了兼容坑爹的IE8浏览器,attachEvent()可以来实现,第一个参数时事件的字符串(需要on),第二个参数是一个回调函数,这个方法也可以同时为一个事件绑定多个处理函数,不同的是它是后绑定先执行,执行顺序和addEventListener()(先绑定先执行)正好相反

所以为了兼容所有的浏览器,我们必须重写一个事件绑定函数:

参数——obj是要绑定事件的对象,eventStr是事件的字符串(不需要on),callBack是回调函数

注意——addEventListener()中的this是绑定事件的对象,attachEvent()中的this是window,所以我们需要同一两个方法的this

function bind(obj,eventStr,callBack){
    if(obj.addEventListener){
        //大部分浏览器兼容的方式
        obj.addEventListener(eventStr,callBack,false);
    }else{
        //IE8以及以下
        /**
         * this是谁由调用方式决定,call函数可以修改this
         */
        obj.attachEvent("on"+eventStr,function(){
            //我们修改​​事件添加函数的this对象,使用一个匿名的函数调用
            callBack.call(obj)
        });
    }
}

5.事件的传播

 (1)捕获阶段:在捕获阶段时从最外层的祖先元素向目标元素进行事件的捕获,但是默认此时不会触发事件

(2)目标阶段:事件捕获到目标元素,捕获结束开始在目标元素上触发事件

(3)冒泡阶段:事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件

——如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true

6.onmousewheel事件

可以绑定一个鼠标滚轮滚动事件,会在滚轮滚动时触发,但是火狐不支持该属性,在火狐中需要使用DOMMouseScroll来绑定滚动事件,注意该事件需要通过addEventListener()函数来绑定

判断鼠标滚动的方向可以使用event.wheelDelta获取鼠标滚轮滚动的方向,这个值我们只看正负,向上滚为正,向下为负。但是在火狐中不支持,在火狐中可以使用event.detail来获取滚动的方向

为了兼容写的函数

对象名.onmousewheel=function(event){
    event=event||window.event;
    if(event.wheelDelta>0||event.wheelDelta<0){
        向上滚动的操作;
    }else{
        向下滚动的操作;
    }
    retuen false;//取消浏览器的滚动条默认滚动行为
}

注意:有时候滚轮滚动的时候,如果浏览器有滚动条,滚动条会随之滚动,这是浏览器的默认行为,如果不希望发生,则可以取消默认行为。

但是使用addEventListener()绑定响应函数取消默认行为时不能使用return false;我们需要使用event来取消默认行为event.preventDefault(),但是为了兼容IE8需要做一下修改

event.preventDefault&&event.preventDefault()

7.键盘事件

键盘事件是onkeydown,获取按键被按下的事件(如果连续按住某个键不放则该事件会一直触发,而当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一些,其他会非常快,这种设计是为了防止误操作的发生),以及onkeyup,获取按键被松开的事件,注意键盘事件一般都会绑定给一些可以获取到交点的对象或者是document。

keyCode可以获取按键的编码,通过它可以判断哪个按键被按下,当然除了keyCode之外还有altKey、ctrlKey、shiftKey等判断alt、ctrl、shift是否被按下,如果按下则返回true,否则返回false,可以判断是否同时按键。

在文本框中可以输入内容,属于onkeydown的默认行为,如果在onkeydown中取消了默认行为,则输入的内容不会出现在文本框中。(事件绑定响应函数返回false)

 

 

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页