事件对象
事件的兼容（侦听和删除侦听）
ie9以上
-
添加事件：element.addEventListener(‘事件类型，事件回调函数,(是否捕获时触发))
-
拓展：
- 1、事件只执行一次 div.addEventListener("click",clickHandler,{once:true})
- 2、事件执行指定次数 加一个变量，判断变量的次数
-
-
移除事件：element.removeEventListener(‘事件类型，事件回调函数,(是否捕获时触发))
ie8及以下
-
添加事件：element.attachEvent(‘on开头的事件名’,事件函数名)
- 注：只有两个参数，没有第三个参数
-
移除事件：element.detachEvent(‘on开头的事件名’,事件函数名)
兼容写法
-
添加
- function addEventListen(elem,type,callback){ try{ elem.addEventListener(type,callback) }catch(e){ elem.attachEvent("on"+type,callback); } }
-
删除
- function removeEventListen(elem,type,callback){ try{ elem.removeEventListener(type,callback) }catch(e){ elem.detachEvent("on"+type,callback); } }
各种绑定方法对比
addEventListener
-
优点
- 支持捕获和冒泡阶段分开侦听
- 支持事件抛发机制
- 支持同一个事件做多个事件回调函数
- 事件使用时可以将函数与内容完全分离
-
缺点
- 不支持IE8及以下
- 方法名太长
attachEvent
-
优点
- 支持IE8以下
- 可以使一个事件调用多个回调函数
- 事件使用时可以将函数与内容完全分离
-
缺点
- IE8以上不支持
- 没有捕获
- 不支持一次点击
- 未来被淘汰
onclick=fn
-
优点
- 全浏览器支持，不考虑兼容问题
- 代码便捷
-
缺点
- 不支持事件抛发机制，只能使用系统默认事件
- 同一个元素同一个事件不支持多个回调函数
- 代码大量使用匿名函数，容易造成回调地狱
- 在开发中代码和代码实际功能不能分离
-
拓：onclick的删除
- 元素.onclick = null;
e事件内容（对象）
回调函数不能设置参数 只能系统默认传参
e.type
- 事件类型（例：click）
e.target 、e.srcElement
- 事件目标对象
e.currentTarget this
- 事件侦听对象
e.cancalBubble
- 设置取消冒泡
Event事件
change
-
失去焦距触发
-
只能针对表单触发
-
input 如果input.value值发生改变，并且失去焦距触发
-
select select.value是选中的值
- 如果想要增加多选 multiple，要得到值需用select中的name
- select.selectedOptions 被选择多个元素 select.selectedOptions[i].textContent
- select.selectedIndex 选择下标
-
error
-
加载出错的事件
- load 和error 用于图片的加载，Ajax通信以及JSON或者其他文件的加载等
- 任何内容没有放在页面中不能调用clientWidth,offsetWidth,scrollWidth这样的数据
load
-
加载成功的事件
-
load还可以用于window加载创建完成
-
使用window，侦听load事件
- 1、所有的DOM加载完成
- 2、所有的图片已经加载完成
-
reset
- 把表单中的元素重置为它们的默认值
submit
- 把表单数据提交到 Web 服务器
- 注：submit和reset只能针对form表单侦听，不能针对input
resize
- 调整元素的尺寸
- 针对window和textArea的事件
select
- input文本选择文字时触发
unload
- 卸载（现在用不到了）
scroll
- 滚动滚动条时触发
popstate事件
- 历史记录被回退和前进时触发
阻止默认事件
DOM中：
- event.preventDefault() 阻止默认行为
IE中: （兼容写法）
- event.returnValue=false 返回值=false
XMind: ZEN - Trial Version
