JavaScript Event - 圆业

Javascript 事件监听UED前端开发圆业

事件注册1. HTML Attribute<buttononclick="handleClick();">Click Me</button><buttononclick="this.innerHTML='Clicked';">Click Me</button>

事件注册2. 绑定对象属性el.onclick = function(e) { e = e || window.event; // IE下用window.event获得事件对象 alert(e.type);};

事件注册3. 事件监听// IEel.attachEvent("onclick", function(e) { alert(e.type); // click});// 非IEel.addEventListener("click", function(e) { alert(e.type); // click}, false);

事件传播IE目前只支持冒泡流程documentbody冒泡bubbling捕获capturingdivbutton

事件对象的常用属性/方法e.typee.Target || e.srcElemente.keyCode事件的名称，如“click”，“mouseover”等触发事件的目标元素键盘事件触发时对应的Unicode键值

事件对象的常用属性/方法e.screenX, e.screenYe.ctrlKey, e.altKey, e.shiftKeye.clientX, e.clientY事件触发时鼠标相对于屏幕的横坐标和纵坐标布尔值，分别表示键盘事件触发时Ctrl、Alt和Shift键是否按下事件触发时鼠标相对于浏览器Client区域的横坐标和纵坐标

事件对象的常用属性/方法e.stopPropagation() || e.cancelBubble=truee.preventDefault() || e.returnValue=false停止事件的传播IE： e.cancelBubble=true;

非IE： e.stopPropagation();阻止事件的默认行为，比如阻止链接跳转、阻止表单提交等IE： e.returnValue=false;

非IE： e.preventDefault();YAHOO.util.Event 常用方法Event.on(el, sType, fn, obj, overrideContext) 添加一个事件监听函数，Event.addListener的别名。Event.onDOMReady(fn, obj, overrideContext)el: 要添加事件监听的元素 ID，元素引用，ID 或元素引用的数组

sType: 要添加监听的事件名称，如“click”，不加“on”

fn: 事件触发时执行的回调函数，该函数中this默认指向事件所绑定的元素

obj:【可选】传递给监听函数的一个自定义参数

overrideContext:【可选】如果为true，回调函数中this就指向第三个参数obj绑定DOMReady事件的方法。DOMReady事件会在DOM结构可用时触发，与onload事件不同的是，不需要等待图片等资源加载完，通常DOMReady会在onload事件之前触发。

YAHOO.util.Event 常用方法Event.on(el, "click", function(e, obj) { alert(this == el); alert(obj.index); // 6}, { index:6 });Event.on(el, "click", function(e) { alert(this == el); // falsealert(this.index); // 6}, { index:6 }, true);

YAHOO.util.Event 常用方法Event.purgeElement(el, recurse, sType) 移除指定元素上所有通过YUI添加的监听函数Event.removeListener(el, sType, fn)Event.getListeners(el, sType) el: 要移除监听的元素

recurse:【可选】递归移除子节点上的事件监听

sType:【可选】移除指定类型的事件监听，默认移除所有的类型移除一个事件监听函数返回指定元素上所有通过YUI添加的监听函数

YAHOO.util.Event 常用方法Event.stopEvent(ev)Event.preventDefault(ev)Event.stopPropagation(ev)停止事件的传播并阻止事件的默认行为阻止事件的默认行为，比如阻止链接跳转、阻止表单提交等停止事件的传播

YAHOO.util.Event 常用方法Event.on(a, "click", function(e) {Event.preventDefault(e); // 阻止超链接点击跳转});Event.on(form, "submit", function(e) {Event.preventDefault(e); // 阻止表单递交，常用于表单验证});Event.on(textarea, "keydown", function(e) {if (e.keyCode == 13 && !e.shiftKey) {Event.preventDefault(e); // 阻止回车键换行，保留shift+回车}});

YAHOO.util.Event 常用方法Event.getTarget(ev)Event.getPageX(ev), Event.getPageY(ev)Event.getXY(ev)返回触发事件的目标元素返回事件触发时鼠标相对于页面的横坐标和纵坐标返回事件的坐标数组：[ Event.getPageX(ev), Event.getPageY(ev) ]

YAHOO.util.Event APIResources中文文档

使用 YAHOO.util.Event 的好处在事件处理函数中，this默认指向事件所绑定的对象，并可以给事件处理函数传递一个自定义参数绑定对象参数可以是元素ID、DOM对象、或数组，使用方便灵活额外提供一些实用的方法，功能强大统一解决令人头痛的各种浏览器兼容性问题……YAHOO.util.Event

事件代理(Event Delegation)在上级元素上注册事件

JavaScript Event - 圆业

More Related Content

Viewers also liked (17)

More from taobao.com (20)

JavaScript Event - 圆业