浅谈JavaScript的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 如此设计的良苦用心吧？

赞 (0)

相关推荐

  • 浅谈JavaScript的Polymer框架中的behaviors对象

    localStorage 应是家喻户晓的?但本地存储这个家族可远不止它.以前扯过 sessionStorage,现在还有个神奇的 CacheStorage.它用来存储 Response 对象的.也就是说用来对 HTTP ,响应做缓存的.虽然 localStorage 也能做,但是它可能更专业. CacheStorage 在浏览器上的引用名叫 caches 而不是驼峰写法的 cacheStorage,它定义在 ServiceWorker 的规范中.CacheStorage 是多个 Cache 的集

  • 详解JavaScript的Polymer框架中的通知交互

    详解JavaScript的Polymer框架中的通知交互

    Polymer 以访问器属性的形式来定义有监听需求的属性(没有监听需求的属性依然是普通的属性形式定义).模板中还可以采用「::」语法来将属性双向同步于目标元素的某个事件,这就是 Angular 中双向绑定的概念,甚至还要比它更纯粹.更贴近原理. 在 properties 中定义的属性如果没有添加 notify 并且没在模板中用到,那么它就是没有监听需求的,于是就会被定义成普通属性.否则都会被定义成访问器属性,下面例子就解释了这个问题 运行 <script> var Polymer = { do

  • JavaScript的Polymer框架中dom-repeat与VM的相关操作

    各种框架都有把一个列表数据绑定到 DOM 上的功能,比如 Angular 会用 ng-repeat 来绑定.那么 Polymer 呢?其实这个级别的功能属于框架的扩展功能了,Angular 的 ng-repeat 也只是个 Directive 而已.Polymer 的 dom-repeat 也是这个级别的东西. 在 Polymer 中,一切都是 Directive 的概念.dom-module 用于定义模块,它本身也是一个 Directive.dom-repeat 也是,但它不是一个标签,而是一

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

    既然是一套完整的前端框架那就一定有提供事件绑定相关的支持.其实在之前的例子中就使用过事件绑定,只是没有单独系统地介绍过而已. Polymer 的事件思想是对事件处理函数尽可能地都命名并定义到 VM 上,我觉得这个做法是在有意地把 VM 这一层隔离出来. 下面这个例子给按钮和其所在的 Shadow DOM Host 都绑定了个事件,点击按钮后两个事件都会触发. 运行 <script> var Polymer = { dom: 'shadow' }; </script> <bas

  • 浅谈Python的Django框架中的缓存控制

    关于缓存剩下的问题是数据的隐私性以及在级联缓存中数据应该在何处储存的问题. 通常用户将会面对两种缓存: 他或她自己的浏览器缓存(私有缓存)以及他或她的提供者缓存(公共缓存). 公共缓存由多个用户使用,而受其他某人的控制. 这就产生了你不想遇到的敏感数据的问题,比如说你的银行账号被存储在公众缓存中. 因此,Web 应用程序需要以某种方式告诉缓存那些数据是私有的,哪些是公共的. 解决方案是标示出某个页面缓存应当是私有的. 要在 Django 中完成此项工作,可使用 cache_control 视图修

  • 浅谈JavaScript中面向对象的的深拷贝和浅拷贝

    理解深拷贝和浅拷贝之前需要弄懂一些基础概念,内存中存储的变量类型分为值类型和引用类型. 1.值类型赋值的存储特点, 将变量内的数据全部拷贝一份, 存储给新的变量. 例如:var num = 123 :var num1=num; 表示变量中存储的数字是 123.然后将数据拷贝一份,就是将 123 拷贝一份. 那么内存中有 2 个 数组;将拷贝数据赋值给 num2,其特点是在内存中有两个数据副本.这可以理解为浅拷贝. 2.引用类型的赋值. var o={name:'张三'}: var obj=o;

  • 浅谈javascript中的constructor

    constructor,构造函数,对这个名字,我们都不陌生,constructor始终指向创建当前对象的构造函数. 这里有一点需要注意的是,每个函数都有一个prototype属性,这个prototype的constructor指向这个函数,这个时候我们修改这个函数的prototype时,就发生了意外.如 function Person(name,age){ this.name = name; this.age = age; } Person.prototype.getAge = function

  • 浅谈javascript中的Function和Arguments

    javascript的Function 属性: 1.Arguments对象 2.caller 对调用单前函数的Function的引用,如果是顶层代码调用,  则返回null(firefox返回undefined).  注:只有在代码执行时才有意义 3.length 声明函数是指定的命名参数的个数(函数定义是,定义参数的个数) 4.prototype 一个对象,用于构造函数,这个对象定义的属性和方法  由构造函数创建的所有对象共享. 方法: applay() --> applay(this,[])

  • 浅谈javascript中new操作符的原理

    浅谈javascript中new操作符的原理

    javascript中的new是一个语法糖,对于学过c++,java 和c#等面向对象语言的人来说,以为js里面是有类和对象的区别的,实现上js并没有类,一切皆对象,比java还来的彻底 new的过程实际上是创建一个新对象,把新象的原型设置为构造器函数的原型,在使用new的过程中,一共有3个对象参与了协作,构造器函数是第一个对象,原型对象是二个,新生成了一个空对象是第三个对象,最终返回的是一个空对象,但这个空对象不是真空的,而是已经含有原型的引用(__proto__) 步骤如下: (1) 创建一

  • 浅谈Javascript中的函数、this以及原型

    关于函数 在Javascript中函数实际上就是一个对象,具有引用类型的特征,所以你可以将函数直接传递给变量,这个变量将表示指向函数"对象"的指针,例如: function test(message){ alert(message); } var f = test; f('hello world'); 你也可以直接将函数申明赋值给变量: var f = function(message){ alert(message); }; f('hello world'); 在这种情况下,函数申明

随机推荐