为了使用方法和事件，首先要获取到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 object的preventDefault()方法阻止事件。
<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事件不会被触发。