浅谈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 相关文章推荐
JavaScript 的继承
Oct 01 Javascript
jQuery学习笔记之jQuery动画效果
Sep 09 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
使用Bootstrap + Vue.js实现添加删除数据示例
Feb 27 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
bootstrap switch开关组件使用方法详解
Aug 22 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
javascript读取本地文件和目录方法详解
Aug 06 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 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的面试题集
2006/11/19 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
php进行支付宝开发中return_url和notify_url的区别分析
2014/12/22 PHP
JavaScript版代码高亮
2006/06/26 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
利用了jquery的ajax实现二级联互动菜单
2013/12/02 Javascript
javascript实现存储hmtl字符串示例
2014/04/25 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
浅谈JavaScript Date日期和时间对象
2014/12/29 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
2015/12/24 Javascript
js实现获取两个日期之间所有日期的方法
2016/06/17 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
js事件冒泡与事件捕获详解
2017/02/20 Javascript
利用javascript如何随机生成一定位数的密码
2017/09/22 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
详解微信小程序-获取用户session_key,openid,unionid - 后端为nodejs
2019/04/29 NodeJs
Python基类函数的重载与调用实例分析
2015/01/12 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python和ruby,我选谁?
2017/09/13 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
英国领先的游戏零售商:GAME
2019/09/24 全球购物
Brasty罗马尼亚:购买手表、香水、化妆品、珠宝
2020/04/21 全球购物
C语言基础笔试题
2013/04/27 面试题
体育教育个人自荐信范文
2013/12/01 职场文书
大学生个人简历中的自我评价
2013/12/27 职场文书
主要负责人任命书
2014/06/06 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
实用求职信模板范文
2019/05/13 职场文书
话题作文之财富(600字)
2019/12/03 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript
详解Vue的options
2021/05/15 Vue.js
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python