事件对象
事件对象:
当事件的响应函数而被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数,当事件对象中封装了当前事件相关的一切信息,比如 鼠标的坐标,键盘哪个键按下等
- clientX\clientY 用于获取鼠标在当前可见窗口的坐标
- pageX\pageY 可以获取鼠标对于当前页面的坐标,IE8不支持
事件冒泡
指的是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会触发
取消冒泡: cancelBubble设置为true
事件委派
指将事件统一绑定给元素的共同祖先元素,这样当后代元素上的事件触发时,会一直冒泡到祖先元素,从而通过祖先元素的响应函数来处理事件
- 事件委派是利用了冒泡,听过委派可以减少事件的绑定次数,提高程序性能
-
var btn = document.getElementById("btn") var ul = document.getElementById("ul") btn.onclick = function() { var li = document.createElement("li"); li.innerHTML = '<a href="javascrit:;" class="link">新链接</a>'; ul.appendChild(li); } /* *事件委派 */ ul.onclick = function () { var event = event || window.event; //li的绑定 if(event.target.className == "link"){ alert("我是ul给li的委派事件"); } return false; }
<button id="btn">添加新链接</button> <ul id="ul"> <li><a href="javascrit:;" class="link">超链接</a></li> <li><a href="javascrit:;" class="link">超链接</a></li> <li><a href="javascrit:;" class="link">超链接</a></li> </ul>
事件绑定:
addEventListener()
通过这个方法也可以为元素绑定响应函数
参数
- 事件的字符串,不要on
- 回调函数,当事件触发时该函数会被调用
- 是否在捕获阶段触发事件,需要一个布尔值,一般传false
使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数顺序执行
不支持IE8以下浏览器
/* addEventListener() -通过这个方法也可以为元素绑定响应函数 -参数 1. 事件的字符串,不要on 2. 回调函数,当事件触发时该函数会被调用 3. 是否在捕获阶段触发事件,需要一个布尔值,一般传false 使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数顺序执行 addEventListener()中的this是绑定事件的对象 */ var btn2 = document.getElementById("btn2") btn2.addEventListener("click", function() { alert("btn2绑定的第一个事件"); }, false); btn2.addEventListener("click", function() { alert("btn2绑定的第二个事件"); }, false); /* attachEvent() -在IE8中可以使用attachEvent()来绑定事件 -参数: 1. 事件的字符串,要on 2. 回调函数 使用这个方法可以同时为一个元素的相同事件绑定多个响应函数,按照事件绑定响应的函数倒序执行 attachEvent()中的this是Window */ // btn2.attachEvent("onclick", function() { // alert("btn2绑定的第三个事件"); // }); /*
事件绑定 1. obj 要绑定事件的对象 2. eventStr 事件的字符串(不要on) 3. callback 回调函数 */ function bind(obj, eventStr, callback) { // 大部分浏览器 if(obj.addEventListener) { obj.addEventListener(eventStr, callback, false); }else { /* this是谁由调用方式决定 callback.call(obj) */ // IE8及以下 obj.attachEvent("on"+eventStr, function() { callback.call(obj) }) } } bind(btn2, "click", function() { alert("btn2绑定的第四个事件"); })
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
- 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
- 网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
- 捕获阶段
- 在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件。
- 目标阶段
- 事件捕获到目标元素,捕获结束开始, 在目标元素上触发事件
- 冒泡阶段
- 事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false
注:IE8及以下的浏览器中没有捕获阶段

拖拽事件
- 开始拖拽, 当鼠标在被拖拽元素上按下 onmousedown
- 拖拽, 当鼠标移动时, 被拖拽元素一起移动 onmousemove
- 结束拖拽, 当鼠标松开时, 被拖拽元素被固定在当前位置 onmouseup
#box3 { background-color: yellowgreen; /* 要拖得元素position要设置为绝对定位 */ position: absolute; /* 光标为拖得效果 */ cursor: move; }
var box3 = document.getElementById("box3");// 开始拖拽 /* 也就是整个文档通用,应该使用document对象而不是drag对象 (否则,采用drag对象时物体只能往右方或下方移动) */ box3.onmousedown = function (event) { event = event || window.event;//兼容IE浏览器 var diffX = event.clientX - box3.offsetLeft; var diffY = event.clientY - box3.offsetTop; /* setCapture函数的作用就是将后续的mouse事件都发送给这个对象, releaseCapture就是将鼠标事件还回去, 由 document、window、object之类的自行来处理。 这样就保证了在拖动的过程中,不会由于经过了其它的元素而受到干扰 只有IE支持,在firework使用不会报错,但是在Chrome调用会报错 所以要判断 */ if(typeof box3.setCapture !== 'undefined'){ box3.setCapture(); } document.onmousemove = function (event) { // event = event || window.event;//兼容IE浏览器 var left = event.clientX - diffX; var top = event.clientY - diffY; box3.style.left = left + "px" box3.style.top = top + "px" }; document.onmouseup = function () { document.onmousemove = null; document.onmouseup = null; // 兼容低版本IE if(typeof box3.releaseCapture != 'undefined'){ box3.releaseCapture(); } } }
滚轮事件
- onmousewheel 滚轮滚动事件
- 滚动方向
-
event.wheelDelta
- 向上 正值
- 向下 负值
-
event.detail
- 向上 负值
- 向下 正值
-
/* 滚轮滚动 */ box4.onmousewheel = function(event) { event = event || window.event; /* 判断滚动方向 event.wheelDelta 向上 正值 向下 负值 火狐中:event.detail 向上 负值 向下 正值 */ // 向上滚 if(event.wheelDelta > 0 || event.detail < 0) { box4.style.height = box4.clientHeight - 10 + "px" } else { box4.style.height = box4.clientHeight + 10 + "px" } //阻止默认行为 event.preventDefault(); }
键盘事件:
- keydown()事件
- 在键盘上按下某个键时触发。
- 如果按住某个键,会不断触发该事件,但是 Opera 浏览器不支持这种连续操作。该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符,在 IE 和 Safari 浏览器下还会禁止keypress 事件响应)。
- keyup事件
- 释放某个键盘键时触发。该事件仅在松开键盘时触发一次,不是一个持续的响应状态。
- keypress事件
- 按下某个键盘键并释放时触发
- 如果按住某个键,会不断触发该事件。
- 该事件处理函数返回 false 时,会取消默认的动作(如输入的键盘字符)。
-
/* 按键事件 keyCode 通过可以keyCode获取按键编码 数字(0-9): 编码48-57 altKey ctrlKey shiftKey 判断alt Ctrl shift 按键是否被按下 */ var noNumbIn = document.getElementsByClassName("noNumb")[0]; document.onkeydown = function(event) { console.log(event.keyCode) // 数字不能输入 if(event.keyCode >= 48 && event.keyCode <= 57){ // 阻止默认输入行为 return false; } }