做网站有什么要求吗,中国网站设计师,互联网营销系统,怎么建网站新手入门纵观主流JS库和框架#xff0c;YUI在自定义事件方面做的尤为出色。如果需要挑出一个代表性的feature#xff0c;那么非事件默认行为莫属。 是什么 YUI自定义事件在总体上模仿了DOM事件的设计思想。DOM中的一些事件是有默认行为的#xff0c;详细见DOM3 Event - Default acti… 纵观主流JS库和框架YUI在自定义事件方面做的尤为出色。如果需要挑出一个代表性的feature那么非事件默认行为莫属。 是什么 YUI自定义事件在总体上模仿了DOM事件的设计思想。DOM中的一些事件是有默认行为的详细见DOM3 Event - Default actions and cancelable events一节。简单来说所谓默认行为是指该事件在通常情况下所表现出来的动作例如 一个链接节点的click事件默认行为是转向该链接href属性对应的地址表单的submit事件默认行为是将表单包含的数据提交给表单的action说通常情况下是因为有时开发者会在事件的回调函数中调用 e.preventDefault();来阻止默认行为的发生。 YUI自定义事件遵循了同样的思路甚至API也和DOM完全一致。 有啥用 事件默认行为本质上是一种管理事件和行为的对应关系的机制。这种机制既不像回调那样死板也不像消息那样开放。通过将通用处理逻辑作为事件默认行为满足常见需求的同时为定制化需求提供了一定开放性整体上更加灵活。 在DOM事件中和默认行为相关的场景并不少见 监听到链接的click事件时在链接地址中加入追踪参数利用默认行为跳转到新地址阻止表单submit事件默认行为改为异步提交表单提供更好的用户体验在自定义事件的应用中也会遇到一些类似的例子。例如 注册时有一些邮箱虽然是可用的但对于EDM不给力在这种情况下阻止表单项验证成功的默认行为展示建议用户使用其它邮箱的提示表单验证组件在检查表单项失败后触发failure事件对应的默认行为是在表单项下方显示错误信息。这样的处理在大部分情况下是完全OK的。不过有一天交互设计师在一个特定场景下提出所有提示都应该放在整个表单顶部得益于这种灵活的机制实现这种定制化逻辑十分轻松字符计数插件在输入变化时会默认更新字符数提示。在评价内容中有更复杂的提示逻辑和展示效果这时阻止默认行为实现定制化内容即可怎么用 下面以表单项验证组件为例展示如何使用事件默认行为。 首先创建FieldValidator组件并使其具备EventTarget的功能实现自定义事件机制 var FieldValidator function (ndField, validateFn) {var instance this;// ...
};
Y.augment(FieldValidator, Y.EventTarget);使用publish声明检查成功和失败的自定义事件主要目的是定义事件的默认行为 var FieldValidator function (ndField, validateFn) {// ...// 声明检查成功事件设置默认行为instance.publish(success, {emitFacade: true,defaultFn: function (e) {e.field.next(.tip).setHTML(ok);}});// 声明检查失败事件设置默认行为instance.publish(failure, {emitFacade: true,defaultFn: function (e) {e.field.next(.tip).setHTML(error);}});
};接下来注册表单项的focus、blur事件在blur触发时检查表单内容并触发自定义事件 var FieldValidator function (ndField, validateFn) {// ...ndField.on({focus: function (e) {ndField.next(.tip).setHTML();},blur: function (e) {if (validateFn(this.get(value))) {// 检查通过触发检查成功事件instance.fire(success, { field: ndField });} else {// 检查未通过触发检查失败事件instance.fire(failure, { field: ndField });}}});
};现在就可以使用这个组件了一般情况下我们不需要阻止默认行为下面是一个具体示例 // 检查邮箱
new FieldValidator(Y.one([nameemail]), function (value) {return /^(\w)(\.\w)*(\w)((\.\w))$/.test(value);
});一切看起来都很美直到有一天你接到一个需求Yahoo邮箱在检查通过时需要展示EDM不给力的提示这时候默认行为就可以来拯救你了 var validator new FieldValidator(Y.one([nameemail]), function (value) {return /^(\w)(\.\w)*(\w)((\.\w))$/.test(value);
});
validator.on(success, function (e) {if (e.field.get(value).indexOf(yahoo.com) ! -1) {// 阻止默认行为e.preventDefault();// 定制化行为e.field.next(.tip).setHTML(换个邮箱吧yahoo.com邮箱收不到优惠通知哦);}
});在success事件的回调中通过阻止默认行为不再执行提示内容为OK的默认逻辑而是切换成判断雅虎邮箱并给出特定提示的定制化逻辑。 完整代码展示请移步JSFiddle。 要注意 一个好的idea最容易被滥用。默认行为不是万能药只适合一些这样的场景 需要通过事件进行消息广播。如果callback就可以解决问题那么明智之举是使用callback存在定制化需求的预期即有些情况下需要中止默认行为的发生换之以定制化行为参考 DOM3 Event - Default actions and cancelable eventsYUI EventTarget
