事件:网页中的操作行为
事件对象属性
- clientX/clientY:获取当前鼠标位置,相对于浏览器而言,等价于X,Y
- pageX/pageY:获取当前鼠标位置,相对于页面而言,等价于layerX/layerY
- offsetX/offsetY:获取当前鼠标位置,相对于事件标签而言
事件绑定与取消
事件绑定与取消需要进行浏览器兼容处理
标准浏览器
事件绑定: 元素.addEventListener(事件(不加on),事件处理函数,是否捕获(true/false))
事件取消:元素.removeEventListener(事件(不加on),事件处理函数,是否捕获(true/false))
ie浏览器
事件绑定: 元素.attachEvent(事件(加on),事件函数)
事件取消:元素.detachEvent(事件(加on),事件函数)
事件绑定与取消
标准浏览器:
var btn = document.querySelector("button")
// 2、标准事件绑定方式
function fn() {
alert("事件被触发了")
}
function fn2() {
alert("事件再次被触发了......")
}
function fn3(){
alert("这是新增功能,没有修改原来功能的函数")
}
if(btn.addEventListener) {
btn.addEventListener("click", fn, false) // 标准浏览器
btn.addEventListener("click", fn2, false)
btn.addEventListener("click", fn3, false) // 新增代码,没 有修改原有代码
} else {
btn.attachEvent("onclick", fn) // IE低版本浏览器
btn.attachEvent("onclick", fn2)
btn.attachEvent("onclick", fn3) // 新增代码,没有修改原有代码
}
阻止事件冒泡
标准浏览器:事件.stopPropagation()
IE浏览器:事件.cancelBubble()
if(event.stopPropagation){
event.stopPropagation
}
else{
event.cancelBubble = true
}
事件默认行为
标准浏览器:元素.preventDefault()
IE浏览器:元素.returnValue()
// 阻止默认行为
a.onclick = function(){
var event = window.event||e
if(event.preventDefault){
event.preventDefault()
}else{
event.returnValue = false
}
alert("用户点击了超链接按钮...")
}