jQuery入门笔记之(三)事宜详解

转自个人博客

在JavaScript 有一个异常重要的功用,就是事宜驱动。假如你的网页须要与用户举行交互的话,就不能够不用到事宜。它在页面完整加载后,用户经由历程鼠标或键盘触发页面中绑定事宜的元素即可触发。jQuery为开辟者更有用力的编写事宜行动,封装了大批事宜要领供我们运用。

基本事宜

一. 绑定事宜

假如你进修过原生的javascript事宜,比方经常使用的事宜:click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout等等。假如正好你运用的是事宜绑定的体式格局举行触发的话,肯定会晓得它有何等难处置惩罚,种种浏览器的兼容性,this的指向等等,然则在jQuery中,一切都不再是题目了。

jQuery 经由历程.bind()要领来为元素绑定这些事宜。能够通报三个参数:.bind(eventType [,eventData ],handler(event))

  1. eventType:示意一个或多个DOM事宜范例,比方click mouseover

  2. eventData:可选参数,示意一个对象,它包含的数据键值对映照将被通报给事宜处置惩罚顺序。

  3. handler(event):示意绑定到指定元素的处置惩罚函数。event示意事宜对象。

下面就是绑定的几种体式格局:

  1. 点击按钮后实行匿名函数

$('button').bind('click', function() {
    alert('点击!');//运用点击事宜
});
  1. 实行平常函数式不必圆括号

$('button').bind('click', fn); 
function fn() {//平常处置惩罚函数
    alert('点击!');
}
  1. 能够同时绑定多个事宜

$('button').bind('mouseout mouseover', function() { 
    $('div').html(function(index, value) {
        return value + '1';//移入和移出离别实行一次
    });
});
  1. 另一种体式格局:通报一个对象

$('button').bind({ 
    'mouseout': function() { //事宜名的引号能够省略
        alert('移出');
    },
    'mouseover': function() {
        alert('移入');
    }
});

删除绑定函数:

删除绑定函数.unbind( eventType [, handler ] )有三种差别的用法:

$('button').unbind(); //删除当前元素的一切事宜,包含匿名实行的,在js中匿名实行的事宜函数没法删除。

$('button').unbind('click'); //删除当前元素的click事宜,使unbind参数删除指定范例事宜

$('button').unbind('click', fn1); //只删除click事宜的fn1处置惩罚函数。

二. 简写事宜

固然jQuery为开辟者不简简朴单供应了事宜绑定的要领就不论别的了,为了使开辟者越发轻易的绑定事宜,jQuery 封装了经常使用的事宜以便勤俭更多的代码。我们称它为简写事宜。

要领名触发前提形貌
click(fn)鼠标触发每个婚配元素的 click(单击)事宜
dblclick(fn)鼠标触发每个婚配元素的 dblclick(双击)事宜
mousedown(fn)鼠标触发每个婚配元素的 mousedown(点击后)事宜
mouseup(fn)鼠标触发每个婚配元素的 mouseup(点击弹起)事宜
mouseover(fn)鼠标触发每个婚配元素的 mouseover(鼠标移入)事宜
mouseout(fn)鼠标触发每个婚配元素的 mouseout(鼠标移出)事宜
mousemove(fn)鼠标触发每个婚配元素的mousemove(鼠标挪动)事宜
mouseenter(fn)鼠标触发每个婚配元素的 mouseenter(鼠标穿过)事宜
mouseleave(fn)鼠标触发每个婚配元素的 mouseleave(鼠标穿出)事宜
keydown(fn)键盘触发每个婚配元素的 keydown(键盘按下)事宜
keyup(fn)键盘触发每个婚配元素的 keyup(键盘按下弹起)事宜
keypress(fn)键盘触发每个婚配元素的 keypress(键盘按下)事宜
unload(fn)文档当卸载本页面时绑定一个要实行的函数
resize(fn)文档触发每个婚配元素的 resize(文档转变大小)事宜
scroll(fn)文档触发每个婚配元素的 scroll(滚动条拖动)事宜
focus(fn)表单触发每个婚配元素的 focus(核心激活)事宜
blur(fn)表单触发每个婚配元素的 blur(核心丧失)事宜
focusin(fn)表单触发每个婚配元素的 focusin(核心激活)事宜
focusout(fn)表单触发每个婚配元素的 focusout(核心丧失)事宜
select(fn)表单触发每个婚配元素的 select(文本选定)事宜
change(fn)表单触发每个婚配元素的 change(值转变)事宜
submit(fn)表单触发每个婚配元素的 submit(表单提交)事宜

