浅谈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 相关文章推荐
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
浅谈Jquery核心函数
Jun 18 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
jQuery+formdata实现上传进度特效遇到的问题
Feb 24 Javascript
浅析AngularJS中的指令
Mar 20 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
Jul 12 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
原生JS轮播图插件
Feb 09 Javascript
在node中如何使用 ES6
Apr 22 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
Mar 15 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 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的引用计数机制
2013/06/14 PHP
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
PHP微商城开源代码实例
2019/03/27 PHP
修改或扩展jQuery原生方法的代码实例
2015/01/13 Javascript
DOM基础教程之使用DOM
2015/01/19 Javascript
nodejs事件的监听与触发的理解分析
2015/02/12 NodeJs
JavaScript AOP编程实例
2015/06/16 Javascript
学习使用jquery iScroll.js移动端滚动条插件
2020/03/24 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
Javascript基础学习笔记(菜鸟必看篇)
2016/07/22 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
微信小程序实现判断是分享到群还是个人功能示例
2019/05/03 Javascript
用js编写留言板
2020/03/17 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
Python调用命令行进度条的方法
2015/05/05 Python
python制作花瓣网美女图片爬虫
2015/10/28 Python
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
Python GUI编程完整示例
2019/04/04 Python
python 定时器每天就执行一次的实现代码
2019/08/14 Python
python 进程间数据共享multiProcess.Manger实现解析
2019/09/23 Python
使用Python函数进行模块化的实现
2019/11/15 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
eBay澳大利亚站:eBay.com.au
2018/02/02 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
大专生自我鉴定范文
2013/10/01 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
学校标语口号大全
2015/12/26 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
MySQL分区以及建索引的方法总结
2022/04/13 MySQL