对jQuery的平地风波绑定的部分心想,javascript之事件绑定

首先大家看下边包车型地铁三个很广阔的风云绑定代码:

首先大家看下边包车型大巴叁个很布满的平地风波绑定代码:

1、原始写法

复制代码 代码如下:

 

 

//example
$(‘#dom’).click(function(e){
//do something
});

//example  

<div onclick=”alert(‘you clicked me just now);'”>click
me</div>

$(‘#dom2’).click(function(e){
//do something
});

$(‘#dom’).click(function(e){  

在刚发轫读书前端的时候,大家难免这么将事件绑定写在html中,后来大家想将html和js脚本进行分离便这么写

这段代码在事件绑定管理上有一点点劣点:

  //do something  

 

过多的平地风波绑定会费用内部存款和储蓄器
末尾生成HTML会未有事件绑定,须要再行绑定
语法过于繁杂

});  

<div id=”test”>click me</div>

**化解方案

 

<script type=”text/javascript”>

**对于1、2两点的化解方案,大家第一先精通一下jQuery的风浪绑定

$(‘#dom2’).click(function(e){  

test.onclick=function(){

jQuery的事件绑定有多个艺术能够调用,以click事件来比喻:

  //do something  

    alert(“you click me just now”);

click方法

}); 

};

bind方法
delegate方法
on方法

这段代码在事变绑定管理上有一点缺欠:

</script>

甭管你用的是(click / bind /
delegate)之中国和南美洲常方式,最后都以jQuery底层都以调用on方法来产生末段的平地风波绑定。因而从某种角度来说除了在挥洒的有益程度及习贯上选用,比不上直接都选用on方法来的快意和直接。

 

那样写实际和上一种写法在实施上是从未其余分别的,只是她有一点点显得“高大上”一点。在此,供给多谢八楼@con的提示,其实她们照旧有一丢丢的分别,因为它们的施行情况是不怎么有一点分化的,其函数功效域中包涵的对象是差别的。实际情况可看本文的留言。

至于对艺术的详尽表明和用例,请间接待上访谈jQuery官方网址,在那边不一一表达。api.jquery.com

1.过多的事件绑定会消耗内部存款和储蓄器

 

性能

 

当大家写更复杂一些的本子的时候,开采这种“对象.事件=事件管理函数”格局并不佳,因为前面包车型大巴风浪显著得会覆盖前叁个事件管理函数,数十次事变绑定的结果往往是仅推行最终一个事件管理函数,能够看attach伊夫nt和addEventListener文中示例。

先是大家须要先对两样的事件绑定方式之间的内部存款和储蓄器占用差异有贰个清楚的认知。

2.终了生成HTML会未有事件绑定,须要重新绑定

 

对于品质的剖判将使用Chrome的Developer Tools。
Profiles –> Take Heap
Snapshot,用这一个工具大家得以看来Javascript所占用的内部存款和储蓄器,可以对质量难题实行剖判。

 

新生,大家亟须在骨子里支付中屏弃这种“肥猪流”的写法了。

图片 1

3.语法过于繁杂

 

DEMO HTML

 

 

复制代码 代码如下:

消除方案

 

<html>
<head>
<script type=”text/javascript”>
$(function(){
$(‘#btn-add’).click(function(){
$(‘.ul’).prepend(‘<li><a
href=”javascript:;”>text</a></li>’);
});
});
</script>
</head>
<body>
<button id=”btn-add”>Create Element</button>
<ul class=”ul”>
<li><a href=”javascript:;”>text</a></li>
<!– 2000 line… –>
<li><a href=”javascript:;”>text</a></li>
</ul>
</body>
</html>

 

2.attachEvent和addEventListener

Method 1

对于1、2两点的解决方案,大家率先先精通一下jQuery的风云绑定

 

复制代码 代码如下:

 

先是得表明,attachEvent是仅在罪恶的IE是下可行的,add伊芙ntListener是在其他遵循W3C规范的浏览器中可行(常用的浏览器能够放心使用add伊夫ntListener),何况在IE9和事后的本子中也足以接纳addEventListener。看来在必然下,MS不得不俯首称臣了。

$(function(){
$(‘.ul a’).click(function(e){
alert(‘click event’);
});
});

jQuery的风浪绑定有七个艺术能够调用,以click事件来比喻:

 

以下是Method 1的内部存款和储蓄器剖析图

 

