1、特定元素的事件处理
(1)element.addEventListener(eventName, handler[,options])
(2)element.on eventname=function(event){}
btn.onclick = function() { console.log("button clicked"); }
(3)element.on(eventname,function(event){}) // 和第一种处理相似,可以通过事件来订阅,类似于捕获事件
element.on('^click', function(event){})
※※※ 为了订阅某一个事件,必须有可用的DOM元素实例才能将处理程序附加到它
2、 组事件处理程序
element.on('eventname', 'css-selector', function(event,mappedElement){})
```
document.on("click", "button#file-open", function() {...});
```
※※※ 为了解决大量相似元素,(一个一个的添加会占用内存和CPU周期)
3、类/组件事件处理程序
[“ on eventname at css-selector ”](event,matchedChild) {}
```
class InputSearch extends Element {
componentDidMount() { // initialize internal structure
this.content([<input.text />,
<button.lookup />]);
}
// event handlers:
["on input at input.text"]( event, input ) {
this.currentText = input.value;
}
["on click at button.lookup"]( event, button ) {
this.post( new Event("do-lookup", {details: this.currentText}) );
}
}
```
可以在 在 componentDidMount() 方法和两个从子元素接收特定事件的事件处理程序中看到初始化。
https://sciter.com/event-handling-in-sciter/
※※※ 允许定义来自 组件 子元素 的事件处理程序。该组件可以提供处理事件的方法,而无需向单个子级添加处理程序