JavaScript中4.ppt

《JavaScript中4.ppt》由会员分享，可在线阅读，更多相关《JavaScript中4.ppt（11页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、JavaScriptl JavaScript 事件l 事件函数的取消l 第一种事件绑定形式的取消：l function fn1()alert(1);l document.onclick = fn1;l document.onclick = null; /取消l 第二种事件绑定形式的取消：l ie：obj.detachEvent(事件名称，事件函数);l 标准：obj.removeEventListener(事件名称，事件函数，是否捕获); true捕获 false冒泡l 注意：如果分别有捕获和冒泡，也需要分别取消，不会全部取消JavaScriptl JavaScript 事件l 键盘事件l o

2、nkeydown：当键盘按键按下时触发l onkeyup：当键盘按键抬起时触发l 不能是所有按键按下时都执行同一件事，这时需要用到：event.keyCode：数字类型 键盘按键值l 如：document.onkeydown = function(ev)l var ev = ev | event;l alert(ev.keyCode);l /判断一下当前按键的键值l 因此在使用该事件时应该判断一下当前按键的键值，来分别执行不同的函数JavaScriptl JavaScript 事件l 键盘事件l event下还有ctrlKey，shiftKey，altKey 布尔值l 当一个事件发生时，如果c

3、trl或shift或alt是按下状态，返回true，否则返回falsel 练习：做一个输入框，每次输入内容时立即弹出value值l 练习：做一个输入框和ul，每次输入完内容后，点击回车变成留言l 练习：上面的练习改成按ctrl+回车时，变成留言l 注意：只有能接受焦点的元素才能接收键盘事件，特殊document可以接收，不能直接给div加JavaScriptl JavaScript 事件l 键盘事件：l 按键事件在按下不抬起时会连续触发l 但是连续触发前会有一个停顿l 因此在做按住连续触发并且不想要停顿效果时，需要自己写连续方法（用计时器的方法）l 详细见方块移动的例子JavaScriptl

4、JavaScript 事件l 事件默认行为：l 当一个事件发生时，浏览器默认会做的事情l 如：点击右键会有个菜单等（oncontextmenu，右键-环境菜单显示出来时触发）l 有些时候我们不想让其执行默认行为l 阻止默认行为：l 1、当前这个行为是什么事件触发l 2、在这个事件处理函数中使用return falsel 练习：做一个自定义的默认菜单（把原本右键的默认事件取消），这个菜单要求和原本右键菜单一样（内容是个框）JavaScriptl JavaScript 事件l 实现元素的拖拽：l 实现原理，选择元素时（鼠标按下）保存鼠标的位置和元素位置的差值；移动元素时（鼠标移动），不停的给元素赋

5、值（当前鼠标位置减去保存的差值）；释放元素（鼠标抬起）时，取消移动事件l 1、按下时保存差值：l var disX = ev.clientX - 元素.offsetLeftl var disY = ev.clientY - 元素.offsetTopl 2、移动时：l 元素.style.left = ev.clientX - disX + px;l 元素.style.top= ev.clientY - disY + px;JavaScriptl JavaScript 事件l 实现元素的拖拽：l 3、释放元素时：l 元素.onmousemove = 元素.onmouseup = null;l 问题

6、：l 1、移动太快脱离元素时事件就不会执行了l onmousemove事件放在document上就可以了l 2、抬起鼠标时在其他元素上抬起的，元素也不会停止l 同样把onmouseup事件也放在document上JavaScriptl JavaScript 事件l 实现元素的拖拽：l 问题：l 3、鼠标按下时，如果有文字被选中，拖拽会变成复制（浏览器的默认行为），会出现冲突，在onmousedown阻止默认行为（非标准浏览器无效），可以防止。ie浏览器里有个全局捕获（和前面的捕获不同），if(元素.setCapture)元素.setCapture();全局捕获的意思是当有其他元素执行一个事件时，劫持该事件，在释放元素时需要把全局捕获也释放，if(元素.releaseCapture)元素.releaseCapture();，最终得到与阻止默认行为相同的效果。JavaScriptl JavaScript 事件l 实现元素的拖拽：l 问题：l 4、图片拖拽也会有默认行为，解决办法同上l 封装拖拽：l 限制范围的拖拽：让其不能离开另一个元素的范围l 方法：在赋值前进行判断，将一个正确的值赋给它l 练习：限制范围的拖拽