jQuery中的事件

文章目录

鼠标事件

方法	执行时机	描述
click()	单击鼠标时	触发或将函数绑定到指定元素的click事件
mouseover()	鼠标指针移过时	触发或将函数绑定到指定元素的mouseover事件
mouseout()	鼠标指针移出时	触发或将函数绑定到指定元素的mouseout事件
mouseenter()	鼠标指针进入时	触发或将函数绑定到指定元素的mouseenter事件
mouseleave()	鼠标指针离开时	触发或将函数绑定到指定元素的mouseleave事件

各个鼠标事件的区别

mouseover 和 mouseout 在父元素和其子元素都可以触发，当鼠标穿过一个元素时，触发次数得依子元素数量而言。
mouseenter 和 mouseleave 只在父元素触发，当鼠标穿过一个元素时，只会触发一次

注意点
如图，4个鼠标事件绑定在父元素上，子元素上超出父元素范围，正常来讲鼠标从空白区域进入子元素超出部分不应该出发事件
在子元素超出部分上放置一条水平线，发现鼠标接触和离开水平线的时候，会触发mouseenter和mouseover事件，在离开水平线的时候会触发mouseout 和mouseleave事件
请添加图片描述

键盘事件

方法	执行时机	描述
keydown()	按下键盘时	触发或将函数绑定到指定元素的keydown事件
keyup()	释放按键时	触发或将函数绑定到指定元素的keyup事件
keypress()	产生可打印的字符时	触发或将函数绑定到指定元素的keypress事件

window事件

 $(selector).resize();//尺寸发生变化

示例

 $(function () {
        //当浏览器对象window的尺寸改变时触发时间
        $(window).resize(function () {
            document.write("尺寸改变! ");
        });
    })

绑定事件与移除事件

绑定事件

bind(type,[data],fn);

移除事件

unbind([type],[fn])

hover() 鼠标光标悬停

mouseover与mouseout事件的组合

hover(fn_enter(){},fn_leave(){});

toggle() 鼠标连续点击

模拟鼠标连续click事件
toggle(fn1,fn2,...,fnN)：实现单击事件的切换，无须额外绑定click事件
toggle()：不带参数时，实现事件触发对象在显示和隐藏状态之间切换，同 show 和 hide
toggleClass()：事件触发对象在加载某个样式和移除某个样式之间切换

$("input").click(function(){$("p").toggleClass("样式名");})