Extjs学习笔记--（五，事件）

Extjs中事件包括浏览器事件（单机按钮，鼠标移动等触发）和内部事件（组件之间的联动）

绑定浏览器事件的过程Ext.EventManager

要为元素绑定事件，通常会使用EventManager.on方法

Ext.EventManager.on(el,eventname,fn[,scope,options])

el要绑定的事件元素，可以为元素的id，element对象获htmlelement对象

eventname一般情况下是事件的名称，但是在一次定义多个事件时可以是一个对象，当eventname是事件名称时，fn就是事件要触发的函数，当eventname是对象时fn会被忽略

scope；作用域

options：事件触发函数的配置对象

Extjs学习笔记--（五，事件）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="Extjs/resources/css/ext-all.css" rel="stylesheet" />
    <script src="Extjs/bootstrap.js"></script>
    <script src="Extjs/locale/ext-lang-zh_CN.js"></script>
</head>
    <body>
        <input type="text" id="input1" value="请输入"/>
        <input type="text" id="input2" value="请输入"/>
        <input type="text" id="input3" value="请输入"/>
        <script type="text/javascript">

            var focus=function(e, el) {
                if (el.value == '请输入')
                    el.value = '';
            }
            var blur = function (e, el) {
                if (el.value == '')
                    el.value = '请输入';
            }
            //单项绑定事件
            Ext.EventManager.on("input1", "focus", focus);
            Ext.EventManager.on("input1", "blur", blur);
            //多项同时绑定
            Ext.EventManager.on("input2", {
                focus: focus,
                blur:blur
            })
            Ext.EventManager.on("input3", {
                focus: { fn: focus },
                blur: { fn: blur }
            })

            </script>

    </body>
</html>

View Code