大部分事宜都犹如上面表格中的形貌平常比较简朴,也比较好明白。

下面着重讲几个须要注重的处所:

  1. unload(fn)resize(fn)scroll(fn),运用$(window)对象触发。

  2. change(fn):触发的前提是,输入框的值有转变,且落空核心。

  3. submit(fn):必须在form中,而且运用$("form")作为事宜触发元素,不然无效。

  4. .mouseover().mouseout()示意鼠标移入和移出的时刻触发。那末 jQuery 还封装了别的一组:.mouseenter().mouseleave()示意鼠标穿过和穿出的时刻触发。那末这两组实质上有什么区分呢?
    手册上的申明是:.mouseenter().mouseleave()这组穿过子元素不会触发,而.mouseover().mouseout()则会触发。

经由试验,代码以下:

<div style="width:100px;height:100px;background:blue;">
<p style="width:100px;height:50px;background:red;"></p>
</div>
<strong></strong>
<script>
    $('div').mouseover(function () { //移入 div 会触发,移入 p 再触发
        $('strong').html(function (index, value) {
            return value+'1';
        });
    });
</script>

能够看到,鼠标在div内挪动时,会不断触发事宜函数,输出值。而mouseenter则不会有这个题目。

  1. .keydown().keyup()返回的是键码,而.keypress()返回的是字符编码。

$('input').keydown(function(e) {
    alert(e.keyCode); //按下 a 返回 229
});
$('input').keypress(function(e) {
    alert(e.charCode); //按下 a 返回 97
});
  1. .focus().blur()离别示意光标激活和丧失,事宜触发机遇是当前元素。而.focusin()
    .focusout()也示意光标激活和丧失,然则当子元素聚焦或丧失机也触发事宜。

 <div style=style="width:100px;height:50px;background:blue;">
    <input type="text">
 </div>
<script>
    $('div').focusin(function(e) {
        alert("激活"); //绑定的是 div 元素,子类input触发
    });
    $('div').focusout(function(e) {
        alert("丧失"); 
    });
</script>

三. 复合事宜

jQuery 供应了许多最经常使用的事宜结果,组合一些功用完成了一些复合事宜,比方切换功
能、智能加载等。

要领名形貌
ready(fn)当 DOM 加载终了触发事宜,已在笔记1中引见过
hover([fn1,]fn2)当鼠标移入触发第一个 fn1,移出触发 fn2
toggle(fn1,fn2[,fn3..])已烧毁,当鼠标点击触发 fn1,再点击触发 fn2…
$('div').hover(function () {//背景移入移出切换结果
    $(this).css('background', 'black'); //mouseenter 结果
}, function () {
    $(this).css('background', 'red'); //mouseleave 结果,可省略
});

注重:.hover()要领是连系了.mouseenter()要领和.mouseleva()要领,并不是.mouseover()
.mouseout()要领。

.toggle()有两层寄义,一层就如表格中所说(1.9版移除),一层在动画中会用到,在这里不举行报告,若想完成表格中的结果也迥殊简朴,能够举行以下推断:

var flag = 1; //计数器,标记
$('div').click(function () {
    if (flag == 1) { //第一次点击
        $(this).css('background', 'black');
        flag = 2;
    } else if (flag == 2) { //第二次点击
        $(this).css('background', 'blue');
        flag = 3;
    } else if (flag == 3) { //第三次点击
        $(this).css('background', 'red');
        flag = 1;
    }
});

event对象

JavaScript 在事宜处置惩罚函数中默许通报了 event 对象,也就是事宜对象。但因为浏览器

的兼容性,开辟者老是会做兼容方面的处置惩罚。jQuery 在封装的时刻,处理了这些题目,而且
还建立了一些异常好用的属性和要领。

一. 事宜对象

处置惩罚函数的e就是event事宜对象(JS中需做兼容处置惩罚),event 对象有许多可用的属性和要领,这里先演示一下:

