zoukankan      html  css  js  c++  java
  • 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等命名空间。
    同名的不同命名空间就在调用时加!,加了!是严格按要求的,不加就可以调用所有命名空间里的同名函数。

  • 相关阅读:
    手机键盘
    关于大数除法
    整数转字符串,字符串转整数
    动态规划习题:数字三角形(01背包)
    关于最长不重复子串的问题
    Ubuntu12.04 下vim的使用(不断更新)
    Ubuntu12.04 如何设置环境变量
    LeetCode--Reverse Linked List II
    Ubuntu12.04 使用svn如何设置代理
    July面试整理系列--(5)
  • 原文地址:https://www.cnblogs.com/yhongyu/p/2394728.html
Copyright © 2011-2022 走看看