JavaScript 鼠标事件、键盘事件、表单事件、window事件
鼠标事件
- click：单击
- dblclick：双击
- mouseover：移入（子节点会触发）
- mouseout：移出（子节点会触发）
- mousemove：移动（会不停的触发）
- mouseenter：移入（子节点不会触发）IE8+
- mouseleave：移出（子节点不会触发）IE8+
- mousedown：按下（左右键）
- mouseup：抬起（左右键）
- contextmenu：右键单击（上下文环境菜单）
- onmousewheel：chrome ie 滚轮滚动
- e.wheelDalta：向下 -120 向上 120
- DOMMouseScroll：firefox 只能事件绑定 滚轮滚动
- e.detail：向下 3 向上 -3
键盘事件
- keydown：键盘按下（按下不动会一直触发）
- keyup：键盘抬起
- keypress：键盘按下（只支持字符键）
window事件
- load：当页面加载完成以后会触发
- unload：当页面解构的时候触发（刷新页面，关闭当前页面）IE浏览器兼容
- scroll：页面滚动 不停的触发
- resize：窗口大小发生变化 不停的触发
- visibilitychange：标签显示或隐藏时触发
- blur：获取焦点时触发
- focus：失去焦点时触发
表单事件
- input：value 值发生改变
- blur：失去焦点
- focus：获取焦点
- select：输入框中文本被选中触发
- change：当输入框被修改且失去焦点 必须添加到form表单元素上
- submit：点击 submit 按钮才触发
- reset：点击 reset 按钮才触发
JavaScript event 事件对象
早期火狐不兼容 event 需要传参 ev
var ev = ev || event;
js- 鼠标按下/单击：mousedown，支持
- e.button：0 左键 1 滚轮 2 右键
- 鼠标位置：鼠标事件支持
- e.offsetX/Y：距离当前触发元素的 left/top 值
- e.clientX/Y：可视区 left/top 值
- e.pageX/Y：页面文档的 top/left 值
- e.screenX/Y：屏幕左上角 left/top 值
- 热键：keydown 支持，按下为 true
- e.shiftkey：Boolean
- e.altKey：Boolean
- e.ctrlKey：Boolean
- e.metakey：windows —> windows键，macos —> command键
- 键盘按下：keydown/keyup 支持
- e.which/e.keycode：返回按下的ascll码值，不区分大小写
- enter：13
- shift：16
- ctrl：17
- alt：18
- a：65
- 上下左右：37 38 39 40
- 键盘按下：keypress 仅支持字符键（DOM3 被弃用）
- e.which/e.charCode：返回按下的 ascll 码值，区分大小写
- 滚动
- e.wheelDelta：chrome IE 向下 -120 向上 120
- e.datail：firefox 向下 3 向上 -3
兼容:
e.wheelDalta ? e.wheelDalta < 0 : e.datail > 0 ;
// chrome是否存在 ? chrome < 0 是否向下为true : firefox < 0 是否向下
jsJavaScript 事件委托
- e.target：chrome
- e.srcElement：IE8-
兼容：
e.target || e.srcElement
js利用 e.target.nodeName 或当前节点的 id 来委托事件
JavaScript 阻止冒泡及默认行为
阻止冒泡
- e.cancalBubble = true：IE8- chrome
- e.stopPropagation()：firefox chrome
兼容：
e.stopPropagation ? e.stopPropagation() : e.cancalBubble = true;
js阻止默认行为
- 普通函数: return false
- addEventListener：e.preventDefault() // chrome
- attachEvent：e.returnValue = false // IE
兼容：
e.preventDefault ? e.preventDefault() : e.returnValue = false;
js阻止IE选择事件
- onmousedown：setCapture() 设置捕获
- onkeydown：releaseCapture() 释放捕获
JavaScript IE、chrome 事件监听
绑定事件
chrome
addEventListener('click',fn,false)
js- 事件（不带on），函数
- 默认 false 冒泡触发，true 捕捉阶段触发
IE
attachEvent("onclick",fn)
js- 事件（带on），函数
解绑事件
removeEventListener(oEvent,fn);// chrome
detachEvent(oEvent,fn);// IE
js区别：
- 事件：chrome 不带on IE 带 on
- 函数执行顺序：chrome 顺序执行 IE 逆序执行
- 是否支持捕捉触发：chrome 支持 IE 只支持冒泡
- this 指向：chrome 调用对象 IE window 对象
兼容
el.addEventListener ? el.addEventListener(event,fn,false) : el.attachEvent('on' + event,fn);
el.removeEventListener ? el.removeEventListener(event,fn) : el.detachEvent('on' + event,fn);
jsJavaScript UI 事件
| 属性/方法 | 类型 | 说明 |
|---|---|---|
| bubbles | Boolean | 事件是否冒泡 |
| stopPropagation() | Function | Firefox chrome 取消捕捉/冒泡，bubbles为true |
| cancelable | Boolean | IE8 chrome 取消默认行为 |
| preventDefault() | Function | Firefox chrome 取消默认行为。cancelable 为 true， |
| currentTarget | Element | 全等 === this |
| defaultPrevented | Boolean | 是否调用 preventDefalt() |
| detail | integer | Firefox 滚动滚轮相关信息 |
| eventPhase | integer | 调用事件处理程序阶段：1 表示捕捉阶段 2 表示处于目标 3 表示冒泡阶段 |
| stopImmediatePropagation() | Function | 取消捕捉/冒泡，同时阻止任何事件处理程序被调用 |
| target | Element | 当前触发的元素 |
| trusted | Boolean | 为 true 表示事件是浏览器生成的，false 表示 js 生成写的 |
| type | String | 被触发事件的类型 |
| view | AbstractView | 与事件关联的抽象视图。等同于发生事件的 window 对象 |