//经由历程处置惩罚函数通报事宜对象
$('input').bind('click', function (e) { //接收事宜对象参数
    alert(e.type);//打印出click
});

下面是一些经常使用的属性:

属性名形貌
type猎取这个事宜的事宜范例的字符串,比方:click
target猎取绑定事宜的 DOM 元素
dat猎取事宜挪用时的分外数据
relatedTarget猎取移入移出目的点脱离或进入(最相邻)的谁人 DOM 元素
currentTarget猎取冒泡前触发的 DOM 元素,同等与 this
pageX/pageY猎取相关于页面原点(最左上角)的程度/垂直坐标
screenX/screenY猎取显示器屏幕位置的程度/垂直坐标(非 jQuery 封装)
clientX/clientY猎取相关于页面视口的程度/垂直坐标(非 jQuery 封装)
result猎取上一个雷同事宜的返回值
timeStamp猎取事宜触发的时候戳
whic猎取鼠标的左中右键(1,2,3),或猎取键盘按键
altKey/shiftKey/ctrlKey猎取是不是按下了 alt、shift、ctrl(非jQuery 封装)

注重:

target:是猎取触发元素的DOM,就是你点了哪一个就是哪一个。
currentTarget:是猎取监听元素的DOM,你把事宜绑定在谁身上就是谁。

<div style="width:100px;height:100px;background:#999">
    <p style="width:50px;height:50px;background:#333"></p>
</div>
<script>
    $('div').bind('click', function (e) { 
    alert(e.target);//点击p时返回p
    });
    $('div').bind('click', function (e) { 
        alert(e.currentTarget);//不管什么时候都返回div,同等this
    });
</script>

经由历程 event.data 猎取分外数据,能够是数字、字符串、数组、对象

$('input').bind('click', 123, function () { //通报 data 数据
    alert(e.data); //猎取数字数据123
});

猎取鼠标的左中右键

$(document).mousedown(function (e) {
    alert(e.which);
});

猎取键盘的按键

$('input').keyup(function (e) {
    alert(e.which);
});

//猎取触发元素鼠标当前的位置

$(document).click(function (e) {
    alert(e.screenY+ ',' + e.pageY + ',' + e.clientY);
});

二. 冒泡和默许行动

假如看我的百度前端技术学院task0002的笔记的话,应当都晓得事宜冒泡是怎样的,事宜代办就是依据它来完成的。这里我轻微说一下事宜冒泡是什么样的,事宜冒泡实在就是在点击一个元素时,会一层一层的向父元素递进当点击一个div时实际上是如许的div -> body -> html -> document

下面来看一下冒泡和默许行动的一些要领:

要领名形貌
preventDefault()阻挠某个元素的默许行动
isDefaultPrevented()推断是不是挪用了 preventDefault()要领
stopPropagation()阻挠事宜冒泡
isPropagationStopped()推断是不是挪用了 stopPropagation()要领
stopImmediatePropagation()阻挠事宜冒泡,并作废该事宜的后续事宜处置惩罚函数
isImmediatePropagationStopped()推断是不是挪用了 stopImmediatePropagation()要领

这些要领都是event对象的一些要领,须要注重的是:
先来看到末了两个,名字都长到让人记不住的要领,,如代码中所示:

$("div").click(function(e) {
    e.stopImmediatePropagation() ;
    alert("div1");//只弹出div1
});
$("div").click(function(e) {
    alert("div2");//因第一个点击事宜作废了该事宜的后续处置惩罚函数,这里将不被实行
});

同时作废默许行动以及事宜冒泡:

<a href="http://guowenfh.github.io">三省吾身丶丶</a>
<script >
    $("a").click(function(e) {
        // e.preventDefault();//阻挠默许行动
        // e.stopPropagation();//阻挠事宜冒泡
        alert("a");
        return false;
    });
    $(document).click(function(e) {
        alert("document");
    });
</script>

注重这段代码中,我们能够看到a被弹出来了,然则链接并没有跳转,而且document也没有被弹出,因为return false相当于同时了这两件事变,只不过,在运用表格中的检测要领时,返回的false。
而运用event对象的要领完成阻挠时,检测返回true。

高等事宜

jQuery 不只封装了大批经常使用的事宜处置惩罚,还供应了不少高等事宜轻易开辟者运用。比

