6-3、jQurey事件

鼠标事件：

click 鼠标单击时触发
dblclick 鼠标双击时触发

这里要注意尽量不同时绑定，且注意事件冒泡问题。

mousedown 鼠标按下去
mouseup 鼠标松开
mouseenter 鼠标进入
mouseleave 鼠标移出
hover([ over ] , out) 鼠标进入和退出时触发两个函数，相当于mouseenter加上mouseleave，参数分别是进入和离开
mouseover 鼠标进入指定元素及其子元素时触发
mouseout 鼠标移出指定元素及其子元素时触发
mousemove([data] , fn) 再DOM内部移动时，会发生mousemove事件（只要一移动就会触发，一个像素就会触发），拖拽比较多
scorll([data] , fn) 中间轴事件，当滚动指定元素时触发，有滚动条时触发，拖动滚动条也会触发

键盘事件

keydown([data] , fn) 当键盘或按钮被按下的时候触发

//注意这里是在document。
  $(document).keydown(function(event){
    console.log('触发 ');
  });

//输出按下按钮ASCII码，a-65 A-97
  $(document).keydown(function(event){
    console.log(event.keycode);
  });

//输出按下按钮是什么
  $(document).keydown(function(event){
    console.log(event.key);
  });

如果不用document，而是获取div，那么不会有反应，因为没有获取到焦点，只有焦点在的时候，才会有，不如input

  $('input').keydown(function(event){
    console.log(event.which);
  });

keyup([data] , fn) 当键盘或按钮被松开的时候触发，他发生在当前获得焦点的元素上

keypress([data] , fn) 当键盘或按钮被按下的时候触发，输入内容的时候才会触发，删除或者开启输入法都不会触发

其他事件

ready ( fn )
当DOM载入就绪可以操作及操纵时绑定一个要执行的函数。

//一般来说，可以把js代码都放在里边
$(document).ready(function(){
});

resize( [data] , fn ) 当调整浏览器窗口大小时触发

//注意这里是wondow，并不是document
  $(window).resize(function(){
    console.log('窗口发生改变。');
  });

focus ( [[data],fn] ) 当元素获得焦点时触发

blur ( [[data],fn] ) 当元素失去焦点时触发

change ( [[data],fn] ) 当元素的值发生改变时触发，且不是当时触发，而是失去焦点时触发，按下enter时也会，常用input上

  <input type="text" >  //失去焦点、摁下enter触发
  <input type="number" >  //输入不触发，点击加减触发

select( [[data],fn] ) 当textarea或文本类型的input元素中的文本被选中时触发，其他的（p等）不会触发

submit( [[data],fn] ) 当提交表单时触发⭐
三种用途： 提交表单、组织表单提交、提交表单时验证及其他需求

//表单提交
	$('input[type=button]').click(function () {
	  $(form).submit();
	});
	
//阻止表单提交
  	  $('form').submit(function () {
    	return false;
	  });
	  
//表单验证
  $('form').submit(function () {
    var aa = $('.inputx').val();
    if(aa === ''){
      alert("空的");  
      return false;
    }
  });

事件参数

event
有些事件，如mousemove和keypress，我们需要获取鼠标位置和按键的值，否则监听这些事件就没什么意义了。
所有事件都会传入 event 对象作为参数，可以从event对象上获取到更多的信息。
实例：
在滚动演示案例里，可以根据左右按键控制显示的图片，根据按键值，判断，决定显示上一个图片还是下一个图片。

事件绑定与取消

on(events, [selector], [data], fn)
在选择元素上绑定一个或多个事件的事件处理函数
events 事件类型
fn 函数
selector 选择器
data 传值
拓展方法：bind、

  var a = function(){
    console.log("触发");
  }
  $('.x').on('click',a);
  //注意不是a()，否则会直接执行。

  var a = function(){
    console.log("触发");
  }
  $('.x').on('click',a);

off(events, [selector], fn)
在选择元素上移除一个或多个事件的事件处理函数

  var bgc =function(){
    $(this).css({'background-color': 'red'})
    console.log("触发");
  }
  $('.d2').click(function(){
    $('.d1').on('click',bgc)
  });
  $('.d3').click(function(){
    $('.d1').off('click',bgc)
  });

one(type,[data],fn)
为每一个匹配元素的特定事件（比如click）绑定一个一次性的事件处理函数

//执行一次之后就解除绑定了，只会执行一次
  var bgc =function(){
    console.log("触发");
  }
  $('.d2').click(function(){
    $('.d1').one('click',bgc)
  });