DOM0级事件处理程序
使用DOM0级方法指定的事件处理程序被认为是元素的方法,这时的事件处理程序是在元素的作用域中运行。
删除事件处理程序
btn.onclick = null;
DOM2级事件处理程序
addEventListener removeEventListener
addEventListener可以添加多个事件处理程序,执行顺序与添加顺序一样
在移除时,传入的参数要和添加处理程序时使用的参数相同。
所以removeEventListener没法移除直接在addEventListener里添加的匿名函数
解决办法是把函数拿出来,并变成具名
然后把方法名放到addEventListener和removeEventListener里用
ie9+都支持DOM2级事件处理程序
IE事件处理程序
attachEvent detachEvent
这两个方法都是带两个参数,注意第一个参数应该是类似‘onclick’这样的,而不是和DOM2一样用'click'
没有第三个参数,因为都是在冒泡阶段执行
事件的作用域是全局作用域window
可以添加多个事件,执行顺序和添加顺序相反
移除的方法同removeEventListener
支持IE事件处理程序的浏览器有IE和Opera
事件对象
在触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件相关的信息。
DOM中的事件对象
bubbles 是否冒泡
cancelable 是否可以取消事件的默认行为
currentTarget 当前正在处理事件的那个元素
defaultPrevented 为true表示已经调用了preventDefault()
detail 与事件相关的细节信息
eventPhase 调用事件处理程序的阶段,1表示捕获阶段,2表示处于目标,3表示冒泡阶段
preventDefault()取消事件的默认行为,如果cancelable是true,则可以使用这个方法
stopPropagation()取消事件的进一步捕获或者冒泡
target 事件的目标
type 被触发的事件类型
IE的事件对象
cancelBubble 默认值为false 设为true可以取消事件冒泡
returnValue 默认为true,设为false可以取消事件的默认行为
srcElement 事件的目标
type 被触发的事件类型
resize事件,FF只有在用户停止调整窗口大小时才会触发resize事件。IE,chrome,safari,opera会在窗口变化一像素时触发resize事件
clientX clientY相对于浏览器视口
screenX screenY 相对于整个屏幕
pageX pageY 相对于页面本身
在页面没有滚动的情况下clientX和pageX相等Y也是
event.shiftkey
event.ctrlkey
event.altkey
event.metakey
IE9+支持这四个键,IE8-不支持metakey(window中的win键,mac中的command键)
storage不能直接存对象,这样输出来是个字符串,默认会调用toString()方法
解决办法是,
用JSON.stringify()和JSON.parse()
网友评论