JS事件最全详解(学习笔记)

学习笔记看着枯燥，请大家见谅
由于是笔记中的内容，小编就不一一示范出来了，大家可以自行学习
代码中有注释，不明白的可以问我哦！

一、绑定事件

1.div.onclick=function(){};  //相当于句柄上的（标签上）
程序this指向是dom元素本身

2.div.addEventlistener(事件类型，处理函数，handle);//IE9 以下不兼容  可以绑定多个处理函数   地址不一样就多次，重复的只能一次   handle=false(事件)  /true（捕获）
程序this指向是dom元素本身

3.div.attachEvent('on',function(){});//IE独有   函数绑定多次可以实现多次
程序this指向window

封装兼容性的 addEvent(elem,type,handle);方法
function  addEvent(elem,type,handle) {
  if(elem.addEventListener){
    elem.addEventListener(type,handle,false);
  }else if (elem.attachEvent){
    elem.attachEvent('on' + type, function () {
      handle.call(elem);
    })
  }else{
    elem['on'+type] = handle;
  }
}

二、解除事件

1.令div.onclick=null;
2.div.removeEventListener('click',函数名()//匿名无法清除,false);
3.div.detachEvent('on'+type,fn(函数引用));

三、事件处理模型–事件冒泡、捕获

1.事件冒泡:
      结构上(非视觉上)嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素(自顶向下)
2.事件捕获:
eg:
div.addEventlistener(事件类型，处理函数，handle);//IE9 以下不兼容  可以绑定多个处理函数   地址不一样就多次，重复的只能一次   handle=false(事件)  /true（捕获）
程序this指向是dom元素本身
       结构上(非视觉上)嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素(事件源元素)。(自顶向下)
      IE没有捕获事件
还有一种(捕获事件)真实的事件处理过程div.setCapture();
会把任何地方发生的事件获取到身上，div.releaseCapture();来释放  IE独有的
3.触发顺序、先捕获、后冒泡
focus,blur,change,submit,reset,select等事件不冒泡

四、取消冒泡

4.取消冒泡
    W3C标准event.stopPropagation();//不支持ie9以下版本
    IE独有 event.cancelBubble = true;
    封装取消冒泡冒泡的函数 stopBubble(event)

eg:
   function  stopBubble(event) {
     if(event.stopPropagation){
       event.stopPropagation();
     }else {
       event.cancelBubble = true;
     }
}

五、阻止默认事件

5.阻止默认事件:
    默认事件--表单提交，a标签跳转，右键菜单等
右键菜单事件
document.oncontextmenu = function () {
   console.log('a');
}
    1.return false;  //句柄的方式  以对象属性的方式注册的事件才生效
    2.event.preventDefault(); W3C标注，IE9以下不兼容
    3.event.returnValue = false;兼容IE
    封装阻默认事件的函数 cancelHandler(event);
eg:
document.oncontextmenu = function (e) {  //写了系统会默认传事件对象e  ie没有（ie在widow.event）
   console.log('右键了');
   cancelHandler(e);
}
function  cancelHandler(event) {
    if (event.preventDefault){
      event.preventDefault();      //不写兼容时直接用
    }else{
      event.returnValue = false;
    }
}

不让a标签用默认事件用onclick=function(){return false;}或者<a href="javascript:void(0（或false）)"></a>

六、事件源对象

6.事件对象
   event || window.event (后面用于IE)

事件源对象:
   event.target  //火狐只有这个

   event.srcElement //IE只有这个
   
  这两个chrome 都有

兼容写法
  var div = .........[0];
   div.onclick =function(e){
      var event =e||window.event;
      var target = event.target || event.srcElement;
      console.log(target); //可换想要的东西
}

七、事件委托

7.事件委托
     利用事件冒泡，和事件源对象进行处理
     优点:
         ①性能不需要循环所有元素一个一个绑定事件
         ②灵活当有新的子元素时不需要重新绑定事件
eg：上边的兼容写法

八、事件分类

8.事件分类
鼠标事件
      click、mousedown、mousemove、mouseup、contextmenu、mouseover、mouseout、mouseenter、
mouseleave
移动端事件
      touchstart touchmove touchend
用button来区分鼠标的按键，0/1/2
DOM3标准规定:click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键  鼠标 button=0/1/2（左键/中键/右键）
如何解决mousedown和click的冲突（使用时间差）
eg：比如a标签拖拽不想移动
var firstTime =0;
var lastTime =0;
var key =false;
document.onmousedown = function () {
  console.log('click');
  firstTime = new Date().getTime();
}
document.onmouseup =function () {
  lastTime= new Date().getTime();
  if(lastTime - firstTime < 300){
    key =true;
  }
}
document.onclick = function () {
  if (key){
      console.log('click');
      key= false;
  }
}

键盘事件
keydown keyup keypress

keydown>keypress>keyup

keydown和keypress的区别
     keydown 可以响应式任意键盘按键，keypress只能检测到字符类键盘按键
     keypress返回ASCII码，可以转换成相应字符
eg:把按键转换成对应的字符
  document.onkeypress =function(e){
    console.log(String.fromCharCode(e.charCode));
  }

文本类操作事件
1.input事件

input    //直接触发
change  //改变触发  （失去焦点并改变）
focus     //聚焦触发
onblur   //失焦触发
eg:
<input  on>
var input =document...[0];
input.oninput =function(e){
}
input.onchange =function(e){
}
窗体操作类（window上的事件）
scroll    load

fixed定位js兼容版（IE6 没有fixed定位）