首页 > 代码库 > js事件

js事件

2024-10-23 04:38:39   212人阅读

事件绑定

事件绑定方法I：绑定元素属性

事件绑定方法II：绑定对象属性

事件绑定方法III：使用addEventListener() 方法(DOM2级事件程序)

addEventListener

语法：target.addEventListener(type,listener,useCapture);

接受3个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。

·type: 字符串,事件名称,不含“on”,比如“click”、 “mouseover”、“keydown”等。

·listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 ·

useCapture :是否使用捕获,一般用 false 。

removeEventListener

语法：target.removeEventListener(type,listener,useCapture); 写的参数和addEventListener()函数的相同。

实现删除addEventListener()函数添加的事件处理。

IE事件处理程序

IE8及以下浏览器不支持addEventListener， IE8及以下版本浏览器实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。 这两个方法都需要两个参数：事件名称和事件处理函数。

IE11只支持addEventListener！ IE9，IE10对attachEvent和addEventListener都支持！ IE8及以下版本只支持attachEvent！

事件流

事件流描述的是从页面中接受事件的顺序。 IE和Netscape开发团队提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流。 事件冒泡 IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接受， 然后逐级向上传播到较为不具体的节点。

eg:点击按钮，那么 这个click事件会 按照这样传播：

技术分享

<input>→<div>→<body>→<html>→document

事件源

概念：发生事件的DOM节点（HTML元素）。 不管在哪个事件中，只要你操作的那个元素就是事件源。
获取方式： ie：window.event.srcElement 标准下:event.target

事件委托

事件委托：通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的，然而你却加到别人身上来做，完成这个事件。 (利用冒泡的原理，把事件加到父级上，触发执行效果。)
好处：提高性能。
Eg: oUl.onmouseover = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; //(W3C||IE) if(target.nodeName.toLowerCase() == ‘li‘){ target.style.background = "red"; } };

阻止默认事件

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
阻止方式：
1.return false; (HTML、DOM0级)
2. event.preventDefault(); (W3C)
3.event.returnValue = http://www.mamicode.com/false;(IE)
兼容写法： if (event.preventDefault) { event.preventDefault(); }else{ event.returnValue = http://www.mamicode.com/false; }

阻止冒泡事件

不再派发事件 event.stopPropagation();//标准浏览器
event.cancelBubble = true; // IE浏览器
兼容写法: if (event.stopPropagation) { event.stopPropagation(); }else{ event.cancelBubble = true; }

js事件


联系
我们