【龙电竞官网】jQuery中on方法用法实例_jquery_脚本之家

2019-11-28 18:10栏目:竞技宝竞猜
TAG:

1、one(卡塔尔方法效果是为所选的要素绑定三个仅触发一回的管理函数,其调用的语法格式为:one

正文实例陈说了jQuery中on(卡塔尔国方法用法。分享给我们供我们参照他事他说加以考查。具体剖判如下:

转自:

当中参数type为事件类型,即需求接触什么类型的风浪;参数data为可选参数,表示作为event.data属性值传递给事件目的的额外数据对象;fn为绑定事件时所要触发的函数。

此方式能够在相称成分上绑定三个要么四个事件处理函数。使用off方法绑定的平地风波。

bind(type, [data], fn)  返回值::jQuery

2、示例代码:复制代码 代码如下:

语法布局生机勃勃:复制代码 代码如下:$.on(events,[selector],[data],fn)

概述

为各类相称成分的一定事件绑定事件管理函数。

.bind(卡塔尔(英语:State of Qatar)方法是用于往文书档案上附加行为的严重性措施。全数JavaScript事件目的,举个例子focus, mouseover, 和 resize,都以能够用作type参数字传送递进来的。

jQuery还提供了一些绑定那么些标准事件类型的粗略方法,比如.click(卡塔尔用于简化.bind('click'卡塔尔。生机勃勃共有以下那些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。

别的作为type参数的字符串都以官方的;要是叁个字符串不是原生的JavaScript事件名,那么那些事件管理函数会绑定到叁个自定义事件上。那么些自定义事件相对不会由浏览器触发,但足以因而使用.trigger(卡塔尔(قطر‎大概.triggerHandler(卡塔尔国在任何代码中手动触发。

比如type参数的字符串中富含贰个点(.卡塔尔(英语:State of Qatar)字符,那么那些事件就充作是有命名空间的了。这一个点字符就用来分隔事件和她的命名空间。比世尊说,假若推行.bind('click.name', handler卡塔尔 ,那么字符串中的 click 是事件类型,而字符串 name 正是命名空间。命名空间允许大家撤消绑定可能触发一些特定类型的平地风波,而不用触发别的事件。参谋unbind(卡塔尔(英语:State of Qatar)来拿到更加的多新闻。

当八个平地风波传到三个成分上,全体绑定在地点的针对哪个事件的处理函数都会接触。借使注册了八个事件管理函数,总是依据绑定的种种依次触发。当全部绑定的事件管理函数实践达成后,事件继续沿着平日的风云冒泡渠道上浮。

.bind(卡塔尔最基本的用法是:

 

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

 

本条代码能使ID为foo的因素响应click事件。当客商点击成分内部之后,就能够弹出二个警报框。

三个事件

梯次能够绑定五个事件类型,各类事件类型用空格分隔:

 

$('#foo').bind('mouseenter mouseleave', function() {
  $(this).toggleClass('entered');
});

 

本条代码让叁个<div id="foo">成分(最初情状下class未有安装成entered),当鼠标移进去的时候,在class中足够entered,而当鼠标移出那一个div的时候,则去除这么些class值。

在jQuery 1.4中,大家也能够透过传播二个炫目对来壹遍绑定八个事件管理函数:

 

$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

 

事件管理函数

fn这一个参数接纳多个回调函数,就好像从前体现的那样。在此个事件管理函数内部,this指向那一个函数绑定的DOM成分。倘使要让那一个成分变为jQuery对象来行使jQuery的法子,能够把那些目的传入 $(卡塔尔国 重新打包。举个例子说:

 

$('#foo').bind('click', function() {
  alert($(this).text());
});

 

本条代码推行之后,当顾客点击了ID为foo的因素内部之后,他的文书内容就能够冒出在叁个告诫框中。

事件指标

fn那些参数的回调函数还足以选拔三个参数。当那一个函数被调用时,一个JavaScript事件指标会作为叁个参数传进来。

这些事件指标平日是还没须要且能够简简单单的参数,因为当这几个事件管理函数绑定的时候就可以知道鲜明知晓他在触及的时候应该做些什么,平时就早即可拿到足够的消息了。但是在有个别时候,在事件开端化的时候要求得到越多关于客户情状的音讯。能够参见完整的关于事件目的的内容(英文)。

在事件管理函数内回到false就等于于施行事件指标上的.preventDefault(卡塔尔和.stopPropagation(卡塔尔。

能够像这么在事件处理函数内选取事件目的:

 

$(document).ready(function() {
  $('#foo').bind('click', function(event) {
    alert('The mouse cursor is at ('
      + event.pageX + ', ' + event.pageY + ')');
  });
});

 

小心,这些参数增加到了一个无名函数上。这一个代码可以让顾客在点击ID为foo的成分时,报告鼠标点击时相对于页面包车型客车坐标。

传送事件数量

可选的第二个参数data日常用的比较少。假若提供了这几个参数,那么我们就会把大器晚成部分叠合音信传送给事件管理函数了。这么些参数有个很好的用场,就是管理闭包带来的主题素材。譬喻我们有五个事件管理函数要指向同二个之中变量:

 

var message = 'Spoon!';
$('#foo').bind('click', function() {
  alert(message);
});
message = 'Not in the face!';
$('#bar').bind('click', function() {
  alert(message);
});

 

由于这多少个函数在他们分其他条件中都有message,所以触发时展现的音讯都以Not in the face! 。变量值被转移了。为了回避这些标题,大家得以把message变量作为data参数字传送递进去:

 

var message = 'Spoon!';
$('#foo').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});
message = 'Not in the face!';
$('#bar').bind('click', {msg: message}, function(event) {
  alert(event.data.msg);
});

 

此刻在函数内部不再直接指向那一个变量了;替代它的是按值传递给了data参数,他能保证绑定事件时的值。第一个函数将来会展现Spoon!,而第一个则展现Not in the face!

注意,如若这些目的按援用传递给了函数,那么将会使事态变得最棒复杂。

除此以外,能够参谋.trigger(卡塔尔国方法来打探怎么样在事件触发时传递数据,并非在事变绑定的时候传递数据。

在jQuery 1.4中,不再帮助把数据以至事件附加到二个object、embed大概applet成分下边。因为当往Java applet元素上附加数据时,会触发二个严重错误警报。

其他事件

参数列表: 参数 描述 events 三个或多个用空格分隔的风云类型和可选的命名空间。 selector 可选。二个接受器字符串,用以过滤选定的因素,该选取器的子孙成分将调用途理程序。 假诺选拔是空或被忽视,当它达到选定的成分,事件三番五回触发。 data 可选。作为event.data属性值传递给事件指标的附加数据对象以供事件处理函数管理。 fn 该事件被触发时实行的函数。 false值也能够做三个函数的简写,重回false。

参数

3、效果图预览

实例代码:

typeString

含蓄三个或几个事件类型的字符串,譬喻"click"或"submit",还足以是自定义事件名。

点击后:

复制代码 代码如下:

data (可选)Object

作为event.data属性值传递给事件指标的附加数据对象

再点击无反射

本子之家

fnFunction

绑定到各种相称成分的事件方面包车型地铁管理函数

原先内容

示例

如上代码为div绑定八个click事件,点击div时候可认为div设置新的公文内容。

描述:

当每种段落被点击的时候,弹出其文件。

复制代码 代码如下:

jQuery 代码:
$("p").bind("click", function(){
  alert( $(this).text() );
});

版权声明:本文由龙竞技官网发布于竞技宝竞猜,转载请注明出处:【龙电竞官网】jQuery中on方法用法实例_jquery_脚本之家