原文

为了使用方法和事件,首先要获取到widget实例。

获取widget

一共有3种获取widget的方式。

jQuery的data方法

将widget的名作为参数传给jQuery的data方法。(widget都是jQuery插件)。

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() {
// 创建widget实例
$("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] }); // 获取widget实例
var autoComplete = $("#animal").data("kendoAutoComplete"); console.log(autoComplete);
});
</script>

getKendo* 方法

还可以使用getKendo<WidgetName>方法来获取widget。

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() {
// 创建widget实例
$("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] }); // 获取widget实例
var autoComplete = $("#animal").getKendoAutoComplete(); console.log(autoComplete);
});
</script>

The JavaScript Method Syntax

        <p>Animal: <input id="animal" /></p>

        <script>
$(function() {
$("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] }); var autoComplete = $("#animal").data("kendoAutoComplete"); // focus the widget
autoComplete.focus();
});
</script>

这不就是第一种方法吗???

处理widget事件

在初始化的时候绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() { $("#animal").kendoAutoComplete({
dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
change: function(e) {
console.log("change event handler");
}
}); });
</script>

在初始化之后去绑定事件

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() { $("#animal").kendoAutoComplete({
dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
}); // ... var autocomplete = $("#animal").data("kendoAutoComplete"); // 这种方式绑定的事件处理器,事件每次触发都会执行
autocomplete.bind("change", function(e) {
console.log("change event handler");
}); // 这种方式绑定的事件处理器,只有事件首次被触发才会执行
autocomplete.one("open", function(e) {
console.log("open event handler");
}); });
</script>

事件处理器参数

每个widget都会传递一个参数给事件处理器,这个参数被称为event object。所有的event object都有一个sender字段,它指向触发事件的widget实例。

不支持传递额外的自定义事件参数给事件处理器。

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() { $("#animal").kendoAutoComplete({
dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ],
open: function(e) {
var autocomplete = e.sender;
}
}); });
</script>

阻止事件

使用event objectpreventDefault()方法阻止事件。

    <p>Animal: <input id="animal" /></p>

    <script>
$(function() {
$("#animal").kendoAutoComplete({
dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ]
}); var autoComplete = $("#animal").data("kendoAutoComplete"); // prevent the autocomplete from opening the suggestions list
autoComplete.bind('open', function(e) {
e.preventDefault();
});
});
</script>

解绑事件

为了解绑事件,要保持一个到事件处理器函数的引用,并将其传到unbind方法中去。如果调用unbind方法时没有传递任何参数,那么会解除所有这个事件的handler。

    <p>Animal: <input id="animal" /></p>

    <button id="unbindButton">Unbind event</button>

    <script>
$(function() {
var handler = function(e) { console.log(e); };
$("#animal").kendoAutoComplete({ dataSource: [ "Ant", "Antilope", "Badger", "Beaver", "Bird" ] }); var autoComplete = $("#animal").data("kendoAutoComplete"); autoComplete.bind("open", handler); $("#unbindButton").on("click", function() {
autoComplete.unbind("open", handler);
});
});
</script>

限制

当直接调用方法时,对应的event不会触发。例如,如果通过API直接调用PanleBar的select方法,那么select事件不会被触发。

05-08 15:28
查看更多