avalon2學習教程10事件綁定

時間 2019-12-06

標籤 avalon2 avalon 學習教程事件綁定简体版

原文原文鏈接

avalon2的事件指令，比起avalon1來強大多了。html

首先其內部是使用事件代理實現的，能冒泡的事件所有綁定document上。只有舊式IE的幾個事件還綁定在原元素上。jquery

其次，this直接指向vmodel，元素節點則經過e.target獲取。若是要傳入多個參數，須要指定事件對象，仍是與原來同樣使用$eventchrome

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

再次，添加了一些專門針對事件回調的過濾器瀏覽器

對按鍵進行限制的過濾器esc，tab，enter，space，del，up，left，right，down緩存
對事件方法stopPropagation, preventDefault進行簡化的過濾器stop, preventoop

最後，對事件回調進行緩存，防止重複生成。ui

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

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

avalon的事件綁定支持多投事件機制（同一個元素能夠綁定N個同種事件，如ms-click=fn, ms-click-1=fn2, ms-click-2=fn3）firefox

<!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綁定來處理。

相關標籤/搜索

每日一句

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