迷你MVVM框架 avalonjs 學習教程1四、事件綁定

時間 2019-11-14

標籤迷你 mvvm 框架 avalonjs 學習教程事件綁定简体版

原文原文鏈接

以前的章節許多示例代碼也或多或少地展現瞭如何使用ms-click來綁定事件了。能直接在模板上綁定是事件，這也是靜態模板與動態綁定的一大區別。ms-click不是簡單的onclick的別名，它在內部屏蔽了瀏覽器的差別，而且對許多瀏覽器暫時不支持的事件作了兼容處理。javascript

總的來講，事件綁定是使用ms-on-☆綁定來實現，但avalon也提供了許多快捷方式，讓用戶能直接以ms-eventName調用那些經常使用事件，以下html

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

事件綁定的屬性值的格式，必須是函數名或函數名後＋小括號（小括號裏面添加參數）。jquery

avalon的事件綁定支持多投事件機制（同一個元素能夠綁定N個同種事件，如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3），支持傳參（默認第一個參數爲事件對象，若是第一個位置被佔了，咱們能夠在其餘位置使用$event引用事件對象。）chrome

<!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="avalon.js" ></script>
        <script>
            var model = 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) {
                    model.status = e.type
                },
                field: "",
                check: function(e) {
                    model.field = this.value + "  " + e.type
                },
                submit: function() {
                    var data = model.$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-each-el="array" >
                <p ms-click="loopClick(el, $event)">{{el}}</p>
            </div>
            <button ms-click="submit">點我</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="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="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="avalon.js"></script>
        <script>
            avalon.define({
                $id: "test",
                fn1: function(e) {
                    console.log(e.type)
                    console.log(this)
                },
                fn2: function(e) {
                    console.log(e.type)
                    console.log(this)
                }
            })
        </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="avalon.js"></script>
        <script>
            var model = avalon.define({
                $id: "test",
                text: "",
                callback: function(e) {
                    model.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綁定來處理。oop

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。