事件相关内容

Posted 2022-09-20 hm-08042

1、事件

　　（1）事件源：触发事件的源头

　　（2）事件类型：什么行为

　　（3）事件处理函数：触发行为时要做什么事，触发事件源的对应的事件类型时，直接被执行的函数

　　（4）事件对象：记录事件发生的所有信息

2、事件类型

　　（1）鼠标类

　　　　1）onclick：点击

　　　　2）ondblclick:双击

　　　　3）onmousedown：按下

　　　　4）onmouseup：抬起

　　　　5）onmouseover|onmouseenter：进入

　　　　6）onmouseout|onmouseleave：离开

　　　　7）onmousemove：移动

　　　　8）oncontextmenu：右键单击

　　　　9）onwheel：滚轮滚动

 

　　（2）键盘类

　　　　Tip：键盘事件只能加给具有焦点的元素或document

　　　　1）onkeydown：按下任意键

　　　　2）onkeyup：释放任意键

　　　　3）onkeypress：抬起并按下

 

　　（3）表单控件类　

       1）onblur：失去焦点

　　　　2）onfocus：获取焦点

　　　　3）oninput：输入

　　　　4）onchange：改变

　　　　5）onsubmit：提交（只能用于from标签）

　　　　6）onreset：重置（只能用于from标签）

　　　　7）onselect：选中        

 

　　（4）页面类　　　　

　　　　1）onload：页面加载结束后要做什么

　　　　2）onscroll：页面发生滚动
　　　　　　
　　　　　　属性：页面滚走的距离  （可读可写）

　　　　　　document.documentElement.scrollTop -->  垂直方向滚动的距离

　　　　　　document.documentElement.scrollLeft -->  水平方向滚动的距离

　　　　3）onresize：窗口或框架的大小发生改变

　　　　　　属性：页面内容区的尺寸（只读）

　　　　　　document.documentElement.clientWidth    -->    页面内容区的宽度

　　　　　　document.docuementElement.clientHeight  -->   页面内容区的高度　　　　

 

3、事件对象

　　（1）特点：

　　　　默认不显示，需要手动获取；

　　　　只有在事件中存在，在事件还没有开始前或结束后，都无事件对象；

　　　　事件对象只跟着事件走，类似于局部变量；

　　　　事件结束后事件对象会被浏览器（window）回收。

　　（2）事件对象的获取  （有兼容）　　　　

　　兼容方式：
   　　 functioin fn(eve) 
      
     　　   var e = eve || window.event;           

　　　　

　　Tip：event只存在于事件中，外部不可用，使用时window不可以省掉

 

　　（3）如何通过事件对象获取事件源

　　　　e.target

4、鼠标事件的常用属性

　　（1）检测按下的鼠标按键  -->   button  |   buttons　

　　obox.onmousedown = function(eve)g
        var e = eve || window.event;
        console.log(e.button);    //左键：0  滚轮：1   右键：2
        console.log(e.buttons);   //左键：1  滚轮：4   右键：2
    

 

　　（2）检测鼠标相对于浏览器左上角的位置   -->   clientX  |   clientY

　　　　

　　obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.clientX);    //水平方向的位置
        console.log(e.clientY);   //垂直方向的位置
    

　　（3）检测相对于html文档的左上角的位置  -->   pageX  |   pagesY

 

　　obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.pageX);    //水平方向的位置
        console.log(e.pageY);   //垂直方向的位置
    

　　Tip: 不支持IE8-

　　

　　（4）检测相对于显示器屏幕左上角的位置  -->  screenX  |   screenY

　　obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.screenX);    //水平方向的位置
        console.log(e.screenY);   //垂直方向的位置
    

　　　

　　（5）检测相对于事件源左上角的位置  -->   offsetX   |   offsetY

obox.onmousedown = function(eve)
        var e = eve || window.event;
        console.log(e.offsetX);    //水平方向的位置
        console.log(e.offsetY);   //垂直方向的位置
    

 

5、事件冒泡

　　当触发某个元素的某个事件时，它会先触发自己的对应事件，然后再依次向上触发所有父级中相同的事件，如果中间的某个父级没有相同的事件，会继续向上触发。

　　由于事件冒泡的既有好也不好，当用不到的时候就需要阻止事件冒泡。

　　事件冒泡的阻止（有兼容）：

　　function stopBubble(e) 
        if(e.stopPropagation) 
            e.stopPropagation();   //非IE
        else 
            e.cancelBubble = true;  //IE
        
    

 

6、键盘事件及其相关属性

　　事件源：document或其他具有焦点的属性

　　如何知道按下的是哪个键？ -->   keyCode（事件对象的属性）

　　keyCode   值为十进制    也是对应的ASCII码   通过keyCode找得到对应的键盘按键

　　document.onkeydown = function(eve) 
        var e = eve || window.event;
        if(e.keyCode == 65) 
            console.log("A");
        
    


　　keyCode存在兼容问题，兼容的解决：
　　
　　var code = e.keyCode || e.which;

　　特殊键：

　　1）Ctrl键

　　　　属性：ctrlKey

　　　　取值：true |  false

　　　　当按下其他键时值为false，按下Ctrl键时取值为true

　　2）shift键

　　　　属性：shiftKey

　　　　取值同上。

　　3）alt键：

　　　　属性：altKey

　　　　取值同上。

　　Tip: 常用见取值  -->   左键：37，上键：38，右键：39，下键：40，回车键：13，空格键：32

 

7、默认事件

　　我们没有设置，但是系统默认有的事件  ==>  默认事件或默认行为

　　如何阻止默认事件？（有兼容）　　

　　//方法一：
　　function stopDefault(e) 
        if(e.preventDefault) 
            e.preventDefault();   //非IE
        else 
            e.returnValue = false;  //IE
        
    


　　//方法二：(无兼容）
    return false;

 

8、事件的绑定方式

　　（1）赋值式（DOM0级事件绑定）

　　　　常用 、简单、没有兼容

　绑定方式：　
　　　obox.onclick = fn;
     obox.onclick = function() //操作
     obox.onclick = function() fn();

　删除方式：
　　　obox.obclick = nll;

　　

　　（2）事件监听式（DOM0级事件绑定）

　　　　有兼容　　　

　　兼容的解决： 

　　绑定方式：　　

　　function addEvent(ele,type,fn) 
        if(ele.addEventListener)
            ele.addEventListener(type,fn);
        else if(eve.attachEvent)
            ele.attachEvent("on"+type,fn);
         else 
            ele["on"+type] = fn;
        
    

　　删除方式：

　　function addEvent(ele,type,fn) 
        if(ele.addEventListener)
            ele.addEventListener(type,fn);
        else if(eve.attachEvent)
            ele.attachEvent("on"+type,fn);
         else 
            ele["on"+type] = fn;
        
    

 

9、事件流的三个阶段

　　（1）冒泡阶段  （从里向外） ==>  默认阶段

　　（2）目标阶段  （当前阶段）

　　（3）捕获阶段 （从外向内）

　　待补充……