avalon2学习教程10事件绑定_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

avalon2学习教程10事件绑定_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 21, 2016 am 08:51 AM

avalon2的事件指令，比起avalon1来强大多了。

首先其内部是使用事件代理实现的，能冒泡的事件全部绑定document上。只有旧式IE的几个事件还绑定在原元素上。

其次，this直接指向vmodel，元素节点则通过e.target获取。如果要传入多个参数，需要指定事件对象，还是与原来一样使用$event

<div ms-click='@fn(111,222,$event)'>{{@ddd}}</div>

再次，添加了一些专门针对事件回调的过滤器

对按键进行限制的过滤器esc，tab，enter，space，del，up，left，right，down
对事件方法stopPropagation, preventDefault进行简化的过滤器stop, prevent

最后，对事件回调进行缓存，防止重复生成。

事件绑定是使用ms-on-☆绑定来实现，但avalon也提供了许多快捷方式，让用户能直接以ms-eventName调用那些常用事件，如下

animationend、 blur、 change、 input、 click、 dblclick、 focus、 keydown、 keypress、 keyup、 mousedown、 mouseenter、 mouseleave、 mousemove、 mouseout、 mouseover、 mouseup、 scan、 scroll、 submit

avalon的事件绑定支持多投事件机制（同一个元素可以绑定N个同种事件，如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3）

<!DOCTYPE HTML><html>    <head>        <title>ms-on</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="./dist/avalon.js" ></script>        <script>            var vm = avalon.define({                $id: "test",                firstName: "司徒",                array: ["aaa", "bbb", "ccc"],                argsClick: function(e, a, b) {                    alert([].slice.call(arguments).join(" "))                },                loopClick: function(a, e) {                    alert(a + "  " + e.type)                },                status: "",                callback: function(e) {                    vm.status = e.type                },                field: "",                check: function(e) {                    vm.field = e.target.value + "  " + e.type                },                submit: function() {                    var data = vm.$model                    if (window.JSON) {                        setTimeout(function() {                            alert(JSON.stringify(data))                        })                    }                }            })        </script>    </head>    <body>        <fieldset ms-controller="test">            <legend>有关事件回调传参</legend>            <div ms-mouseenter="@callback" ms-mouseleave="@callback">{{@status}}<br/>                <input ms-on-input="@check"/>{{@field}}            </div>            <div ms-click="@argsClick($event, 100, @firstName)">点我</div>            <div ms-for="el in @array" >                <p ms-click="@loopClick(el, $event)">{{el}}</p>            </div>            <button ms-click="@submit" type="button">点我</button>        </fieldset>    </body></html>

<!DOCTYPE HTML><html>    <head>        <title>ms-on</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="./dist/avalon.js" ></script>        <script>            var count = 0            var model = avalon.define({                $id: "multi-click",                str1: "1",                str2: "2",                str3: "3",                click0: function() {                    model.str1 = "xxxxxxxxx" + (count++)                },                click1: function() {                    model.str2 = "xxxxxxxxx" + (count++)                },                click2: function() {                    model.str3 = "xxxxxxxxx" + (count++)                }            })        </script>    </head>    <body>        <fieldset>            <legend>一个元素绑定多个同种事件的回调</legend>            <div ms-controller="multi-click">                <div ms-click="@click0" ms-click-1="@click1" ms-click-2="@click2" >请点我</div>                <div>{{@str1}}</div>                <div>{{@str2}}</div>                <div>{{@str3}}</div>            </div>        </fieldset>    </body></html>

<!DOCTYPE HTML><html>    <head>        <title>ms-on</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="./dist/avalon.js" ></script>        <script>            avalon.define({                $id: "xxx",                fn: function() {                    console.log("11111111")                },                fn1: function() {                    console.log("2222222")                },                fn2: function() {                    console.log("3333333")                }            })        </script>    </head>    <body>        <div ms-controller="xxx"              ms-on-mouseenter-3="@fn"             ms-on-mouseenter-2="@fn1"             ms-on-mouseenter-1="@fn2"             style="width:100px;height:100px;background: red;"             >        </div>    </body></html>

avalon已经对ms-mouseenter, ms-mouseleave进行修复，可以在这里与这里了解这两个事件。到chrome30时，所有浏览器都原生支持这两个事件。

<!DOCTYPE html> <html>    <head>        <title>ms-mouseenter, ms-mouseleave</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="./dist/avalon.js"></script>        <script>            avalon.define({                $id: "test",                fn1: function(e) {                    console.log(e.type)                    console.log(e.target)                },                fn2: function(e) {                    console.log(e.type)                    console.log(e.target)                }            })        </script>    </head>    <body ms-controller="test">        <div ms-mouseenter="@fn1" ms-mouseleave="@fn2" style="background: red;width:200px;height: 200px;padding:20px;">            <div style="background: blue;width:160px;height: 160px;margin:20px;"></div>        </div>    </body></html>

最后是mousewheel事件的修改，主要问题是出现firefox上，它死活也不愿意支持mousewheel，在avalon里是用DOMMouseScroll或wheel实现模拟的。我们在事件对象通过wheelDelta属性是否为正数判定它在向上滚动。

<!DOCTYPE html><html>    <head>        <title>ms-on-mousewheel</title>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge" />         <script src="./dist/avalon.js"></script>        <script>            var vm = avalon.define({                $id: "test",                text: "",                callback: function(e) {                    vm.text = e.wheelDelta + "  " + e.type                }            })        </script>    </head>    <body ms-controller="test">        <div ms-on-mousewheel="@callback" id="aaa" style="background: red;width:200px;height: 200px;">            {{@text}}        </div>    </body></html>

此外avalon还对input，animationend事件进行修复，大家也可以直接用avalon.bind, avalon.fn.bind来绑定这些事件。但建议都用ms-on绑定来处理。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

HTML與CSS vs. JavaScript：比較概述Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：是編程語言還是其他？Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

HTML：建立網頁的結構Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

從文本到網站：HTML的力量Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

了解HTML，CSS和JavaScript：初學者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：構建Web內容Apr 11, 2025 am 12:12 AM

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容，使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTML和代碼：仔細觀察術語Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代碼” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代碼”代碼“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract