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


Posted in Javascript onJuly 29, 2015

既然是一套完整的前端框架那就一定有提供事件绑定相关的支持。其实在之前的例子中就使用过事件绑定,只是没有单独系统地介绍过而已。 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 相关文章推荐
js类中获取外部函数名的方法与代码
Sep 12 Javascript
javascript深入理解js闭包
Jul 03 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
jquery实现倒计时功能
Dec 28 Javascript
jQuery 移动端artEditor富文本编辑器
Jan 11 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
vue 修改 data 数据问题并实时显示的方法
Aug 27 Javascript
浅谈JavaScript闭包
Apr 09 Javascript
详解微信小程序-canvas绘制文字实现自动换行
Apr 26 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
探讨JavaScript中的Rest参数和参数默认值
Jul 29 #Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 #Javascript
js数组去重的方法汇总
Jul 29 #Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
Jul 29 #Javascript
JavaScript中的cacheStorage使用详解
Jul 29 #Javascript
JavaScript中数组继承的简单示例
Jul 29 #Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 #Javascript
You might like
php中mkdir()函数的权限问题分析
2016/09/24 PHP
&amp;lt;script defer&amp;gt; defer 是什么意思
2009/05/10 Javascript
Javascript 实现TreeView CheckBox全选效果
2010/01/11 Javascript
js实现俄罗斯方块小游戏分享
2014/01/31 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
js简单抽奖代码
2015/01/16 Javascript
javascript 继承学习心得总结
2016/03/17 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
深入学习JavaScript中的bom
2019/05/27 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
javascript实现时钟动画
2020/12/03 Javascript
[03:18]DOTA2亚洲邀请赛小组赛第一日 RECAP赛事回顾
2015/01/30 DOTA
PyMongo安装使用笔记
2015/04/27 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
深入浅析python中的多进程、多线程、协程
2016/06/22 Python
Pycharm学习教程(2) 代码风格
2017/05/02 Python
利用python循环创建多个文件的方法
2018/10/25 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
详解Html5微信支付爬坑之路
2018/07/24 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
String、StringBuffer、StringBuilder有区别
2015/09/18 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
工作态度检讨书
2014/02/11 职场文书
股权转让协议书
2014/04/12 职场文书
文明城市标语
2014/06/16 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
领导班子四风问题个人对照检查材料
2014/10/04 职场文书
结婚幸福感言
2015/08/01 职场文书
爱国主题班会教案
2015/08/14 职场文书
2016年教师学习教师法心得体会
2016/01/20 职场文书
八年级数学教学反思
2016/02/17 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL