当前位置: 首页 > 工具软件 > Sciter > 使用案例 >

Sciter的事件处理汇总

史英飙
2023-12-01

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/

※※※ 允许定义来自 组件 子元素 的事件处理程序。该组件可以提供处理事件的方法,而无需向单个子级添加处理程序

 类似资料: