一、浏览器默认行为及阻止
1.右键菜单
document.oncontextmenu = function(){
return false; //既阻止默认行为,也阻止事件冒泡
}
2.超链接
标准浏览器 : event.preventDefault()
IE: event.returnValue = false;
var o_a = document.getElementsByTagName('a')[0];
o_a.onclick = function(evt){
var e = evt || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
3.拖拽的默认行为
//取消拖拽的默认行为
document.ondragstart = function(){
return false;
}
二、事件监听器
//标准浏览器:
元素对象.addEventListener(事件,函数,布尔值)
//第一个参数 :事件(不带on)
//第二个参数 :事件处理函数
//第三个参数 :是否进行捕获(默认是冒泡:false)
o_btn.addEventListener('click',fn1,false);
o_btn.addEventListener('click',fn2,false);
o_btn.addEventListener('click',fn3,false);
//IE浏览器
元素对象.attachEvent(事件驱动,函数)
//第一个参数:事件驱动(带on)
//第二个参数:事件处理函数
o_btn.attachEvent('onclick',fn1);
o_btn.attachEvent('onclick',fn2);
o_btn.attachEvent('onclick',fn3);
//兼容
//添加
function addEventListener(obj,event,fn,boo){
//初始化参数
boo = boo || false;
if(obj.addEventListener){//标准
obj.addEventListener(event,fn1,boo);
}else if(obj.attachEvent){//IE
obj.attachEvent('on' + click,fn);
}
}
//移除
function removeEventListener(obj,event,fn,boo){
//初始化参数
boo = boo || false;
if(obj.removeEventListener){
obj.removeListener(event,fn,boo);
}else if(obj.detachEvent){
obj.detachEvent('on' + click,fn);
}
}
三、事件委托(事件代理)
1.事件委托 :将添加到多个子节点上的事件,我们添加到它们的父节点上。相当于事件委托它的父亲。
2.好处:(1)提高性能
(2)可以给动态添加的子元素添加事件。
3.事件委托的本质:是利用了事件冒泡的原理。
四、拖拽
1.思想
鼠标按下
求鼠标的相对坐标值
移动事件
盒子的坐标值 = 鼠标的绝对坐标值 - 鼠标的相对坐标值
鼠标弹起
取消移动事件
2.伪代码
对象.onmousedown = function(){
相对坐标值X = 事件对象.offsetX;
相对坐标值Y = 事件对象.offsetY;
对象.onmousemove = function(){
对象.style.left = 事件对象.pageX - 相对坐标值X + 'PX';
对象.style.top = 事件对象.pageY - 相对坐标值Y + 'px';
}
对象.onmouseup = function(){
对象.onmousemove = null;
}
}
3.代码实现
function drag(selector){
var ele = document.querySelector(selector);
ele.onmousedown = function(evt){
var e = evt || window.event;
var disX = e.offsetX;
var disY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || window.event;
ele.style.left = e.pageX - disX + 'px';
ele.style.Top = e.pageY - disY + 'px';
}
document.onmouseuup = function(){
document.onmousemove = null;
}
//取消拖拽默认行为
document.ondragstart = function(){
retuen false;
}
}
}
五、滚动事件
火狐 : DOMMouseScroll event.detail + 向上 ; - 向下 ; 3
非火狐 : onmousewheel event.wheelDelta + 向上; - 向下 120