事件

事件

一、 绑定事件处理函数

    1.1      标签绑定

Document对象绑定

//1. ele.onxxx 

l  兼容性好同一个元素只能绑定一个事件

l  类似于写在了行间样式

//2. obj.addEventListener(事件类型，处理函数，false)   事件监听，监听线程执行   

l  ie9一下不兼容，可以为一个对象的一个事件绑定多个处理程序

l  事件类型：event string表示事件类型的字符串“click”

l  处理函数：callback  function   表示事件处理程序，函数中的this指向添加监听对象

     boll   boolean   表示事件处理程序，函数中的this指向添加监听的对象

//3. obj.attachEvent('on + 事件类型'，处理函数)  ie独有   可以执行多次

        //神马面试题，用原生js，addeventListener写出以上点击事件按照顺序li 绑定事件              循环里访问i，数值越界，形成闭包

  var liCol = document.getElementsByTagName('li'),
            len = liCol.length;
        for(var i = 0; i < len ;i++){
            (function(i){
                liCol[i].addEventListener('click',function(){
                    console.log(i);
                },false);
            }(i))

二、 事件处理程序的运行环境

//1.ele.onxxx = function(even){}   程序this指向dom元素自身

//2.addEventListener(type,fn,false)  程序this指向dom元素自身

//3. obj.attachEvent('on '+ 事件类型，处理函数)  程序this指向window

解决this指向window问题

封装addEvent(给一个dom对象，添加该事件类型的事件处理函数)

//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.ele.onclick = false/''/null

//一次生效

var div =document.getElementsByTagName(“div”)[0];

div.onclick = function(){

console.log(“a”);

this.onclick = null;

}

//2.ele.removeEventListener(type,fn,false)

//3.ele.datachEvent('on'+type,fn)

//若绑定匿名函数,则无法解除

三、事件处理模型

事件冒泡：

结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素（自底向上）

事件捕获：

结构上（非视觉）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）

ie没有捕获事件（事件捕获是netscaps提出的，微软提出事件冒泡）

 事件触发顺序   先捕获，再目标，后冒泡，

focus（聚焦）,blur,change,submit,reset,select等事件不冒泡

    取消冒泡

1.W3C标准event.stopPropagation(); 但不支持ie9一下版本

2.IE独有 event.cancelBubble = true

 

//封装取消冒泡的函数stopBubble

//function stopBublle(event){

// if(event.stopPropagation){

//  event.stopPropagation();

// }else{

//  event.cancelBubble = ture;

//     } 

//} 

阻止默认事件

// 默认事件- 表单提交,a标签跳转，右键菜单

//1.return false;以对象属性的方式注册的事件才生效(句柄方式才有效)

//2.event.preventDefault(); W3C标注,ie9一下不兼容

//3.event.returnValue = false   兼容ie

//封装组织默认事件的函数cancelHandler(event);

//function canceHandler(event){

// if(event.preventDefault){

//  event.preventDefault();

// }else(event.returnValue){

//  event.returnValue = false;

// }

//}

取消a标签默认事件

<a href="javascript:void(false)"> demo </a>   //协议限定符

四、事件对象

e || window.event   用于IE兼容

e || event    其他兼容

事件源对象

event.target   火狐只有这个

event.srcElement   ie只有这个

chrom都有

五、事件委托

用法

子元素的事件加到父元素上

触发事件时判断 触发该事件的元素是什么（e.target）

 

判断内容 innerHTML  innerText

标签名 nodeName (判断的时候，标签名需要大写)

属性 e.target.hasAttribute("属性名"); 有则是true 无则是false

类名 ID e.target.classList.contains("类名")； 有则是true 无则是false

在判断成功中写对应的处理函数

应用场合

需要给大量元素添加同一事件处理程序的时候，提高代码运行的效率

在页面加载完成后新创建的元素， 比如通过ajax异步加载生成dom对象

利用事件冒泡，和事件源对象进行处理

优点

1.性能 不需要循环所有的元素一个个绑定事件

2.灵活 当有新的子元素时不需要重新绑定事件

//事件委托，ul>li点击出现对应内容

var ul =document.getElementsByTagName('ul')[0];

ul.onclick = function(e){

var event = e ||event.srcElement;

var target = event.target || event.srcElement;

console.log(target.innerText)

}

六、事件分类

1.1      鼠标事件

click  mousedown(touchend)  mousemove(touchastart)

 mouseup  contextmenu mouseover(touchmove) mouseout

mouseenter mouseleave（es6）

//鼠标拖动

   

 var div = document.getElementsByTagName('div')[0];

    var divX,

        divY;

    div.onmousedown = function(e){

    divX = e.pageX - parseInt(div.style.left);

    divY = e.pageY - parseInt(div.style.top);

    document.onmousemove = function(e){ //document防止鼠标移出时小方块不移动了

             var event = e || window.event;

             div.style.left = e.pageX - divX + "px";

             div.style.top = e.pageY - divY + "px";

      }

      document.onmouseup = function(){

             div.onmousemove = null;

      }

 

//2.0判断了临界值
var tuo = document.getElementsByClassName("drag")[0];

function drag(tuo){

     //按下--拖拽 ---抬起

     var startX,startY,endX,endY;

     tuo.onmousedown = function(e){

         startX = e.offsetX;     //获取鼠标按下坐标

         startY = e.offsetY;

        console.log(startX,startY);

        window.addEventListener("mousemove",move,false);     //加监听

     }

     tuo.onmouseup = function(e){

        window.removeEventListener("mousemove",move,false);

     }

     function move(e){

         endX = e.clientX;

         endY = e.clientY;

         console.log(endX,endY);

         var top = endY - startY;

         var left = endX - startY;

         if(top <= 0){

             top = 0;

         }else if(top >= window.innerHeight - tuo.offsetHeight){

             top = window.innerHeight - tuo.offsetHeight;

         }

         if(left <= 0){

             left = 0;

         }else if (left >= window.innerWidth - tuo.offsetWidth){

             left = window.innerWidth - tuo.offsetWidth;

         }

         tuo.style.top = top + "px";

         tuo.style.left = left + "px";

         tuo.style.margin = 0;

     }

}

drag(tuo)

 

 

//用button来区分鼠标的案件0/1/2(左滚轮右)

DOM3标准规定,click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键

e.button == 2  右键    e.button == 0  左键

//如何解决mousedown和click的冲突

用时间差

var firstTime = 0;

var lastTime = 0;

var key = false;

document.onmousedown = function(){

  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;

}

}

1.2，1.3      键盘事件，表单事件

 

keydown（按下） keyup  keypress（点击）（只识别数字字母）

keydown > keypress > keyup

keydown和keypress的区别

   keydown可以相应任意键盘按键，keypress只可以相应字符类键盘按键

   keypress返回ASCII码，可以转换成相应字符 String.fromCharCode(e.charCode)

l  oninput   及时触发

l  onchange 聚焦，失去焦点后触发

l  onfocus   聚焦

l  onblur   失去焦点

1.4      窗口操作类（windiow上的事件）

onscoll

onload