浅谈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静态方法与实例方法分析
Jul 04 Javascript
jquery 按键盘上的enter事件
May 11 Javascript
jQuery中parents()和parent()的区别分析
Oct 28 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
简单谈谈CommonsChunkPlugin抽取公共模块
Dec 31 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
Nov 11 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
webpack + vue 打包生成公共配置文件(域名) 方便动态修改
Aug 29 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
探讨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
快速配置PHPMyAdmin方法
2008/06/05 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
PHP检测数据类型的几种方法(总结)
2017/03/04 PHP
PHP日期和时间函数的使用示例详解
2020/08/06 PHP
Javascript学习笔记二 之 变量
2010/12/15 Javascript
TextArea设置MaxLength属性最大输入值的js代码
2012/12/21 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
解析页面加载与js函数的执行 onload or ready
2013/12/12 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
2017/03/27 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
写给vue新手们的vue渲染页面教程
2017/09/01 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
详解JS预解析原理
2020/06/16 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
[01:14]2019完美世界城市挑战赛(秋季赛)全国总决赛精彩花絮
2020/01/08 DOTA
利用python将pdf输出为txt的实例讲解
2018/04/23 Python
运行django项目指定IP和端口的方法
2018/05/14 Python
python add_argument()用法解析
2020/01/29 Python
如何使用selenium和requests组合实现登录页面
2020/02/03 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
Under Armour安德玛荷兰官网:美国高端运动科技品牌
2019/07/10 全球购物
医学生个人求职信范文
2014/02/07 职场文书
新教师工作感言
2014/02/16 职场文书
大学社团计划书
2014/05/01 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
党校学习个人总结
2015/02/15 职场文书
2015年党员个人自我评价
2015/03/03 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers