JavaScript学习笔记---事件

## 事件基础

    元素.事件类型 = function(形参){

        注：事件函数中的形参 代表 该元素发生事件的事件对象  ，一般事件做兼容

        var 事件兼容名 = event || 形参    

    }

 

    元素.事件类型 = 函数名

 

    事件关键字：event【只要发生事件，就有event】

 

## 事件中的部分属性

clientX：鼠标距离浏览器可视区最左侧距离

offsetX: 鼠标距离元素左/上角距离  

pageX：  鼠标距离文档左侧距离

screenX：鼠标距离屏幕最左侧距离

type:  获取事件类型

target、srcElement： 目标元素【触发事件元素】

 

var tar = event.target || event.srcElement;

 

## 事件绑定/取消 又叫事件监听

    普通事件缺点：同一个元素做同种事件类型，只能读取一个。若写多个，则后者覆盖前者。

    而事件绑定可以解决这个问题。

 

    ## 事件绑定

   标准：addEventListener 

        元素.addEventListener('事件类型【不加on】',函数,boolean【选填，是否捕获】) true-捕获 false-冒泡【默认】

 

    ie: attachEvent 

        注：无第三个值，因为ie没有捕获

        元素.attachEvent('事件类型【加on】',函数)  

 

    ## 事件取消

    标准：removeEventListener

        元素.removeEventListener('事件类型【不加on】',函数)

 

    ie: detachEvent

        元素.detachEvent('事件类型【加on】',函数)

 

## DOM事件流

    DOM事件流： 

    1.捕获事件

    【从外往里找】 2.确定目标阶段 3.冒泡阶段【从里向外】默认

 

    阻止冒泡

    标准： 事件.stopPropagation();

    ie：   事件.cancelBubble = true;

 

    阻止捕获

    1.不写事件绑定，不给true，默认冒泡事件，阻止冒泡

    2.事件.stopImmediatePropagation(); 阻止捕获+冒泡

 

## 事件默认行为

    浏览器自带一些默认行为，如右键菜单，如滚动滚轮上下翻页等。

    阻止默认行为

        1.标准：事件.preventDefault();

        2.ie：  事件.returnValue = false;

        3.return false

 

## 键盘事件

    onkeydown键盘按下事件

    onkeyup 键盘抬起事件

 

    【需要在onkeydown事件中检测】

    altKey:   检测alt键是否被按下【布尔值】

    ctrlKey:  检测ctrl键是否被按下【布尔值】

    shiftKey: 检测shift键是否被按下【布尔值】

 

    key：按什么返回什么内容 兼容问题 ie8+可用

    keyCode： 键盘码，键盘上任何一个按键都有键盘码  回车-13

 

## 滚轮事件

    标准、ie： onmousewheel 【写成 普通事件 或 事件绑定皆可】

    火狐： DOMMouseScroll 【必须写成事件绑定】

 

    ## 滚轮信息

    标准、ie:  事件.wheelDelta  【向上划120或150，是正数，  向下划-120或-150，是负数】

    火狐： 事件.detail          【向上划-3，是负数，  向下划3，是正数】

 

## 事件委托

    将事件委托给父系元素，再由父系元素分配给具体子元素

    使用 关键字 target