Jquery中事件

简单介绍

• 事件是Web浏览器通知应用程序（比如我们的js）发生了某个事情！我们可以为这些特定的事情，事先安排好处理方案，这样就能够实现互动！
• 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。jquery是为事件处理特别设计的

事件绑定方式

• 传统js绑定事件的方式是在标签中直接添加事件即可。
• jQuery 绑定事件函数到对象有两种写法

方式一： Jqeury的事件省略了on其他不变

$("#div").click(function(){
	//js代码，事件回调函数
});

• $("#div")：使用jquery获取标签对象；
• click(): 事件名称；
• Function：发生事件之后执行的方法；

方式二：第二种绑定事件的方式

$("#div").bind("click",function(){
	//js代码
});

• $("#div") : 获取标签对象
• bind(type,[ data],fun); 为一个标签对象绑定一个事件，有三个参数：
  • 第一个参数是事件类型，主要如下：blur、focus、click、mouseout、mouseover；
  • Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。
  • 第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象，很少使用。
  • 第三个参数是用来绑定的处理函数。即事件发生之后触发的方法

事件解除

• unbind()方法是元素bind()方法的反向操作，从每个匹配的元素中删除绑定的事件

语法：$(selctor).unbind([type],[fun]);

注意

如果提供了事件类型的参数则删除全部指定的绑定事件

如 $("#div").bind("click", function(){alert("fun1")});
   $("#div").bind("click",function(){alert("fun2")});
   $("#div").unbind("click"); -- 解除所有的点击事件- 动态绑定之后的

如果指定了事件类型，第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件

如：$("#div").bind("click",fun1=function(){alert("fun1")});
   $("#div").bind("click",fun2=function(){alert("fun2")});
   $("#div").unbind("click",fun2); -- 解除fun2的点击事件,第二个参数是方法名,，没有双引号

如果没有参数时候删除所有的绑定事件。

	如：$("#div").bind("click",function(){alert("fun1")});
	   $("#div").bind("click",function(){alert("fun2")});


	   $("#div").mouseover(function(){
	   $("#div").css("background-color","red");
	    });


	   $("#div").mouseout(function(){
	   $("#div").css("background-color","");
	   });


	   $("#div").unbind(); -- 解除所有的事件

unbind()方法一定要写在绑定事件之后，即只能解绑前面的事件，对后面的事件无效

取消绑定之后可以重新给标签继续绑定事件

如果标签内部有原生js事件，unbind()无法解除原生js事件

鼠标事件

 

 

键盘事件

 

复合事件，复合函数

hover()方法

• hover()方法相当于mouseover与mouseout事件的组合
• 语法：hover(inFun,outFun);

toggle()方法

可以实现控制一个元素的隐藏和显示；

• toggle() 方法在被选元素上进行 hide() 和 show() 之间的切换。
• 如果一个元素是隐藏的，则运行 show()，如果一个元素是可见的，则运行 hide()。
• 语法：$(selector).toggle()

如果toggle()方法中定义方法的话，则是方法的切换执行

• 语法：$(selector).toggle(fun1, fun2,fun3-----)
• 第一个方法和第二个方法是必须的，后面是可选的。
• 注意：这个方法在1.8之前可以使用的，目前已经不支持！！

toggleClass() 方法

• toggleClass() 方法可以添加和移除被选元素的类，addClass()和removeClass()的组合
• 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是切换的效果。
• 语法：$(selector).toggleClass(classname)

补充：children() 方法

• children() 方法返回被选元素的所有直接子元素。该方法只沿着 DOM 树向下遍历单一层级
• 语法：$(selector).children(filter)
• filter   可选。返回具体的子元素，缩小搜索子元素范围的选择器表达式