Javascript将函数添加到阴影根中的自定义元素

时间:2015-03-13 11:31:34

标签: javascript shadow custom-element

我正在使用影子根编写应用程序,我发现自己使用shadow.children[i].addEventListener('click', fn);这么多,所以我尝试创建一个自定义函数来缩写它,所以我写道:

var $shadow = function(shadow, el, fn){
  console.log(shadow);
  console.log(el);
var children = shadow.children;
for (var i = 0; i < children.length; i++) {
    var child = children[i];
    console.log('child '+child.id+', el '+el);
       if (child.id === el) {
         console.log('match'); 
         return shadow.children[i].addEventListener('click', fn);
         break;
      }
  }
}

并从自定义元素中调用它;

$shadow(shadow, 'd', alert('yap!'));

问题是一旦元素被调用就直接执行的函数,而不是等待&#34; listen&#34;点击&#34;点击&#34;对指定元素的操作。

有什么想法如何修复它?

1 个答案:

答案 0 :(得分:0)

var $shadow = function(shadow, el, fn){
  console.log(shadow);
  console.log(el);
var children = shadow.children;
    console.log(children.length);
for (var i = 0; i < children.length; i++) {
    var child = children[i];
    console.log(children[i]);
    console.log('child '+child.id+', el '+el);
       if (child.id === el) {
         console.log('match'); 
           return shadow.children[i].addEventListener('click', function(){
               console.log(fn);
               fn();
           });
         break;
      }
  }
}
$shadow(shadow, 'd', function(){alert("yap");});

我知道你想在这个地址做..

[http://jsfiddle.net/p4fcoftL/]

我希望你找到工作