这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
事件(Event)知识整理, 本文由网上资料整理而来, 需要的朋友可以参考下
鼠标事件鼠标移动到目标元素上的那一刻,首先触发 mouseover 之后如果光标继续在元素上移动,则不断触发 mousemove 如果按下鼠标上的设备 (左键, 右键, 滚轮……),则触发 mousedown 当设备弹起的时候触发 mouseup 目标元素的滚动条发生移动时(滚动滚轮 / 拖动滚动条。。) 触发 scroll 滚动滚轮触发 mousewheel,这个要区别于 scroll 鼠标移出元素的那一刻,触发 mouseout
事件注册平常我们绑定事件的时候用 dom.onxxxx=function(){} 的形式 这种方式是给元素的 onxxxx 属性赋值,只能绑定有一个处理句柄。 但很多时候我们需要绑定多个处理句柄到一个事件上,而且还可能要动态的增删某个处理句柄 下面的事件注册方式就能解决这个需求。
先介绍一下四个方法获取事件对象和事件源 (触发事件的元素)
- //IE以外
- target.addEventListener(type,listener,useCapture)
- target.removeEventListener(type,listener,useCapture);
- target :文档节点、document、window 或 XMLHttpRequest。
- type :字符串,事件名称,不含"on",比如"click"、"mouseover"、"keydown"等。
- listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
- useCapture :是否使用捕捉,一般用 false。
- //IE
- target.attachEvent(type, listener);
- target.detachEvent(type, listener);
- target :文档节点、document、window 或 XMLHttpRequest。
- type :字符串,事件名称,含"on",比如"onclick"、"onmouseover"、"onkeydown"等。
- listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
- 两者使用的原理:可对执行的优先级不一样,实例讲解如下:
- ele.attachEvent("onclick",method1);
- ele.attachEvent("onclick",method2);
- ele.attachEvent("onclick",method3);
- 执行顺序为method3->method2->method1
- ele.addEventListener("click",method1,false);
- ele.addEventListener("click",method2,false);
- ele.addEventListener("click",method3,false);
- 执行顺序为method1->method2->method3
- 兼容后的方法
- var func = function(){};
- //例:addEvent(window,"load",func)
- function addEvent(elem, type, fn) {
- if (elem.attachEvent) {
- elem.attachEvent('on' + type, fn);
- return;
- }
- if (elem.addEventListener) {
- elem.addEventListener(type, fn, false);
- }
- }
- //例:removeEvent(window,"load",func)
- function removeEvent(elem, type, fn) {
- if (elem.detachEvent) {
- elem.detachEvent('on' + type, fn);
- return;
- }
- if (elem.removeEventListener) {
- elem.removeEventListener(type, fn, false);
- }
- }
取消事件默认行为 (例如点击一个后不跳转页面而是执行一个函数)
- function eventHandler(e){
- //获取事件对象
- e = e || window.event;//IE和Chrome下是window.event FF下是e
- //获取事件源
- var target = e.target || e.srcElement;//IE和Chrome下是srcElement FF下是target
- }
阻止事件冒泡
- function eventHandler(e) {
- e = e || window.event;
- // 防止默认行为
- if (e.preventDefault) {
- e.preventDefault();//IE以外
- } else {
- e.returnValue = false;//IE
- //注意:这个地方是无法用return false代替的
- //return false只能取消元素
- }
- }
事件委托
- function myParagraphEventHandler(e) {
- e = e || window.event;
- if (e.stopPropagation) {
- e.stopPropagation();//IE以外
- } else {
- e.cancelBubble = true;//IE
- }
- }
例如,你有一个很多行的大表格,在每个上绑定点击事件是个非常危险的想法,因为性能是个大问题。流行的做法是使用事件委托。 事件委托描述的是将事件绑定在容器元素上,然后通过判断点击的 target 子元素的类型来触发相应的事件。 事件委托依赖于事件冒泡,如果事件冒泡到 table 之前被禁用的话,那以下代码就无法工作了。
- myTable.onclick = function () {
- e = e || window.event;
- var targetNode = e.target || e.srcElement;
- // 测试如果点击的是TR就触发
- if (targetNode.nodeName.toLowerCase() === 'tr') {
- alert('You clicked a table row!');
- }
- }
事件(Event)知识整理 (二)
事件流DOM 同时支持两种事件模型:捕获型事件和冒泡型事件 并且每当某一事件发生时,都会经过捕获阶段 -> 处理阶段 -> 冒泡阶段 (有些浏览器不支持捕获) 捕获阶段是由上层元素到下层元素的顺序依次。而冒泡阶段则正相反。 如下图
当事件触发时 body 会先得到有事件发生的信息,然后依次往下传递,直到到达最详细的元素。这就是事件捕获阶段。 还记得事件注册方法 ele.addEventListener(type,handler,flag) 吧,Flag 是一个 Boolean 值,true 表示事件捕捉阶段执行,false 表示事件冒泡阶段执行。 接着就是事件冒泡阶段。从下往上 依次执行事件处理函数 (当然前提是当前元素为该事件注册了事件句柄)。 在这个过程中,可以阻止事件的冒泡,即停止向上的传递。 阻止冒泡有时是很有必要的,例如
- <div onclick=funcA()>
- <button onclick=funcB()>
- Click
- </button>
- </div>
本意是如果点击 div 中按钮以外的位置时执行 funcA, 点击 button 时执行 funcB。但是实际点击 button 时就会先后执行 funcB,funcA。 而如果在 button 的事件句柄中阻止冒泡的话,div 就不会执行事件句柄了。
来源: http://www.phperz.com/article/17/0624/281557.html