在此得表达,上述的无论是“对象.事件=事件管理函数”的法门,attach伊夫nt事件绑定的诀窍依然addEventListener不带第多个参数的动静下,都以冒泡型事件管理格局。至于怎么样是冒泡事件怎么样是捕获事件,这些涉及到DOM文书档案对象模型和事件流。一句话来讲正是,冒泡正是事件的传播方式是从事件目的节点到DOM文书档案结构的根节点方向扩散,而捕获型事件正是从DOM文书档案结构的根节点到事件目的节点。

内存占用约3.4M

·click方法

 

图片 2

 

obj = document.getElementById(“testdiv”);

Method 2

·bind方法

obj.attachEvent(‘onclick’,function(){{alert(‘1’);});

复制代码 代码如下:

 

obj.attachEvent(‘onclick’,function(){{alert(‘2’);});

$(function(){
$(‘.ul’).on(‘click’, ‘a’, function(e){
alert(‘click event’);
});
});

·delegate方法

obj.attachEvent(‘onclick’,function(){{alert(‘3’);});

以下是Method 2的内部存款和储蓄器剖判图

 

//实行各类是alert(3),alert(2),alert(1);

内部存款和储蓄器占用约2.0M

·on方法

obj = document.getElementById(“testdiv”);

图片 3

 

obj.addEventListener(‘click’,function(){{alert(‘1’);},false);

结论 Method 1 明显比 Method 2 多耗1.4M的内存

不论你用的是(click / bind /
delegate)之中国和亚洲常形式,最后都以jQuery底层都以调用on方法来产生末段的平地风波绑定。因此从某种角度来讲除了在书写的造福程度及习于旧贯上选用,不及直接都施用on方法来的兴高采烈和一直。

obj.addEventListener(‘click’,function(){{alert(‘2’);},false);

Method 1 十分的小概将事件绑定到通过点击button所新添DOM中来,而Method 2能够。
要是on的delegate对象是HTML页面原有的要素,由于是事件的触发是由此Javascript的平地风波冒泡机制来监测,所以对于具备子成分(富含前期通过JS生成的要素)全体的风浪监测均能有效,且由于并不是对三个因素实行事件绑定(在那个example中为2000+a标签),能够有效的节约内部存款和储蓄器的损耗。

 

obj.addEventListener(‘click’,function(){{alert(‘3’);},false);

思考
代码如诗,但很轻巧成为代码如屎。怎样抓牢代码的优雅程度也是八个很风趣的业务。

至于对艺术的事无巨细解释和用例,请直接待上访谈jQuery官方网址,在那边不一一表达。api.jquery.com

//点击obj对象时,推行顺序为alert(‘1’),alert(‘2’),alert(‘3’);

以下是多个很一般且广泛的JS文件的代码片段(用于一般网址)

 

从这段例子能够看看:

复制代码 代码如下:

性能

 

$(‘#btn-add’).click(function(){
//do something
});
$(‘.action-box #btn-delete’).click(function(){
//do something
});
$(‘.action-box #btn-sort’).mouseenter(function(){
//do something
});
/**
**more same code
*/

 

对于同二个DOM对象绑定四个事件处理函数时,attach伊芙nt是先绑定后实践,而addEventListener是先绑定先实行,这么看来attach伊夫nt绑定的风云不吻合程序猿开辟的思绪啊,作者后绑定的事件管理函数却要先举办,完全不遵守“先来后到”的老老实实,搞得莫名其妙,看来这些attach伊夫nt在不远的将来应该会被淘汰。

不用夸张的说,当三个js文件过多行后,类似于地点的代码,你很难从内部发现规律。

第一大家须要先对两样的事件绑定格局之间的内存占用差别有一个清晰的认知。

 

1、可能A喜欢写#btn-add,而B喜欢写.action-box #btn-add来作为接纳符。
2、堆砌着众多例外种类事件,未有一个先后可言
3、未有行使到我们正好所讲的运用事件冒泡来做事件绑定

 

attach伊夫nt在事件绑定的事件还必须抬高那一个“on”,借使不理会的话很轻巧忘记增添,那几个“on”关键字恐怕是从那种原始写法中尚无进步完全吧。

图片 4

对于品质的辨析将应用Chrome的Developer Tools。

 

改进 咱俩来一步步更进一步一下事先的JS代码

 

当明白完了那多少个函数的界别后,大家得以写一些协助进行方法用来包容IE和其余的浏览器

Version 1

Profiles –> Take Heap
Snapshot,用那么些工具大家能够看看Javascript所攻下的内存,能够对品质难点张开解析。

 

复制代码 代码如下:

 

复制代码

$(‘.action-box’).on(‘click’, ‘#btn-add’, function(){
  //do something
});
$(‘.action-box’).on(‘click’, ‘#btn-delete’, function(){
  //do something
});

 

function addEvent(elm, evType, fn, useCapture) 

固然使用了平地风波冒泡,然而感到还是有一些累赘,.action-box出现一再,认为不安适,让大家承袭创新

 

{

Version 2

DEMO HTML

    if (elm.addEventListener) 

复制代码 代码如下:

 

    {

$(‘.action-box’).on(‘click’, ‘#btn-add, #btn-delete’, function(){
  if($(this).attr(‘id’) == ‘btn-add’){
    //do something
  } else{
    //do something
  }
});

<html> 

        elm.addEventListener(evType, fn, useCapture); //
W3C规范,根据useCapture来推断是冒泡事件大概捕获事件

深感比刚刚多数了,可是照旧须要看清成分来做出相应的管理,能承受,但不周详。

  <head> 

        return true;

灵感

    <script type=”text/javascript”> 

    }

首先看一下css的升高版本sass对于css语法上面的改正

      $(function(){  

    else if (elm.attachEvent) 

复制代码 代码如下:

        $(‘#btn-add’).click(function(){  

    {

/*bed css code*/
.action-box { width: 100%; color: #000; }
#btn-add { color: blue; }
#btn-delete { color: red; }

          $(‘.ul’).prepend(‘<li><a
href=”javascript:;”>text</a></li>’);  

        var r = elm.attachEvent(‘on‘ + evType,
fn);//IE5+,仅协理冒泡事件

/*good css code*/
.action-box { width: 100%; color: #000; }
  .action-box #btn-add { color: blue; }
  .action-box #btn-delete { color: red; }

        });  

        return r;

/*sass code*/
.action-box {
  width: 100%;
  color: #000;
  #btn-add {
    color: blue;
  }
  #btn-delete {
    color: red;
  }
}

      });  

    }

