JS事件

JS事件包括如下：

1. 鼠标事件

onclick 点击 onmouseup 鼠标弹起 onmousedown 鼠标按下 onmouseover 鼠标移动到元素上 onmouseout 鼠标离开元素 onmousemove 鼠标在元素上移动

拖拽事件

obj.onmousedown=function(){
      ……
      document.onmousemove=function(){
            ……
            return false;//清除默认事件（移动文字或图片加载事件）
      }
   }
    document.onmouseup=function(){
        document.onmousemove=null;//清除自定义的鼠标移动事件，避免obj甩不掉。
    }

滚轮事件

1.onmousewheel （Chrome与IE） DOMMouseScroll （火狐） 只能用事件绑定方式添加 2.wheelDelta 用来判断滚轮滚动的方向

2.键盘事件

onkeydown 键盘按下 onkeyup 键盘弹起 onkeypress 键盘按下并放开

onkeydown与onkeypress的区别：

(1)onkeydowm 指用户按下任何键盘时发生；onkeyup指按下并放开任何字母数字键时发生。onkeydown先于onkeypress发生。 (2)onkeydowm捕获的keyCode不区分大小写，而onkeypress区分。 (3)onkeypress不能识别系统按钮（如箭头键和功能键等）

一些属性：

(1)ev.keyCode;//返回键盘对应字符的ASCII码，但不完全等同。 (2)ev.charCode; (3)ev.ctrlKey;/ev.shiftKey;/ev.altKey;

3.焦点事件

• 焦点定义：光标停留的位置，且可以接收用户的输入。
• 获取焦点方式：(1)点击；(2)tab键；(3)js设置。
• 事件： onfocus 获得焦点； onblur 失去焦点；
• 方法： obj.focus();//自动获取焦点。 obj.blur();//失去焦点。 obj.select();//选择指定元素obj的内容。

4.event对象

当事件发生时，跟触发的事件对象的所有信息都保存在event对象里面，包括事件类型，鼠标位置，事件函数等。

• event对象是内置的全局对象，可以直接调用。其是在事件处理函数触发时通过第一个参数传入。如：

btn.onclick=function(ev){ console.log(ev); }//IE8及以下不兼容。（event对象火狐不兼容！）

//兼容处理： btn.onclick=function(ev){ var ev = ev || event; console.log(ev); }//当第一个为真时，返回第一个值；如果第一个为假，则判断第二个，若为真，返回第二个值；若两个都为假，则返回undefined。

* 获取鼠标点击时的位置：
> ev.clientX-------ev.clientY;


### 5.事件捕获
* [查看链接](https://blog.csdn.net/christine95/article/details/50719435)

* 全局捕获（只有IE能使用）
>btn.setCapture();//当一个元素设置了全局捕获以后，这个元素监听所有事件，当有事件发生时就会触发这个元素的处理函数。（只捕获一次）

* 释放全局捕获
> btn.releaseCapture();


### 6.事件冒泡
> 当一个元素接收到事件的时候，会把它接收到的事件依次传播给它的父级，直到顶层window。
………… ---> body ---> document ---> window。
（IE8及以下没有冒泡至window。）

* 取消事件冒泡：

ev.cancelBubble=true;//所有浏览器都支持！ ev.stopPropagation();//IE8及以下不兼容！ //兼容处理： ev.stopPropagation() ? ev.stopPropagation() : ev.cancelBubble=true;

* 例子：

window.onload=function(){
		var btn=document.getElementsByTagName("button")[0];
		var oDiv=document.getElementsByTagName("div")[0];
		btn.onclick=function(ev){
				console.log("按钮点击了");
				var ev=ev||event;
				ev.cancelBubble=true;
				//ev.stopPropagation();
		}
		oDiv.onclick=function(){
				console.log("div点击了");
				console.log(event);
		}
		document.body.onclick=function(){
				console.log("body点击了");
		}
		document.onclick=function(){
				console.log("document点击了");
		}
		window.onclick=function(){
				console.log("window点击了");
		}
}

### 7.事件绑定
传统的添加事件的方法，如果同时添加两个事件，前面的会被后面的覆盖掉。

>事件绑定：可以给同一对象的同一事件添加不同的事件处理函数。

* IE（除IE11）：
**obj.attachEvent(事件名称，处理函数);**

btn.attachEvent("onclick",fun1); btn.attachEvent("onclick",fun2); //IE9,10：触发时正序的；this指window。 //IE8及以下：触发时倒序的，即先触发fun2,再触发fan1。this指object。

    
* 其他浏览器及IE11（IE8及以下不支持）：
    **obj.addEventListener(事件名称<不加on>，处理函数，是否捕获<true:捕获；false:冒泡(默认值)>)**
    ```
btn.addEventListener("click",fun1,true);
btn.addEventListener("click",fun2);//最后一个参数可不写。
//触发顺序是正序。this指触发该事件的对象，即button。

• 兼容处理：

function bind(obj,ev,fun){
     obj.attachEvent ? obj.attachEvent("on"+ev,fun) : obj.addEventListener(ev,fun);
}

8.事件取消

• 传统事件的取消

oDiv.onclick=function(){
     alert("A");
     oDiv.onclick=null;
}

• 绑定事件的取消

oDiv.removeEventListener("click",fun);//有第三个参数：true/false;
oDiv.detachEvent("onclick",fun);

9.阻止默认事件

(1) 默认行为：当事件发生时，浏览器会默认做的事情。

(2) 阻止默认行为：当这个事件发生时，在处理函数里使用return false；如： document.oncontextmenu=function(){return false;}//阻止右击菜单的显示。contextmenu指上下文事件。

(3) IE8及以下不兼容，使用全局捕获（只能IE使用）。

(4) 用事件绑定方式的默认事件清除：

window.onload=function(){
	 document.addEventListener("contextmenu",function(ev){
				var ev=ev||event;
//              ev.preventDefault();
				ev.returnValue=false;
		},false);

		document.attachEvent("oncontextmenu",function(){
				var ev=ev||event;
				ev.returnValue=false;
//                return false;
		})
}