移除事件：element.removeEventListener(‘事件类型，事件回调函数,(是否捕获时触发))

移除事件：element.detachEvent(‘on开头的事件名’,事件函数名)

删除

function removeEventListen(elem,type,callback){
try{
elem.removeEventListener(type,callback)
}catch(e){
elem.detachEvent(“on”+type,callback);
}
}

各种绑定方法对比

addEventListener

• 优点

  支持捕获和冒泡阶段分开侦听
• 支持事件抛发机制
• 支持同一个事件做多个事件回调函数
• 事件使用时可以将函数与内容完全分离

缺点

不支持IE8及以下
• 方法名太长

attachEvent

• 优点

  支持IE8以下
• 可以使一个事件调用多个回调函数
• 事件使用时可以将函数与内容完全分离

缺点

IE8以上不支持
• 没有捕获
• 不支持一次点击
• 未来被淘汰

οnclick=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