关于JQuery的事件机制

简介:         事件一直在用,但是从来没有好好的记录下来过,今天抽出事件,把事件需要注意的问题给记下来!1.事件中的冒泡想象:所谓的冒泡其实质就是事件中的执行顺序,如果需要阻止冒泡的发生,可以调用stopProgation()方法;2.

        事件一直在用,但是从来没有好好的记录下来过,今天抽出事件,把事件需要注意的问题给记下来!

1.事件中的冒泡想象:

所谓的冒泡其实质就是事件中的执行顺序,如果需要阻止冒泡的发生,可以调用stopProgation()方法;


2.页面载入事件:

页面载入事件也就是ready()方法的调用,相当于原生js中的OnLoad()方法,不过这其中有一点区别:OnLoad()方法的执行必须是页面中的全部元素完全加载到浏览器后才触发,而jquery中的ready()方法只需要页面的DOM模型加载完毕,就可以触发;

实现代码如下:

写法一:

$(document).ready(function(){

//代码内容

});

写法二:

$(function(){

//代码内容

});


3.绑定事件:

直接绑定,$('#id').click(function(){

//代码内容

});

使用bind()方法绑定,bind(type,[data],fn)

type:表示类型,如click,change,focus,load,resize等等,可以传递多个事件,用空格隔开,如$("#id").bind("click change",fn);

data:可选参数,可以传递给fn进行使用,如$("#id").bind("click",{msg:message},functiong(e){

alert(e.data.msg);

})

fn:处理函数

bind()方法也可以通过映射的方式给元素绑定多个事件处理函数,例如:

$("#id").bind({

  click:function(){

    alert("click");

  },change:function(){

    alert("change")

  }

})


4.切换事件

在jquery中有两个方法用于切换,一个hover(),一个toggle()

hover()方法一般用于鼠标悬停和鼠标移出,比如

$("a").hover(function(){

//代码执行块

},functiong(){

//代码执行块

});当鼠标移动到a元素上时,执行第一个函数,移出时执行第二个函数

toggle()方法,是一次调用N个指定的函数,直到最有一个函数,然后重复对这些函数轮番调用


5.移出事件

unbind()方法,例如$("#a").unbind(),移出id为a的元素的所有事件,

$("#a").unbind("click",fnName),移出指定事件


6.其他事件

one()方法,所选元素绑定一个仅仅触发一次的处理函数

trigger()方法,所选元素触发指定类型的事件,例如$("a").trigger("click")

目录
相关文章
|
6月前
|
JavaScript 前端开发
jQuery 事件
jQuery 事件
37 1
|
2月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
18 0
|
3月前
|
JavaScript
jQuery 事件
jQuery 事件
40 10
|
3月前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
3月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
34 3
|
3月前
|
JavaScript
jQuery 事件 方法
jQuery 事件 方法
16 0
|
4月前
|
Web App开发 JavaScript Android开发
重载jquery on方法实现click事件在移动端的快速响应
重载jquery on方法实现click事件在移动端的快速响应
|
6月前
|
JavaScript 前端开发 开发者
jQuery中的ready()函数:优雅地处理页面加载事件
jQuery中的ready()函数:优雅地处理页面加载事件
126 0
|
7月前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
7月前
|
Web App开发 JavaScript 前端开发
jquery的冒泡事件event.stopPropagation()
jquery的冒泡事件event.stopPropagation()
45 0