jquery中的事件

1、加载DOM,$(document).ready()方法和window.onload的细微区别:
(1)执行时机:window.onload在网页所有元素(包括元素的所有关联文件)都完全加载到浏览器后才执行。
$(document).ready()在DOM加载完后就可以调用了,图片等关联文件未必加载完。
$(document).ready()比较快,但是也有一些问题比如与图片高宽相关的就不一定有效,可以采用load()方法,绑定在元
素上就是元素加载完可用,绑定在window上就是页面加载完可用。$(window).load(funcation(){})与window.onload()
=function(){}等价。
(2)$(document).ready()可以多次使用,但是window.onload只能有一个,假如有两个,后面会覆盖前面的
(3)$(document).ready()可以简写:$().ready()或者$()。
2、事件绑定
bind(type[,data],fn)第一个参数是事件类型,第二个是可选参数,第三个是用来绑定的处理函数。(调用事件时,带引号,即"type")
(jquery比javascript的事件少了on,仅是click,不是onclick)
(1)和ready()方法一样,bind()方法也可以多次调用this是指对应的DOM元素,为了使JQuery能够调用,用$(this)转换为jquery对象。
(2)简写:$("#123").bind("click",function(){}),$("#123").click(function(){})
3、合成事件:jquery有两个合成事件,hover(),toggle()(和ready()方法一样是jquery自己定义的方法)
(1)hover(enter,leave),前一个事件表示光标进入时触发的事件,后面的是离开时触发的事件。(hover()代替的是mouseenter()和
mouseleave()不是mouseover()和mouseout()。mouseenter和mouseover的区别:mouseover就算是绑定元素的子元素之间的移动都会调用,
mouseenter只有出入元素才调用)
(2)toggle(fn1,fn2,fn3···)模拟连续的单击事件,依次轮番调用。还有可以直接代替show()和hide()的交替
4、事件冒泡
当子元素和父元素同时绑定同一事件时,会先调用子元素再依次向上逐级调用。例如:body下有div,div下有span,都绑定单击click事件,
先调用span的再是div,最后body。但假如只想触发span的事件就需要处理一下。
(1)增加事件处理对象:对象在执行完后就被销毁了。$("#123").bind("click",function(event){})
(2)使用stopPropagation() $("#123").bind("click",function(event){.....event.stopPropagation()})
(3)阻止默认时间的发生:preventDefault(),调用方法同上,而且不局限于此,用处更多。preventDefault(),stopPropagation()可以
用return false;简写代替。
(4)事件捕获:和冒泡相反从最外面向最里面~但是jquery不支持~
5、事件对象属性:
(1)event.type,获取事件的类型。
(2)event.preventDefault()阻止默认的事件发生,js中的该方法不兼容IE,jq封装后适用所有浏览器。
(3)event.stopPropagation(),阻止冒泡,js中的该方法不兼容IE,jq封装后适用所有浏览器。
(4)event.target获取触发事件的元素。jq封装后适用所有浏览器
6、移除事件unbind([type][,data])么有参数就删除所有绑定的事件,如果有type就删除该类的,假如还有处理函数作为第二个参数就删除
特定的这个。有些事件只需要调用一次,则绑定时用one代替bind。
7、模拟操作
(1)常用模拟:trigger()。$("#123").trigger("click");页面加载完后就会调用该事件,简化$("#123").click()。
(2)除了常用的事件,自己定义的事件也可以用该方法。
(3)trigger(type[,data])参数通过数组的形式传递在data中。
(4)执行默认操作trigger()会触发默认事件,例如:$("input").trigger("focus")浏览器默认会使<input>获得焦点。假如不需要,使用
triggerHandler()该方法不会调用焦点;
8、其他
bind()可以绑定多个方法。
命名空间:可以在事件后面加.pl等命名空间。
同名的不同命名空间就在调用时加!,加了!是严格按要求的,不加就可以调用所有命名空间里的同名函数。

原文地址:https://www.cnblogs.com/yhongyu/p/2394728.html