day14（事件2）

事件

一、浏览器的默认行为

浏览器的默认行为，如何阻止?
    
就是浏览器自己触发的事件。比如：a链接的跳转，form提交时的跳转，鼠标右键菜单。

oncontextmenu    鼠标右键事件

当触发鼠标的右键事件时，会弹出右键菜单，这就是默认事件情况之一


如何阻止默认事件？
//阻止a的默认跳转行为
var a = document.querySelector("a");
a.onclick = function(event){
    //兼容写法
    var e = event || window.event;
    //只支持高版本的浏览器
    //e.preventDefault();

    //IE9以下浏览器
    //e.returnValue = false;

    //企业开发推荐使用
    return false;
}

案例：自定义右键菜单

二、鼠标拖拽效果

拖拽分解：按下鼠标 ----> 移动鼠标 ----> 松开鼠标

1.给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键

2.当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置

3.在onmousemove事件中，设定目标元素的left和top，

4.当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果

在onmouseup事件中，取消document的onmousemove事件即可。

三、事件监听

事件触发阶段主要由于事件流：DOM0级事件处理阶段和DOM2级事件处理；

DOM0级事件处理，是一种赋值方式，是被所有浏览器所支持的，简单易懂容易操作；
元素.onclick = function(){}

DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

非IE下：(这里的事件名不带on),第三个参数表示是在捕获阶段还是冒泡阶段。可以重复绑定事件，执行顺序按照绑定顺序来执行。

oDiv.addEventListener('click',fn,false);
oDiv.removeEventListener('click',fn ,false);

IE下：

只有冒泡阶段,所以没有第三个参数；（这里的事件名需要加on）
oDiv.attachEvent()；
oDiv.detachEvent()； 删除

冒泡：从下往上（从里往外）
捕获：从上往下（从外往内）

//元素不要加引号   事件需要加引号
function addevent(ele, type, callback){
    if(ele.addEventListener){
        ele.addEventListener(type, callback, false);
    }else if(ele.attachEvent){
        //兼容IE
        ele.attachEvent('on' + type, callback);  只支持冒泡
    }
}

四、事件委托机制

事件委托（委派）指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。

事件委托是利用了冒泡，通过委托可以减少事件绑定的次数，提高程序的性能。

target - event中的target表示触发事件的对象

oul.onclick = function(eve){
var e = eve || window.event;
var target = e.target || e.srcElement;
//如果触发事件的对象是我们期望的元素，则执行，否则不执行
if(target.nodeName == "LI"){
	console.log(target.innerHTML);
	}
}

优势：
1.节省性能

2.可以给页面上暂时不存在的元素绑定事件