事件02-事件类型

事件类型很多,这里仅列出常见事件

UI事件

UI事件是指那些用户与页面上元素操作相关的事件

事件名称	事件说明
load	当页面加载后在window上触发
unload	当页面完全卸载之在window上面触发
resize	当用户在或框架大小变化时在window上触发
scroll	滚动时触发
…

如下通过JavaScript指定事件处理程序

// 1.UI事件
    // 1.load 事件
    EventUtil.addHandler(window, 'load', function (event) {
        // alert("加载事件!");
        //预加载图片,在加载src属性之前先加载事件
        var image = document.createElement("img");
        EventUtil.addHandler(image,"load",function (event) {
            event = EventUtil.getEvent(image);
            alert(EventUtil.getTarget(event).src);
        });
        document.body.appendChild(image);
        image.src = "../img/邵群.gif"
    });

焦点事件

事件名称	事件说明
blur	在失去焦点时触发
focus	在元素获得焦点时触发事件不冒泡
focusin	在元素获得焦点时触发,这个事件在HTML事件中和focus等价,事件冒泡
focusout	在元素失去焦点时触发

当焦点从一个页面元素到另一个元素,这个过程经历

1. focusout
2. focusin
3. blur
4. focus

鼠标与滚轮事件

事件名称	事件说明
click	鼠标单击主鼠标按钮事件
dbclick	鼠标双击主鼠标事件
mousedown	在用户按下任意鼠标按钮时触发
mouseenter	在鼠标光标从元素外部首移动到元素范围之内时触发,这个事件不冒泡
mouseleave	在位于元素上方的鼠标光标移动到元素外围之外触发,这个事件不冒泡
mousemove	当鼠标指针在元素内部移动时重复地触发
mouseout	当鼠标指针位于一个元素上方,然后用户将其移入两一个元素时触发
mouseover	当鼠标位于一个元素外部,然后用户将其首次移入另一个元素边界之内是触发
mouseup	在用户实发鼠标键盘时触发

只有在一个元素上相继触发mouseenter和mouseup事件,才会触发click事件.

双击事件的触发顺序始终如下:

1. mousedown
2. mouseup
3. click
4. mousedown
5. mouseup
6. click
7. dbclck

1.客户区坐标位置

• clientX
• clientY

如图:

2.页面坐标位置
能告诉事件是在哪个位置发生的

• pageX
• pageY
  3.屏幕坐标位置
  确定鼠标事件发生时鼠标相对于整个屏幕的坐标信息
• screenX
• screenY

直接访问事件的属性even.screenY

键盘与文本事件

有3个键盘事件:

• keydown 当用户按下键盘上的任意按键时触发,若按住不放,则一直重复
• keypress 当用户按下键盘上的字符键触发,若按住不放,则重复触发该事件
• keyup 当用户释放键盘上的键时触发

键码,早期用keyCode来代替,后来DOM3级别直接用key和char属性

• event.key 返回字符串,是键盘上的值,非字符键时返回相应的键名(“Down"或"Shift”)

复合事件

复合事件一般是用于处理IME(输入法编辑器)的输入序列

• compositionupdate 在向输入字段中插入新字段新字符时触发
• compositionend IME的文本复合系统关闭是触发,表示返回正常键盘输入状态

变动事件

(略)

HTML5事件

(略)

设备事件

(略)

触摸与手势事件

• touchstart 当手指触摸屏幕时触发
• touchmove 当手指在屏幕上滑动时连续的触发
• touchend 当手指从屏幕上移开时触发
• touchcancel 当系统停止跟踪触摸时触发
  三个跟宠触摸的属性
  * touches 表示当前时间目标的Touch对象的数组
  * targetTouches 特定于事件目标的Touch对象的数组
  * changeTouches 表示自上次触摸以来发生了什么,什么改变的Touch对象的数组