zoukankan      html  css  js  c++  java
  • 第五章 《jQuery事件处理》

      唉!太失败了。。写了一堆东西尽然一个评论都冒得! 不过我还是会继续写下去。。。!

      接下来要介绍的是jQuery的事件处理

      1.加载页面后执行任务 方法如下:

      $(document).ready(function(){});//常用这一种  因为该形式能够更明确的表明代码含义

      $().ready(function(){});

      $(function(){});

      注:页面脚本中可以存在多个该事件的绑定,程序会按照上下顺序依次执行。

      2.绑定事件

      1).bind()方法

      .bind(eventType[,eventData],handler(eventObject));

      其中eventType是事件名称如:click,mouseover等

      eventData是可选参数为Map(如:{msg:message})类型用来给回调函数传递内容

      handler是指要触发的函数 eventObject表示事件对象

      例:

      1)$("#div1").bind("click",function(){});

      2)$("#div1").bind("mouseenter mouseleave",function(){$(this).toggleClass("ClassName")});//绑定多个事件  以空格隔开

      3)$("#div1").bind({

      click:function(){},

      mouseenter:function(){}

      });

      4)$("#div1").click(function(){});//简写

      2 .live()方法

      该方法不但可以将事件绑定到文档中的对应对象上 还包含 将来添加的 符合要求的对象。

      语法与.bind()一样

      3 .one()方法

      该方法将事件绑定到对象上 只会触发一次

      语法与.bind()一样

      4 .delegate()方法

      该方法 是对匹配的元素集合进行 进一步的筛选 并绑定事件  还包含将来添加的符合有求的对象

      .delegate(selector,eventType[,eventData],handler);

      例:

      $("table").delegate("td","click",function(){});

      3.解除事件绑定

      1).unbind()方法

      用于解除绑定的事件

      例:

      $("#div1").unbind();//移除所有

      $("#div1").unbind("click");

      2).die()方法

      用于解除符合对象绑定的事件和将来添加的匹配绑定事件的元素

      语法与.unbind()一致

      3).undelegate()方法

      对匹配元素进一步筛选并解除事件绑定和将来添加的匹配绑定事件的元素

      例:

      $("table").undeletgate("td","click");

      4.触发事件处理程序

      1) .trigger()方法

      该方法主要用于触发匹配对象的所有事件处理程序行为

      例:

      $("#div1").trigger("click");

      2) .trggerHandler()方法

      该方法用于执行匹配的第一个元素额所有处理程序,但不会触发浏览器的默认行为(如:提交表单,页面跳转a),也不冒泡到DOM层次结构中。并且不能对返回的对象进行链式操作。

      例:

      $("#xxx").trggerHandler("click");

      5.使用事件对象

      1)构造函数

      创建事件对象:

      var event=new jQuery.Event(eventType);

      var e=jQuery.Event("click");

      可以将创建的对象做为参数传递到trigger()和triggerHandler()方法中,以触发匹配元素上的指定事件,并利用事件对象的属性和方法来完成所需要的操作。

      2.事件对象的属性

      1)event.currentTarget:事件冒泡阶段的当前DOM元素

      2)event.data:包含可选的数据,这些数据在绑定当前执行的事件处理程序时传递给jQuery.fn.bind方法

      3)event.pageX:鼠标指针相对于文档左边缘的位置

      4)event.pageY:鼠标指针相对于文档顶部的位置

      5)event.relatedTarget:该事件包含的其他DOM元素,如果有的话。

      6)event.result:包含由该事件触发的事件处理程序返回的最后一个值,除非该值为undefined类型

      7)event.target:引发该事件的DOM元素

      8)event.timeStamp:返回自1970.1.1:0:00到触发该事件时的毫秒数。

      9)event.type:描述事件性质

      10)event.which:对于鼠标或键盘事件,该属性指示特定的按钮或键已被按下

      3.事件对象的方法

      1)event.stopPropagation():阻止事件在DOM树中向上冒泡,以防止任何父元素的事件处理程序获得该事件的通知。

      2)event.stopImmediatePropagation():阻止其他事件处理程序被调用。

      3)event.preventDefault():若调用此方法,则该事件的默认行为不会触发.

      4)event.isDefaultPrevented():返回一个Boolean值,指示是否对这个事件对象调用了preventDefault()方法.

      5)event.isImmediatePropagationStopped():放回一个Boolean值,指示是否对这个对象调用了stopImmediatePropagation()方法

      6)event.isPropagationStopped():返回一个Boolean值,指示是否对这个对象调用了stopPropagation() 方法

      6.常用事件

      1)浏览器事件

      load:对象加载完毕时触发事件

      unload:当用户离开当前页面时触发

      error:如果未正确加载对应元素将会触发

      resize:当对应对象大小将要发生变化时触发

      scroll:当用户用鼠标或键盘将光标移动到某一个元素中的不同地方时触发

      例:$(window).load(function(){});   

  • 相关阅读:
    IDEA设置类级注释和方法级注释
    简单的后台管理系统demo(基于Spring Boot)
    MyBatis中if test传入0值时不识别
    MySQL插入时间数据与系统时间差8小时
    MySQL按字符串中部分数值排序
    二叉查找树
    40个提升网站用户体验的jQuery插件推荐 40个提升网站用户体验的jQuery插件推荐
    纯CSS3实现的8种Loading动画效果
    Web前端框架汇总
    最大公约数 最小公倍数
  • 原文地址:https://www.cnblogs.com/zyj469470971/p/2483548.html
Copyright © 2011-2022 走看看