Jquery的事件

一,加载DOM
  1,执行时机
  window.onload:在页面(包括外部文件,图像等),完全加载之后触发,等同于$(window).load(function(){})
  $(document).ready(function(){}):在DOM树解析完成之后,无需等待外部文件,图像等加载
  2,多次使用
  window.onload:不能多次执行,如想执行多个函数,需放在window.load=function(){//多个函数}内部
  $(document).ready(function(){//代码});可以多次执行
  3,简写方法
  $(document).ready(function(){//代码}) == $(function(){//代码});
二,事件绑定
  bind(type[.data],function(){//代码});
  one(type[.date],function(){});只在用户第一次触发事件时有用
  1,基本效果
  $(function(){
    $("#id element.class").bind("click",function(){
      $(this).next().show();
    });
  });
  2,加强效果
  $(function(){
    $("#panel h5.head").bind("mouseover",function(){
      var $content = $(this).next();
      if($content.is(":visible")){
        $content.hide();
      }else{
        $content.show();
      }
    })
  })
  3,改变绑定事件的类型
  $(function(){
    $("#panel h5.head").bind("mouseover",function(){
      $(this).next().hide();
    }).bind("mouseout",function(){
      $(this).next().show();
    });
  })
  4,简写绑定事件
  $(function(){
    $("#panel h5.head").mouseover(function(){
      $(this).next().hide();
    }).mouseout(function(){
      $(this).next().show();
    });
  })
三,合成事件
  1,hover()方法
  两个参数hover(enter,leave),用于模拟光标悬停事件,光标在元素之上调用第一个函数,离开调用第二个函数
  2,toggle()方法
  toggle(fn1,fn2,fn3,..fnN),第一次单击触发第一个函数,再单击触发第二个函数,依次下去
  可以方便的切换元素的可见状态
四,事件冒泡
  1,事件对象
  $("element").bind("click",function(event){});
  单击element元素时,事件对象就被创建了,这个事件只有事件处理程序能访问到,事件处理函数执行结束,事件对象被销毁
  2,停止事件冒泡
  stopPropagation()方法来阻止事件冒泡
  $("element").bind("click",function(event){event.stopPropagation();//事件处理函数});
  或者return false
  3,阻止默认行为
  preventDefault()方法
  $("element").bind("click",function(event){event.preventDefault();//事件处理函数});
  4,事件捕获
J  query不支持事件捕获
五,事件对象的属性
  event.type:获取事件的类型
  event.preventDefault():阻止事件的默认行为
  event.stopPropagation():阻止事件的冒泡
  event.target:获取触发事件的元素
  event.relatedTarget:获取相关元素,只有mouseover和mouseout事件会产生相关元素
  event.pageX,event.pageY:获取光标相对于页面(加上滚动条的宽度或高度)的X,Y坐标,
  event.which:鼠标单击事件中获取鼠标的左中右键(1,2,3)
  event.metakey:获取ctrl按键
六,移除事件
  1,移除按钮元素上以前注册的事件
  $("#btn").unbind("click"),删除click事件,没有参数删除所有事件
  2,移除button元素中的一个事件
  $("#btn").unbind("click",fn1),删除函数名为的fn1的click事件
七,模拟操作
  1,常用模拟
  $("#btn").trigger("click") == $("#btn").click(),模拟用户点击
  2,触发自定义事件
  绑定事件$("#btn").bind("click",function(){$("#test").append("<p>我是自定义事件</p>");});
  触发事件$("#btn").trigger("myclick");
  3,传递数据
  触发事件中传递数据,区别事件是代码触发还是用户触发
  $("#btn").trigger("myclick",["自定义","事件"])
  4,执行默认操作
  取消默认操作,$(input).triggerHandler("focus");
  默认会获取焦点,现在只会触发focus事件而不会获取焦点
八,其他用法
  1,绑定多个事件类型
  bind("mouseover mouseout")
  2,添加事件命名空间,便于管理
  bind("click.plugin",function(){});
  3,相同事件名称,不同命名空间执行方法
  $(function(){
    $("div").bind("click",function(){});
    $("div").bind("click.plugin",function(){});
    $("button").click(function(){$("div").trigger("click!");});
  });
  click!匹配所有不包含命名空间中的click方法

Jquery的事件,布布扣,bubuko.com

Jquery的事件

上一篇:CSS:层叠样式表的冲突处理


下一篇:node.js第十二课(Express框架及入门介绍)