事件

事件
*1.事件三要素：

  事件源:触发事件的元素(事件触发时，常用this指代，并可根据不同的事件，输出不同的信息) 
  事件类型:页面加载、鼠标事件、表单事件
  事件操作句柄（处理函数）: 针对当前的事件进行什么样的操作

1>事件类型：

   （1）鼠标事件：
             mouseover与mouseenter区别:
             mouseover:当鼠标进入指定元素或进入、离开其任意子元素时都会触发，存在冒泡事件。
             mouseenter:仅当鼠标进入指定元素时触发，不存在冒泡事件。
             mouseout与mouseleave区别：
             mouseout:当鼠标离开指定元素，或进入、离开其任意子元素时都会触发，存在冒泡事件。
             mouseleave:仅当鼠标离开指定元素时触发，不存在冒泡事件。
             鼠标右键单击事件:contextmenu（固定写法）
   （2）键盘事件：keydown与keypress区别
               Keydown:只要按下一个键就会触发
               Keypress:按下并松开后才会触发，并且不能检测功能键tab/shift/alt... 
   （3）jQuery新增事件：
              ready文档就绪，常用作jQuery入口
              focusin与focus区别:focusin()在任意子元素获得焦点时也会触发；
              focusout与blur区别:focusout()在任意子元素失去焦点时也会触发。
              hover事件特点，相当与mouseenter与mouseleave的结合    

2.事件绑定方式
1>原生JS

(1)使用on事件属性定义事件
  var ele=document.getElementById('idvalue') 获取元素
  ele.onevName=function(){}
(2)设置元素事件监听
   var ele=document.getElementById('idvalue') 获取元素 
   ele.addEventListener('evName',function(){}) 

2>jQuery事件绑定方式

 (1)使用事件名进行连贯操作（常用）
      $（'selector'）.ev1(fn(){}).ev2(fn(){})
 (2)使用on进行连贯操作
      写法一(常用)：$（'selector'）.on('ev1',fn(){}).on('ev2',fn(){})
      写法二：$（'selector'）.on({'ev1':fn(){},'ev2':fn(){}})
 (3)使用one只执行一次事件
      $（'selector'）.one('ev',fn(){})
 (4)解除事件绑定
      $（'selector'）.off() 解除所有事件
      $（'selector'）.off('ev')  解除指定事件

3>jQuery事件委派:即把原来加给子元素身上的事件绑定在父元素身上，把事件委派给父元素

      $('parentEle').on('ev','Ele',fn(){})