如模仿用户触发事宜、事宜托付事宜、和一致整合的 on 和 off,以及仅实行一次的 one 方
法。这些要领大大降低了开辟者难度,提升了开辟者的开辟体验。

一. 模仿操纵

在事宜触发的时刻,偶然我们须要一些模仿用户行动的操纵。比方:当网页加载终了后自行点击一个按钮触发一个事宜,而不是用户去点击。

1. .trigger()

先来一个最机器的.trigger()
<button>点击</button>

$("button").click(function() {
    alert("这里是第一次点击来自模仿!");
});
$("button").trigger('click');

翻开网页,能够看到内容并不须要被点击,就直接被弹了出来。
固然不会那末庞杂,来进阶一下吧,只须要把.trigger('click')连在click事宜今后就能够了,结果固然一样。
然则,如许彷佛照样有点贫苦,jQuery怎么能够让我们那末贫苦,把增加的字符串删除,增加.click(),如今就是如许的:

$('input').click(function () {
    alert('我的第一次点击来自模仿!');//结果和上面一样
}).click();

这类简朴的要领jQuery险些一切的经常使用事宜都供应了:

blurfocusinmousedownresize
changefocusoutmousenterscroll
clickkeydownmouseleaveselect
dblclickkeypressmousemovesubmit
errorkeyupmouseoutunload
focusloadmouseover

下面来引见一下.trigger()的一些进阶用法,固然假如要举行如许的参数通报的话,就不能运用上面的简朴要领了:
偶然在模仿用户行动的时刻,我们须要给事宜实行通报参数,这个参数相似与在事宜绑定中的event.data的分外数据,能够是数字、字符串、数组、对象。须要注重的是当通报一个值的时刻,直接通报即可。当两个值以上,须要在前后用中括号包含起来。

$("button").click(function (e, data1, data2) {
    alert(data1.a + "," + data2[1]);//加载后直接弹出1,456
}).trigger("click", [{"a" : "1", "b" : "2"}, ["123","456"]]);

在运用bind时,bind传入的分外数据经由历程event.data猎取,该数据传输情势稳定。

模仿用户行动时,除了经由历程 JavaScript 事宜名触发,也能够经由历程自定义的事宜触发,所谓自定义事宜实在就是一个被.bind()绑定的恣意函数。

$('input').bind('myEvent', function () {
alert('自定义事宜!');
}).trigger('myEvent');

2. .triggerHandler()

这是另一个模仿用户行动的要领,用法和trigger()要领一样。然则在某些状况下有以下区分:

  1. .triggerHandler()要领并不会触发事宜的默许行动,而.trigger()会,比方:

$('form').trigger('submit'); //模仿用户实行提交,并跳转到实行页面
$('form').triggerHandler('submit'); //模仿用户实行提交,并阻挠的默许行动
  1. .triggerHandler()要领只会影响第一个婚配到的元素,而.trigger()会影响一切。

  2. .triggerHandler()要领会返回当前事宜实行的返回值,假如没有返回值,则返回
    undefined;而.trigger()则返回当前包含事宜触发元素的 jQuery 对象(轻易链式联缀挪用)。

  3. .trigger()在建立事宜的时刻,会冒泡。但这类冒泡是自定义事宜才表现出来,是
    jQuery 扩大于 DOM 的机制,并不是 DOM 特征。而.triggerHandler()不会冒泡。

二. 定名空间

偶然,我们想对事宜举行移除。但关于同名同元素绑定的事宜移除每每比较贫苦,这个

时刻,能够运用事宜的定名空间处理。(主如果处置惩罚绑定匿名函数的状况)

$("button").bind('click.abc', function(e) {
    alert("abc");
});
$("button").bind('click.xyz', function(e) {
    alert("xyz");
});
$("button").unbind('click.abc' );//处置惩罚事后只弹出xyz。

注重:也能够直接运用('.abc'),如许的话,能够移除雷同定名空间的差别事宜。关于模仿操纵.trigger()和.triggerHandler(),用法也是一样的。$('input').trigger('click.abc')

三.事宜托付

