首页  思维导图  详情



 



Jquery的常用事件

2019-02-18 10:23:57   0  举报





仅支持查看

AI智能生成

web前端jquery常用事件总结

模板推荐

作者其他创作

大纲/内容

加载DOM

.ready()

将函数绑定到文档的就绪事件（当文档完成加载时）

jQuery事件绑定

.bind(type,[data],fn)

1.第一个参数是事件类型，常用的click，blur，hover等 2.多个事件类型可以通过将每个空格分隔开来一次绑定 3.我们可以通过传递事件类型/处理程序对的对象来同时绑定多个事件处理程序

$( "#foo" ).bind( "click", function() { alert( "User clicked on 'foo.'" ); });

$( "#foo" ).bind( "mouseenter mouseleave", function() { $( this ).toggleClass( "entered" ); });

$( "#foo" ).bind({ click: function() { // Do something on click }, mouseenter: function() { // Do something on mouseenter } });

第二个参数是可选参数，作为event.data属性值传递给事件对象的额外数据对象

第三个参数是用来绑定的处理函数

jquery移除事件

.unbind(type,fn)

第一个参数是事件类型

如果不写参数，移除所有的事件

$( "#foo" ).unbind();

第二个参数是将要移除的函数

$( "#foo").unbind( "click" ，function(){})

jquery的合成事件

hover事件

鼠标悬停事件 .hover（handlerIn，handlerOut）

将两个处理程序绑定到匹配的元素，当鼠标指针进入和离开元素时执行

hover事件是鼠标的mouseenter和mouseleave事件的实现

等价于： $( selector ).mouseenter( handlerIn ).mouseleave( handlerOut );

事件对象的常见属性

e.type

获取事件的类型

e.target

获取事件发生的DOM对象

e.pageX和e.pageY

获取到光标相对于页面的x的坐标和y的坐标

e.which

该方法的作用是在鼠标单击事件中获取到鼠标的左、中、右键；在键盘事件中获取键盘的按键

事件冒泡

阻止事件冒泡

e.stopPropagation()方法

1.return false 在jQuery中是即阻止事件冒泡又阻止默认行为

2.jQuery不支持事件捕获

阻止默认行为

e.preventDefault()方法

鼠标事件

click

鼠标单击触发事件，参数可选（data,fn）

dblclick

双击触发，同上

mousedown()/up()

鼠标按下/弹起触发事件

mousemove()

鼠标移动事件

mouseover()/out()

鼠标移入/移出触发事件

鼠标指针穿过/离开被选元素或者当前元素的子元素，会触发事件

mouseenter()/leave()

鼠标进入/离开触发事件*

鼠标指针只在穿过/离开被选元素触发事件

focus()/blur()

鼠标聚焦/失去焦点触发事件（不支持冒泡）

keydown()/up

键盘按键按下/弹起触发

表单事件

change()

表单元素发生改变时触发事件

此事件仅限于<input>元素，<textarea>框和<select>元素

对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时，会立即触发事件 但对于其他元素类型，事件将延迟到元素失去焦点

select()

文本元素发生改变时触发事件

此事件仅限于input type类型为text和textarea表单元素

submit()

表单元素发生改变时触发事件

form表单有默认的submit行为，当对input type=submit按钮点击的时候会触发form的默认action行为， 此时可以调用 jquery的submit方法通过e.preventDefault()来阻止默认事件，这样我们就能动态的跟服务端来发送数据了

 Collect

Get Started

jQuery

 Collect

Get Started

不良事件随访

 Collect

Get Started

Jquery

 Collect

Get Started

ViewGroup事件分发





0 条评论

下一页