폴리머로 이벤트 라우팅하기

Question

polymer을 사용하여 버튼을 감 쌉니다.

HTML :

<polymer-element name="sp-button" attributes="active"> 
    <template> 
    <link rel="stylesheet" href="sp-button.css"> 
    <button type="button"><content></content></button> 
    </template> 
    <script src="sp-button.js"></script> 
</polymer-element> 

JS :

Polymer('sp-button', { 
    active: false, 
    activeChanged: function() { 
    console.log('active ' + this.active); 
    } 
}); 

나는 이벤트를 클릭하거나 이벤트를 가져을 듣고 그 폴리머 요소의 사용을 허용하는 방법을 모르겠어요. 또한, 두 개의 단추가 해당 중합체 요소에 랩핑되어있는 경우. 당신의 요소의

Answer 1

사용자는 일반 HTML 요소와 같은 설정 리스너 수 : 폴리머 요소에서

var button = document.querySelector('sp-button'); 
button.addEventListener('click', function(e) { 
    alert('from outside'); 
});       

은 또한, on-click를 사용하여 버튼의 클릭 이벤트를 캡처 그것으로 흥미로운 작업을 수행 할 수 있습니다/또는 화재 다른 이벤트 :

<button on-click="clickHandler"><content>Button text</content></button> 
... 
clickHandler: function(e, detail, sender) { 
    alert('from inside'); 
    this.fire('insideclick', {msg: 'from inside'}); 
} 

전체 데모 : http://jsbin.com/uqubAGO/1/edit

Answer 2

두 버튼의 경우는 뭔가 사장님을 보일 것이다 전자이 :

<polymer-element name="sp-button" attributes="active"> 
    <template> 
    <link rel="stylesheet" href="sp-button.css"> 
    <button type="button" on-click="onSendClick">Send</button> 
    <button type="button" on-click="onReceiveClick">Receive</button> 
    </template> 
    <script src="sp-button.js"></script> 
</polymer-element> 

JS :

Polymer('sp-button', { 
    //... 
    onSendClick: function() { 
    this.fire('send'); 
    }, 
    onReceiveClick: function() { 
    this.fire('receive'); 
    } 
}); 

그리고 당신이 또는 addEventListener 사용하여 외부에서 해당 도메인 별 이벤트를 수신 할 수있다 :이 방법의 장점은 것입니다

var button = document.querySelector('sp-button'); 
button.addEventListener('send', function(e) { 
    //... 
}); 
button.addEventListener('receive', function(e) { 
    //... 
}); 

을 사용자가 단추를 클릭하여 send 이벤트가 발생하는 구현 세부 사항을 숨 깁니다. 지금까지 sp-button 요소의 사용자와 관련하여 버튼 클릭, 드롭 다운 선택, 마우스를 가리 키거나 그 원인이 될 수있었습니다. 사용자가 관심을 갖는 것은 공개 API입니다. 외부 세계가 해당 조치를 취하기를 원하면 요소가 send 이벤트와 receive 이벤트를 실행합니다.

Answer 3

클릭 이벤트를 catch하고 새로운 이벤트를 전달하려는 경우 클릭 이벤트 전파를 중지하고 싶을 수 있습니다.