jQuery事件

jQuery事件的封装规律:

时间名:去掉前缀on

js中事件是一个属性,而jquery中事件被封装成了相应的方法,并且在方法中传入一个function作为该事件的处理过程

 

语法:

$(function()){
$(div).mouseover(function(){
$(this).addClass('over')
})
}

 

click() 单击事件

mouseover() 鼠标进入(废弃)连带触发out

mouseout() 鼠标移出(废弃)连带触发over

mouseenter() 鼠标进入(推荐)

mouseleave() 鼠标移出(推荐)

 

 

removeClass("classname")//移除指定的类样式

addClass()//添加指定的类样式

 

 

开发中对于鼠标进入和离开推荐使用mouseenter和mouseleave

因为这两个事件不会在事件源对象的子元素上触发

 

 

键盘事件:

keydown() 键盘按下

keyup() 键盘弹起

keypress() 键盘按下弹起

 

表单元素的val()方法可以用来返回元素的值

 

 

对于页面内的元素在进行键盘事件触发的时候一定要先获取焦点

如何在键盘事件中获取当前按键信息?

jQuery框架的底层触发键盘事件的时候会自动的将当前按键信息的按钮信息封装成一个对象,自动装配到事件响应函数的参数中

事件参数对象e.keyCode获取当前按钮码

知识点:回车键对应的按键码等于13

blur()//失去焦点事件

 

浏览器事件:

.resize() 调整浏览器窗口大小

 

window有一个resize()方法 此方法用来浏览器改变窗口的尺寸

 

jQuery中另一种注册事件的方式

单个事件绑定:

.bind('事件',function(){})
jquery对象.bind('事件类型',function(){})

 

 

多个事件绑定:

jquery对象.bind({
事件名1:function(){},
事件名2:function(){},
...............................
})

 

 

移除事件绑定:

unbind('要移除的事件');
jquery.unbind('事件名');

 

Tab切换页

 

 

补充:为动态添加的元素进行事件的注册

不能直接绑定到指定的元素上,而是绑定到这个元素的父元素上

父元素.on('事件类型','子元素选择器',function(){

//函数过程

})

 

 

复合事件:

hover('方法1鼠标进入','方法2鼠标离开')   //组合鼠标进入离开事件,无法绑定其他事件

 

jQuery对象.toggle();

元素显示和隐藏的切换

 

 

jQuery对象.togggleClass()

切换显示的样式

 

补充:事件冒泡

在触发子元素的事件的之后会触发父元素的相关事件

 

首先在子元素的事件处理函数中获取当前事件参数对象,然后在事件处理函数的最后使用e.stopPropagation();

 

阻止元素的默认事件:

方法1:原生js onclick="returm true/false"

方法2:jQuery e.preventDefault();

 

focus()失去焦点事件