小编们能够在 good css code 和 sass code
从中能够能够很明显著了的收看文书档案结构:.action-box 上面有四个button。

    </script> 

    else 

那是不是能让sass这种代码结构选拔到js中来吗?答案当然是足以。

  </head> 

    {

复制代码 代码如下:

  <body> 

        elm[‘on’ + evType] = fn;//DOM事件

$(‘.action-box’).coffee({
  click: {
    ‘#btn-add’: function(){
      //do something
    },
    //那是是援助jQuery的’:last / [attr] / :eq(0)’等措施的
    ‘#btn-delete’: function(){
      //do something
    }
  },
  mouseenter: {
    ‘#btn-sort’: function(){
      //do something
    }
  }
});

    <button id=”btn-add”>Create Element</button> 

    }

心爱这种协会吧?

    <ul class=”ul”> 

}

1、清晰明了的文书档案结构
2、运用事件冒泡,有效收缩内部存款和储蓄器的占用
3、第超等级用事件名称来划分
4、第二品级的品质名相当于选择符。

      <li><a href=”javascript:;”>text</a></li> 

复制代码

coffee函数的源码

      <!– 2000 line… –> 

本来那几个艺术也会有坏处,在IE8跟此前版本下,依然事件的后绑定先进行且间接都以冒泡事件。恐怕利用如下的秘籍:

复制代码 代码如下:

      <li><a href=”javascript:;”>text</a></li> 

 

$.fn.coffee = function(obj){
  for(var eName in obj)
    for(var selector in obj[eName])
      $(this).on(eName, selector, obj[eName][selector]);
}

    </ul> 

 

闲谈数行代码,就足以做成贰个很精粹的语法糖

  </body> 

复制代码

Enjoy yourself !  ^_^

</html> 

var addEvent = (function () {

作者: CoffeeDeveloper

Method 1

            if (document.addEventListener) {

您或者感兴趣的文章:

  • jQuery事件绑定on()、bind()与delegate()
    方法详解
  • jQuery事件绑定与解除绑定完毕方式
  • jQuery事件绑定和嘱托实例
  • jQuery事件绑定.on()简要概述及应用
  • jQuery事件绑定on()与弹窗达成代码

 

                return function (el, type, fn) {

$(function(){  

                    if (el.length) {

    $(‘.ul a’).click(function(e){  

                        for (var i = 0; i && el.length; i++) {

        alert(‘click event’);  

                            addEvent(el[i], type, fn);

    });  

                        }

}); 

                    } else {

以下是Method 1的内部存款和储蓄器深入分析图

                        el.addEventListener(type, fn, false);

 

                    }

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图