• javaScirpt学习之事件


    一、事件对象

    在事件处理程序中,浏览器会为之传入一个event对象,该对象的常用属性和方法如下:

    type:触发的事件类型,如click,keypress等

    target:事件的目标

    currentTarget:事件处理程序当前正在处理事件的那个元素

    在事件处理程序内部,this始终等于curentTarget的值,如果事件处理程序直接赋给了目标元素,那么这三个值是相等的。但是,如果事件处理程序是注册到父节点上,那么this和currentTarge则等于父节点,而target则等于实际发生事件的子节点元素。

    eventPhase:事件发生到哪个阶段:0事件捕获阶段,1事件处于目标对象上,2冒泡阶段。

    常用方法:

    preventDefault()取消事件的默认行为

    stopImmediatePropagation()取消事件的进一步捕获或者冒泡。

    stopPropagation()取消事件冒泡

    不同浏览器对上述对象和方法的调用也存在一定差异,因此,下列代码实现了一个跨浏览器的EventUtil对象。

    //事件的添加和删除
    var EventUtil={
        addHandler:function(element,type,handler){
            if(element.addEventListener){
                element.addEventListener(type,handler,false);
            }else if(element.attachEvent){
                element.attachEvent("on"+type,handler);
            }else{
                element["on"+type]=handler;
            }
        },
        removeHandler:function(element,type,handler){
            if(element.removeEventListener){
                element.removeEventListener(type,handler,false);
            }else if(element.detachEvent){
                element.detachEvent("on"+type,handler);
            }else{
                element["on"+type]=null;
            }
        },
        getEvent:function(event){
            return event?event:window.event;
        },
        getTarget:function(event){
            return event.target?event.target:event.srcElement;
        },
        preventDefault:function(event){
            if(event.preventDefault){
                event.preventDefault();
            }else{
                event.returnValue=false;
            }
        },
        stopPropagation:function(event){
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble=true;
            }
        }
    
    
    };

    三、常见的事件类型(这里只备注常用的)

    1.UI事件

    UI事件值那些不一定和用户操作有关的事件。包括

    1)load 在页面完全加载,包括图像(延迟图像实现的依据),js文件,框架,css等资源都加载完毕后才会触发,

    2)unload 在页面完全卸载时在window上触发,在所有框架都卸载后在框架上触发,或者迁入内容卸载完毕后在object上触发。

    3)resize 窗口大小变化时在window上触发

    4)scroll 当用户滚动带有滚动条的元素中内容在,在该元素上触发。

    5)error 当发生javascript错误时,在window上触发;当无法加载图像时在img上触发;

    注意上述事件,有些不仅仅是在window上出发,如load在<img>上,scroll在其他元素上也能够出发

    备注:很多js库,如jquey,其$(function())与load的区别有两点,1)window.onload只能赋值一次,这是DOM0的限制,运用上面的eventUtil也可以对一个事件增添多个事件处理程序。2)window的load是在所有资源全部加载才触发,而库中的全局函数则是在dom资源可用就能够触发,如果想实现同样的效果,可以利用document的"DOMContentLoaded"事件。

    error:在js发生错误时出发

     

    EventUtil.addHandler(window,"load",function(event){
        alert("window is ready");
    });

    2,焦点事件

    focus:在元素获得焦点时候触发,不冒泡,所有浏览器都支持

    blur:在元素失去焦点时候触发,不冒泡,所有浏览器支持

    focusin:元素获得焦点的时候触发,冒泡

    focusout:元素失去焦点时候触发,冒泡

    3.鼠标与滚轮事件(也是最常用的一类事件)

    click:用户单击鼠标左键时触发,按下回车键也能触发

    dbclick:用户双击左键时触发

    mousedown:用户按下了任意鼠标按钮手触发,不能通过按键触发这个事件

    mouseup :用户释放鼠标按键时触发,不能通过按键触发这个事件

    mouseenter:用户从元素外进入元素内时触发,这个事件不冒泡,并且在光标移动到后代元素的时候不会触发

    mouseleave :用户从元素上方移动到元素外的时候触发,事件不冒泡,并且在光标移动到后代元素的时候不会触发

    mouseout: 鼠标从元素内进入元素外时触发,事件冒泡,鼠标移动到子元素时候也会触发

    mouseover 鼠标从元素外进入元素内时触发,事件冒泡,鼠标移动到子元素时候也会触发

    mousemove 在元素内部移动时重复触发

    mousewheel 鼠标滚轮事件,该事件可以在任何元素上触发,最终会冒泡到document或者window

    只有在同一个元素上相继触发mousedown和mouseup,才会触发一次click,只有触发了两次click,才会触发一次dbclick;

    对于鼠标事件,event对象会包含下列属性:

    event.clientX与event.clinetY:鼠标相对于视口的坐标;

    event.pageX与event.pageY:鼠标相对于页面的坐标;

    event.screenX与event.screenY:鼠标相对于屏幕的坐标:

    event.relateTarget:其中,mosueover和mouseout事件中,event的relateTarget的值不再为空,对于mouseover来说,代表与之相关的失去焦点的元素;mouseout则与之相反

    event.shiftKey/event.ctrlKey/event.altKey/event.meatKey:代表是否在点击鼠标的同时按下了对应的键盘键

    event.button:对于mousedown和mouseup事件来说,因此点击任何鼠标按键都会触发,此时event.button 取值如果为0代表按下了左键,如果为1代表中间键(滚轮),为2代表右键。

    4,键盘与文本事件(在文本框上输入文本时最常用到)

    keydown:按钮键盘任意键时候出出发,如果按住不放,就重复触发

    keypress:按下键盘上的字符键才触发,按住不放,重复触发

    keyup:释放键盘时候,触发

    textInput事件:DOM3级引入了一个新事件textInput,这个事件与keypress的不同之处在于:1)keypress可以在任何获得焦点的元素上触发,textInput仅在可编辑区域触发;2)textInput只有在用户输入实际字符按键时候才会触发,而keypress在按下影响文本显示的按键(如退格)时候也会触发

    如果按下了字符键,那么触发顺序是:keydown——>keypress——>keyup;keydown和keypress是在文本变化之前触发的,keyup则是在文本变化之后触发的。

    对于这些事件,event对象会包含以下属性:

    在发生keydown和keyup事件时候,event对象的keyCode会包含一个代码,是对应的ASCII,如数字A是65等。

    在发生keypress时候,event的charCode属性也包含一个值,代表所表示字符的ASCII编码,此时的keyCode通常为0或者等于该键的键码。

    常见按键的键码有:

    回车:13

    退格:8

    制表tab:9

    如果用跨浏览器的方法取得键码:

    var code=event.charCode||event.keyCode;

    三、事件模拟

    事件模拟:dispatchEvent()或者IE8之前的fireEvent(),但是感觉貌似要么使用原生的事件模拟快捷方法:如submit(),focus()等,或者如jquery那般重构事件对象,很少有这样触发事件模拟的。 

     

  • 相关阅读:
    17 盒子模型
    16 input默认样式清除
    15 组合选择器
    14 CSS权重深入
    13 CSS样式权重问题
    12 子代选择器和后代选择器
    11 CSS的三种引入方式和基本选择器
    10 table标签
    NOIP1998拼数
    NOIP1998车站
  • 原文地址:https://www.cnblogs.com/bobodeboke/p/4666857.html
Copyright © 2020-2023  润新知