浅谈JavaScript的Polymer框架中的事件绑定

2019-08-29 09:09栏目:WRB前端

浅谈JavaScript的Polymer框架中的事件绑定,javascriptpolymer

既是是一套完整的前端框架那就自然有提供事件绑定相关的支撑。其实在前面包车型地铁事例中就动用过事件绑定,只是未有独自系统地介绍过而已。 Polymer 的平地风波观念是对事件管理函数尽恐怕地都命名并定义到 VM 上,小编觉着这几个做法是在有意地把 VM 这一层隔开出来。
  上面那么些例子给开关和其所在的 Shadow DOM Host 都绑定了个事件,点击开关后三个事件都会触发。
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   listeners: {
    'click': 'clickHandler'
   },
   clickHandler: function(e) {
    console.log(e.target);
   } 
  });
 </script>
</dom-module>

<demo-test></demo-test>

  listeners 是一个用来给当下 Shadow DOM Host 增添事件的(固然笔者感觉它没卵用)。直接在 DOM 成分上的 on-* 属性也能够给有个别成分绑定事件。这一个办法绑定的都以 DOM 事件,事件触发时传递过去的靶子正是原生的平地风波指标。
  除了以上那些直接当做品质设置的风浪绑定方式之外,大家还足以动态地绑定事件。
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 内置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

  Polymer 总是期待大家对事件管理函数命名,比方其自带的 listen 方法对成分绑定的不是三个事件管理函数,而是贰个事件管理函数名。或然那样做的指标是将 VM 和 M 完全隔开分离开来,不过自个儿并不欣赏那样。不过 Shadow DOM Host 本身也是三个原生对象,所以直接选用原生的 addEventListener 也是能够的,然则既然框架内有提供,小编也不引入写原生。只怕是本人的合计太 low 的,无法明白 Polymer 如此设计的良苦用心吧?

既然是一套完整的前端框架那就必定有提供事件绑定相关的辅助。其实在事先的例子...

既然如此是一套完整的前端框架这就必将有提供事件绑定相关的支撑。其实在此前的例证中就利用过事件绑定,只是未有单身系统地介绍过而已。 Polymer 的事件观念是对事件处理函数尽大概地都命名并定义到 VM 上,小编认为这几个做法是在有意识地把 VM 这一层隔开分离出来。
  下边这一个例子给按键和其所在的 Shadow DOM Host 都绑定了个事件,点击按键后八个事件都会触发。
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button on-click="clickHandler">求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   listeners: {
    'click': 'clickHandler'
   },
   clickHandler: function(e) {
    console.log(e.target);
   } 
  });
 </script>
</dom-module>

<demo-test></demo-test>

  listeners 是三个用来给当下 Shadow DOM Host 加多事件的(就算我以为它没卵用)。直接在 DOM 成分上的 on-* 属性也能够给某些成分绑定事件。那个点子绑定的都以 DOM 事件,事件触发时传递过去的靶子便是原生的平地风波指标。
  除了上述这几个一贯作为质量设置的风云绑定格局之外,大家还是可以动态地绑定事件。
运行

<script> var Polymer = { dom: 'shadow' }; </script>
<base href="http://www.web-tinker.com/share/" />
<link rel="import" href="polymer/polymer.html" />

<dom-module id="demo-test">
 <template>
  <button>求点击 (=~ω~=)</button>
 </template>
 <script>
  Polymer({
   is: 'demo-test',
   ready: function() {
    // Polymer 内置
    this.listen(this, 'click', 'clickHandler');
    // 原生
    this.addEventListener('click', this.clickHandler);
   },              
   clickHandler: function(e) {     
    console.log(e);
   }
  });
 </script>
</dom-module>

<demo-test></demo-test>

  Polymer 总是期待我们对事件管理函数命名,举例其自带的 listen 方法对成分绑定的不是叁个事件管理函数,而是一个事件管理函数名。大概那样做的目标是将 VM 和 M 完全隔绝开来,不过自身并不希罕那样。然而 Shadow DOM Host 自身也是叁个原生对象,所以一贯动用原生的 addEventListener 也是足以的,可是既然框架内有提供,我也不推荐写原生。大概是笔者的思辨太 low 的,不能明白 Polymer 如此设计的良苦用心吧?

你只怕感兴趣的篇章:

  • JavaScript的Polymer框架中dom-repeat与VM的有关操作
  • 浅谈JavaScript的Polymer框架中的behaviors对象
  • 详解JavaScript的Polymer框架中的通告交互

版权声明:本文由威尼斯人app发布于WRB前端,转载请注明出处:浅谈JavaScript的Polymer框架中的事件绑定