Sciter的事件处理汇总

最新推荐文章于 2024-08-20 22:13:00 发布

凌晨两点半`

最新推荐文章于 2024-08-20 22:13:00 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

分类专栏： sciter js 文章标签： javascript 前端 html sciter

本文链接：https://blog.youkuaiyun.com/qq_43201542/article/details/125901885

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

sciter

5 篇文章

订阅专栏

本文介绍了JavaScript中元素事件处理的不同方式，如添加监听器、一次性事件和类组件事件。重点讲解了如何通过`addEventListener`、`oneventname`函数和类组件API来优化大量元素的事件管理。同时探讨了如何在Sciter中利用组件处理子元素事件，提升代码效率和内存管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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/

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