2020-09-08---event

一、浏览器默认行为及阻止

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