• jQuery教程-jQuery中的事件
  • 曼陀罗 发表于 2016/3/1 9:51:00 | 分类标签: jquery教程 事件教程 冒泡事件
  •  1. 加载 DOM
    $(document).ready(function() {
        //代码
    });
    

    (1)执行时机:window.onload 方法在网页中所有的元素(包括愿你苏的所有关联文件)完全加载后才执行,而 $(document).ready() 在 DOM 完全就绪时就可以被调用

    • $(window).load()与 window.onload 等价

    (2)可多次使用:window.onload 方法只能执行一次,而$(document).ready() 多次使用,根据注册的顺序依次执行

    (3)简写方式

    $().ready(function() {
        //代码
    });
    
    $(function() {
        //代码
    });
    

    2. 事件绑定

    • bind(type[ , data], fn)

    • one(type[ ,data], fn)-只执行一次

    (1)第一个参数type表示事件类型:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等

    (2)第二个为可选参数,为做 event.data 属性传递给事件对象的额外数据

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

    • 事件简写:$(variable).bind(type [, data], fn) 简写为 $(variable).type(fn)

    3. 合成事件

    (1)hover(fn, fn)方法-是 mouseover(fn) 和 mouseout(fn) 的合成

    (2)toggle(fn1, fn2, ...)

    • 用于模拟鼠标连续单击事件,当点击事件时重复对设置的函数进行调用

    • 用于切换元素的可见状态

    4. 事件冒泡

    (1)事件冒泡是指事件会按照 DOM 的层次结构像水泡一样不断向上直至顶端

    (2)事件冒泡可能会引起预料之外的效果,可以使用

    • event.stopPropagation()-停止事件冒泡

    • event.preventDefault()-阻止默认行为

    • return false-停止事件冒泡或者阻止默认行为

    5. 事件对象的属性

    • event.type()-获取事件的类型

    • event.target()-获取到触发事件的元素

    • event.relatedTarget()-获取触发事件的相关元素

    • event.pageX()-获取鼠标相对于页面的 x 坐标

    • event.pageY()-获取鼠标相对于页面的 y 坐标

    • event.which()-在鼠标单击事件中获取鼠标的左(1)、中(2)、右健(3);在键盘事件中获取键盘的按键

    • event.metaKey()-键盘事件中获取 ctrl 按键

    • event.originalEvent()-指向原始的事件对象

    6. 移除事件

    • unbind([type][ ,data])

    (1)第一个参数为事件类型,第二个参数为要移除的函数

    (2)没有参数,删除所有绑定的事件

    (3)提供事件类型为参数,只删除该类型的绑定事件

    (4)提供处理函数作为第二个函数,只删除提供的特定事件

    7. 模拟事件操作

    (1)模拟点击事件

    • $(variable).trigger("click")

    • $(variable).click()

    (2)触发自定义事件

    • $(variable).bind("customEvent", fn);

    $(variable).trigger("customEvent");


  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款

  • 感谢本文作者
  • 作者头像
  • 昵称:曼陀罗
  • 加入时间:2013/6/18 0:00:00
  • TA的签名
  • 这家伙很懒,虾米都没写
  • +进入TA的空间
  • 以下内容也很赞哦
分享按钮