Javascript中常见的系统事件

一、鼠标事件

鼠标事件，页面中的所有元素都可以触发

1. click 点击事件
2. dblclick 双击事件
3. contextmenu 右键单击事件
4. mousedown 鼠标按下事件
5. mouseup 鼠标抬起事件
6. mousemove 鼠标移动事件
7. mouseover 鼠标移入事件
8. mouseout 鼠标移出事件
9. mouseenter 鼠标移入事件
10. mouseleave 鼠标移出事件

mouseover,mouseout和mouseenter,mouseleave两套移入移出事件的区别：
mouseover和mouseout会因为从父元素进入子元素而抛发事件，
而mouseenter和mouseleave不会因为从父元素进入子元素而抛发事件。

11.滚轮事件

火狐浏览器有兼容问题
谷歌等浏览器：mousewheel
火狐浏览器：DOMMouseScroll

document.addEventListener("mousewheel",mouseHandler);
document.addEventListener("DOMMouseScroll",mouseHandler);

//判断滚轮是向上滑还是向下滑动        
function mouseHandler(e){
	var detail;
    if(e.type==="mousewheel"){
    	detail=e.deltaY<0 ? -1 : 1;
    }else if(e.type==="DOMMouseScroll"){
    	detail=e.detail<0 ? -1 : 1;
    }
    console.log(detail);
}

二、键盘事件

键盘事件，表单（交互元素） 和 全局 window 和 document 触发

1. keydown 只有有键盘按键按下就会触发keydown事件
2. keyup 键盘抬起事件
3. keypress 键盘上某些特殊键或者中文输入模式下按下不会触发

三、浏览器事件

1.load 加载完成事件

var img=new Image();
img.addEventListener('load',loadHandler);
img.src='img/1.png';
window.addEventListener('load',loadHandler1);
function loadHandler(e){
   console.log(e);
   console.log('img load')
}
function loadHandler1(e){
   console.log(e)
   console.log('window load')
}

2.error 错误事件，error事件默认关闭冒泡

 var img=new Image();
    
 img.addEventListener('error',errorHandler);
 img.src="img/100.jpg";
 function errorHandler(e){
 	console.log(e);
 }

3.resize 可视区域大小改变事件,window侦听

4.scroll 滚动条滚动事件

四、表单事件

1.focus 聚焦事件  blur 失焦事件

• 针对表单元素单独做聚焦和失焦处理

2.focusin 聚焦事件  focusout 失焦事件

• 针对表单所有的元素做聚焦和失焦处理，也就是写给form标签的

3.input 输入事件

4.change 改变事件，表单失焦的时候判定一次， 如果和聚焦的时候内容不一样就会触发
可以针对表单元素,也可以针对form表单

 var inp=document.querySelector('input');
 inp.addEventListener('change',changeHandler);
 document.addEventListener('change',changeHandler1);

 function changeHandler(e){
 	console.log('input',e);
 } 
 function changeHandler1(e){
 	console.log('document',e);
 }

5.reset 表单重置事件，事件必须绑定给form标签才可以生效，绑定给form标签之后点击对应的
重置按钮才能被触发。

var form=document.querySelector('form');
form.addEventListener('reset',resetHandler);
function resetHandler(e){
   console.log(e);
}

6.submit 表单提交事件，事件必须绑定给form标签才可以生效，绑定给form标签之后点击对应的
提交按钮才能被触发。

var form=document.querySelector('form');
form.addEventListener('submit',submitHandler);
function submitHandler(e){
   console.log(e);
}

7.select 选中事件,针对input或者textarea
当选中文本时，input.selectionStart返回选中文本开始位置的下标，input.selectionEnd返回选中文本结束位置之前的下标

//当选中文本时，把选中的小写字母改成大写字母
var input=document.querySelector('input');
input.addEventListener('select',selectHandler);
function selectHandler(e){
  input.value=input.value.slice(0,input.selectionStart)+input.value.slice(input.selectionStart,input.selectionEnd).toUpperCase()+input.value.slice(input.selectionEnd,input.length);
}

五、触摸事件

1.touchstart 触摸开始事件（手指接触屏幕时）
2.touchend 触摸结束事件（手指离开屏幕）
3.touchmove 触摸移动事件（手指在屏幕上滑动）

注意： 触摸事件一共就只有这三个， 所有的触摸行为都是由这三个组成的

比如：

轻触： 从 touchstart 开始计时， touchend 结束计时， 时间不超过 300ms

长按： 从 touchstart 开始计时， touchend 结束计时， 时间超过 1000ms

···

六、其他事件

1.transitionend 过度动画结束事件。你一共过渡多少个属性， 就触发多少回
2.selectstart 选择开始事件