事宜托付也就是事宜代办。我在task0002(二)- DOM + 事宜已谈过了。而且也本身完成了一下事宜代办,这里轻微再引见一下:

  1. “事宜代办” 的实质是应用了事宜冒泡的特征。当一个元素上的事宜被触发的时刻,比方说鼠标点击了一个按钮,一样的事宜将会在谁人元素的一切先人元素中被触发。这一历程被称为事宜冒泡;

  2. 这个事宜从原始元素最先一向冒泡到DOM树的最上层。任何一个事宜的目的元素都是最最先的谁人元素,在我们的这个例子中也就是按钮,而且它在我们的元素对象中以属性的情势涌现。

  3. 运用事宜代办,我们能够把事宜处置惩罚器增加到一个元素上,守候一个事宜从它的子级元素里冒泡上来,而且能够得知这个事宜是从哪一个元素最先的。

  4. 关于动态天生的节点一样有用。

完成以下:

<div>
    <button>点击</button>
    <button>点击</button>
</div>
<script>
    $("div").delegate('button',"click", function() {
        alert("点击了");//不管点击哪一个都能够弹出
        $("<button>天生</button>").appendTo('div');//点击同时天生节点,一样能够点击弹出
    });
    //$("div").undelegate('button', 'click');//作废事宜代办
</script>

注重:.delegate()须要指定父元素,然后第一个参数是当前元素,第二个参数是事宜体式格局,第三个参数是实行函数。和.bind()要领一样,能够通报分外参数。.undelegate().unbind()要领一样能够直接删除一切事宜,比方:.undelegate('click')。也能够删除定名空间的事宜,比方:.undelegate('click.abc')

开胃菜完了,下面才是重点!

壮大的onoffone

现在绑定事宜息争绑的要领有三组共六个。因为这三组的共存能够会形成肯定的杂沓,为此 jQuery1.7 今后推出了.on()和.off()要领完全摒弃前面三组。(临时未移除)

一. on

  1. 替换.bind()体式格局

$('button').on('click', function () {
    alert('替换.bind()');
});
  1. 替换.bind()体式格局,并运用分外数据和事宜对象

$('.button').on('click', {user : 'Lee'}, function (e) {
    alert('替换.bind()' + e.data.user);//lee
});
  1. 替换.bind()体式格局,并绑定多个事宜

$('.button').on('mouseover mouseout', function () {
    alert('替换.bind()移入移出!');
});
$('.button').on({//以对象情势绑定多个事宜
    mouseover : function () {
        alert('替换.bind()移入!');
    },
    mouseout : function () {
        alert('替换.bind()移出!');
    }
});
  1. 替换.bind()体式格局,阻挠默许行动并作废冒泡

$('form').on('submit', function () {
    return false;
});
$('form').on('submit', false);//在function中只要阻挠事宜存在时,如许写能够简化代码,结果雷同

$('form').on('submit', function (e) {//固然运用事宜对象也是能够的
    e.preventDefault();//阻挠默许行动
    e.stopPropagation();//作废冒泡
});
  1. 替换.delegate(),事宜托付

$('div').on('click', 'button', function () {
    $(this).clone().appendTo('div');//每次点击都复制一个button
});

迥殊注重:.on().delegate()之间的选择器和事宜称号的位置!因为便于多种事宜处置惩罚体式格局,将选择器与事宜称号调换了位置

二.off

  1. 替换.unbind()体式格局,移除事宜

$('.button').off('click');
$('.button').off('click', fn);
$('.button').off('click.abc');
  1. 替代.undelegate(),作废事宜托付
    $('#box').off('click', '.button');

注重:和之前体式格局一样,事宜托付和作废事宜托付也有种种搭配体式格局,比方分外数据、定名空间等等。

三. one

不论是.bind()照样.on(),绑定事宜后都不是自动移除事宜的,须要经由历程.unbind()和.off()来手工移除。jQuery 供应了.one()要领,绑定元素实行终了后自动移除事宜,能够要领仅触发一次的事宜。

  1. 相似于.bind()只触发一次

$('button').one('click', function () {
    alert('one 仅触发一次!');
});
  1. 相似于.delegate()只触发一次

$('div').one('click', 'button', function (){
    $(this).clone().appendTo('div');//只复制一次
});

所以前面的一系列报告,都是为了举一反三,如今在jQuery中关于事宜的处置惩罚直接用onoffone这三个就好了!

    原文作者:三省吾身丶丶
    原文地址: https://segmentfault.com/a/1190000004230810
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