magix中的2种事件绑定方式

张金宝发布于2019-08-29 11:04 / 2837人阅读

摘要：可操作与采用与文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。这种方案优于通过选择器查找到节点动态绑定事件。

可操作html与js

magix采用html与js文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。
如下html

我们在阅读上述html片断时，可直观的看到内容为save的button绑定了click事件，且调用的是save方法

再如下js

render: function() {
    //render codes
},
"save": function(e) {
    console.log("save clicked");
}

我们在阅读时可以知道save这个函数是为click事件服务的，这样在分离阅读它们时，能够快速知道它们是做什么用的，不需要来回切换js和html才能够知道事件的绑定。

这种方案优于通过选择器查找到节点动态绑定事件。

全局与插件

前述方案仅适用于能通过html标签绑定，但有些全局对象如window和document并没有对应的html标签，所以这种要如何绑定？

再如我们开发一个插件，比如列表前面带checkbox，最顶部有一个全选的按钮，通过点击全选按钮可以快速选中这些checkobx，html结构可能如下


    <%for(var i=0;i<100;i++){%>
    
    <%}%>

我们希望开发一个js插件，用于这个全选功能，如示例中的table增加一个mx-view属性值为coms/select/all

当我们在实现这样的插件时，用于html结构是别的开发者提供的，做为插件提供方是无法操作html标签结构的，所以这时候我们如何绑定事件？

这2种情况就直接使用类库的事件绑定机制即可，以jQuery为例

init: function() {
    $(window).on("scroll", function() {
        //scroll codes
    });
}

这也是 https://github.com/thx/magix/... 这个不再支持的原因。

总结就是：可操作html的，用magix提供的方案，否则就用类库的方案绑定

欢迎试用magix，区块化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
欢迎star与fork

云服务器 GPU云服务器几种方式 ddos三种攻击方式序列化两种方式 js继承的几种方式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111408.html

magix中的2种事件绑定方式

摘要：可操作与采用与文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。这种方案优于通过选择器查找到节点动态绑定事件。可操作html与js magix采用html与js文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。如下html save 我们在阅读上述html片断时，可直观的...

zxhaaa 2019-08-01 15:34 评论0 收藏0
magix中的2种事件绑定方式

摘要：可操作与采用与文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。这种方案优于通过选择器查找到节点动态绑定事件。可操作html与js magix采用html与js文件分离的写法，当我们在阅读时，希望能直观的看出节点绑定了哪些事件或这个函数是为哪种事件服务的。如下html save 我们在阅读上述html片断时，可直观的...

Scorpion 2019-08-22 10:35 评论0 收藏0
magix，阿里妈妈前端页面区块化利器

摘要：前端工程师就是在重复使用组装这些区块标签形成最终的需求页面。这是最原子的区块，我们要达到想要的页面效果，就得不停的重复嵌套这些区块。这些区块通常是由多个标签组合而成的。这些区块应该很容易被复用。转载请注明出处: https://github.com/thx/magix/... 什么是区块其实html标签就是区块，比如 div span a等标签。前端工程师就是在重复使用、组装这些区...

wmui 2019-08-22 11:01 评论0 收藏0
识别滚动条上的mousedown mouseup事件

摘要：当用户鼠标在滚动条上按下的时候，我们可以假设他她正在浏览网页内容，那么这个时候好的用户体验就不能让滚动条再自动滚动了。为了实现这个功能，可能大家首先会想到的就是和事件了。转载请注明出处：https://github.com/xinglie/xi... 网页内容区域自动滚动，滚动条会随着内容的增加自动往下滚动。当用户鼠标在滚动条上按下的时候，我们可以假设他（她）正在浏览网页内容，那么...

xiaokai 2019-08-22 10:34 评论0 收藏0
Magix.Cache介绍

摘要：我们简单测试下彳刂接下来我们要考虑一但缓存资源数超出了我们规定的时，我们要清理掉不常用的资源。是一个区块管理框架，项目地址在这里区块介绍在这里区块介绍转载请注明出处：https://github.com/thx/magix/... 在前端开发过程中，我们经常会在内存中缓存一些数据，其实javascript的缓存比较简单，只需要声明一个变量或把一些数据挂到某个对象上即可，比如我们要实现...

CatalpaFlat 2019-08-29 11:05 评论0 收藏0