javascript事件

1、如何绑定事件处理函数？

• element.onxxx=function( event){}(在行间里不用写function，直接写onxxx="执行内容")

1. 兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序

2. 基本等同于写在HTML行间上

   //例子
   var div=getElementByTagName('div')[0];
   div.onclick=function(){
       console.log('hello');
   }

3.程序this指向dom元素本身

• obj.addEventlistener(type,fn,false);//事件监听

  1. IE9以下不兼容(是W3C标准），可以为一个事件绑定多个处理程序

     //例子
     var div=getElementByTagName('div')[0];
     div.addEventlistener('click',function(){
         console.log('hello');
     },false);

  2.特点：同一个对象可以通过addEventlistener()绑定多个不同处理程序(如果是同一个处理程序的话，只执行一次)，执行顺序自上而下

  3.程序this指向dom元素本身

• obj.attachEvent('on'+type,fn);

  1. IE独有，一个事件同样可以绑定多个处理程序。

     //例子
     var div=getElementsByTagName('div')[0];
     div.attachEvent('onclick',function(){
         console.log('hello');
     })

  2.特点：同一个对象可以绑定多个不同的处理程序（自上而下执行），也可以绑定多个同一个处理程序（绑定几个执行几次）

  3.程序this指向window

2、封装兼容性的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;
    }
}

3、笔试题

<ul>
    <li>a<li/>
    <li>a<li/>
    <li>a<li/>
    <li>a<li/>
<ul/>//要求点击li元素时，按顺序打印li的下标
//解答：
    <script>
        var li =docuemnt.getElementsByTagName('li'),len=li.length;
        for(var =0;i<len;i++){
            (function(i){
                   li[i].addEventlistener('click',function(){
                    console.log(i);
                },false); 
            }(i))//使用立即执行函数防止形成闭包
        }
    <script/>
​

4、解除事件处理程序

1. ele.onclick=false/null;

2. ele.removeEventlistener(type,fn,false);

3. ele.detachEvent('on'+type,fn);

注：若绑定匿名函数，则无法解除；

5、事件处理模型（事件冒泡、捕获）

1.事件冒泡

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

  <style type="text/css">
      .wrapper{
          width: 400px;
          height: 400px;
          background-color: red;
      }
      .content{
          width: 200px;
          height: 200px;
          background-color: blue;
      }
      .box{
          width: 100px;
          height: 100px;
          background-color: yellow;
      }
  </style>
  <div class="wrapper">
      <div class="content">
          <div class="box"></div>
      </div>
  </div>
  <script type="text/javascript">
      var wrapper=document.getElementsByClassName('wrapper')[0];
      var content=document.getElementsByClassName('content')[0];
      var box=document.getElementsByClassName('box')[0];
      wrapper.addEventListener('click',function(){
          console.log('wrapper');
      },false)//wrapper
      content.addEventListener('click',function(){
          console.log('content');
      },false)//content wrapper
      box.addEventListener('click',function(){
          console.log('box');
      },false)//box content wrapper 冒泡现象
  </script>

2.事件捕获

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

• IE没有捕获事件

  <script type="text/javascript">
      var wrapper=document.getElementsByClassName('wrapper')[0];
      var content=document.getElementsByClassName('content')[0];
      var box=document.getElementsByClassName('box')[0];
      wrapper.addEventListener('click',function(){
          console.log('wrapper');
      },true)//wrapper
      content.addEventListener('click',function(){
          console.log('content');
      },true)// wrapper content 
      box.addEventListener('click',function(){
          console.log('box');
      },true)// wrapper content box
  </script>

3.触发顺序，先捕获，后冒泡

4.focus,blur,change,submit,reset,select等事件不冒泡

5、除了将addEventListener的第三个参数设置为true触发事件捕获之外，还可以设置（div.setCapture//获取div的所有事件）（div.releaseCapture//释放div上的所有事件）也可触发事件捕获

注：事件捕获和冒泡不可能同时触发

6、取消冒泡和阻止默认事件

1、取消冒泡

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

• IE独有event.canceBubble=true;(谷歌也有)

• 封装取消冒泡的函数stopBubble（event）

  function stopBubble(e){
      if(e.stopPropagation){
          e.stopPropagation();
      }else{
          e.cancelBubble=true;
      }
  }

2、阻止默认事件：

• 默认事件（表单提交，a标签跳转（也可以这样写<a href="javascript:void()">不会跳转<a/>），右键菜单（ele.oncontextmenu）等）

• return false；以对象属性的方式注册的事件才生效(兼容性很好)

• event.preventDefault();W3C标准，IE9以下不兼容

• event.returnValue=false；兼容IE

• 封装阻止默认事件的函数cancelHandler(event);

function cancelHandler(e){
	if(e.preventDefault){
		e.preventDefault();
	}else{
		e.returnValue=false;
	}
}

7、事件对象

1、event||window.event 用于IE

2、事件源对象（可用于事件委托）

• event.target 火狐只有这个

• event.srcElement IE只有这个

• 这两个chrome都有

3、兼容性写法

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
</ul>//要求点击li打印对应内容，如果动态添加li元素，添加后的li元素点击时也可以输出对应内容
<script type="text/javascript">
    // 事件委托
    var ul ==document.getElementsByTagName("ul")[0];
	ul.onclick=function(e){
        var event=e||window.event;
        var target =event.target||event.srcElement;
        console.log(target.innerText);
	}
</script>

8、拖拽练习

原理图：

function Drag(elem){
	var disX,disY;
	elem.onmousedown=function(e){
		disX=e.pageX-parseInt(elem.style.left);
		disY=e.pageY-parseInt(elem.style.top);
		document.onmousemove=function(e){
			elem.style.left = e.pageX-disX+"px";
			elem.style.top = e.pageY-disY+"px";
		}
		document.onmouseup = function(){
			document.onmousemove=null;
		}
	}
}

9、事件分类

1、鼠标事件

• click（click=mousedown+mouseup鼠标点击事件，存在延迟现象）、mousedown（鼠标落下事件）、mousemove（鼠标移动事件）、mouseup（鼠标抬起事件）、contextmenu（右键菜单事件）、mouseover（鼠标移入事件）、mouseout（鼠标移出事件）、mouseenter（html5新规范，鼠标移入事件）、mouseleave（html5新规范，鼠标移出事件）

• 用button来区分鼠标的按键，0/1/2(click事件触发不了)

document.onmousedown=function(e){
    console.log(e);//e事件对象包括了button这个属性
    if(e.button==2){
        console.log('right');
    }else if(e.button==0){
        console.log('left');
    }
}

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

• 如何解决mousedown和click冲突（设置延时即可（当mouseup-mousedown的时间到达某个条件，再触发click事件））

2、键盘事件

• keydown 、keyup、keypress

• keydown>keypress>keyup

• keydown和keypress的区别

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

  • keypress返回ASCII码，可以转换成相应字符