JavaScript中4

JavaScript
JavaScript 事件
实现元素的拖拽：
问题： 3、鼠标按下时，如果有文字被选中，拖拽会变成复 制（浏览器的默认行为），会出现冲突，在 onmousedown阻止默认行为（非标准浏览器无效）， 可以防止。ie浏览器里有个全局捕获（和前面的捕获 不同），if(元素.setCapture){元素.setCapture()};全 局捕获的意思是当有其他元素执行一个事件时，劫持 该事件，在释放元素时需要把全局捕获也释放，if(元 素.releaseCapture){元素.releaseCapture()};，最终 得到与阻止默认行为相同的效果。
JavaScript
JavaScript
JavaScript 事件
事件函数的取消
第一种事件绑定形式的取消： function fn1(){alert(1);} document.onclick = fn1; document.onclick = null; //取消 第二种事件绑定形式的取消： ie：obj.detachEvent(事件名称，事件函数); 标准：obj.removeEventListener(事件名称，事件函 数，是否捕获); true捕获 false冒泡 注意：如果分别有捕获和冒泡，也需要分别取消，不 会全部取消
JavaScript
JavaScript 事件
实现元素的拖拽：
问题： 4、图片拖拽也会有默认行为，解决办法同上 封装拖拽： 限制范围的拖拽：让其不能离开另一个元素的范围 方法：在赋值前进行判断，将一个正确的值赋给它 练习：限制范围的拖拽
JavaScript
JavaScript 事件
实现元素的拖拽：
实现原理，选择元素时（鼠标按下）保存鼠标的位置和元 素位置的差值；移动元素时（鼠标移动），不停的给元素 赋值（当前鼠标位置减去保存的差值）；释放元素（鼠标 抬起）时，取消移动事件 1、按下时保存差值： var disX = ev.clientX - 元素.offsetLeft var disY = ev.clientY - 元素.offsetTop 2、移动时： 元素.style.left = ev.clientX - disX + 'px'; 元素.style.top= ev.clientY - disY + 'px';
JavaScript
JavaScript 事件
键盘事件
onkeydown：当键盘按键按下时触发 onkeyup：当键盘按键抬起时触发 不能是所有按键按下时都执行同一件事，这时需要用到： event.keyCode：数字类型 键盘按键值 如：document.onkeydown = function(ev){ var ev = ev || event; alert(ev.keyCode); } //判断一下当前按键的键值 因此在使用该事件时应该判断一下当前按键的键值，来分 别执行不同的函数
JavaScript
JavaScript 事件
实现元素的拖拽：
3、释放元素时： 元素.onmousemove = 元素.onmouseup = null; 问题： 1、移动太快脱离元素时事件就不会执行了 onmousemove事件放在document上就可以了 2、抬起鼠标时在其他元素上抬起的，元素也不会停 止 同样把onmouseup事件也放在document上
JavaScript
JavaScript 事件
键盘事件
event下还有ctrlKey，shiftKey，altKey 布尔值 当一个事件发生时，如果ctrl或shift或alt是按下状态，返 回true，否则返回false 练习：做一个输入框，每次输入内容时立即弹出value值 练习：做一个输入框和ul，每次输入完内容后，点击回车 变成留言 练习：上面的练习改成按ctrl+回车时，变成留言 注意：只有能接受焦点的元素才能接收键盘事件，特殊 document可以接收，不能直接给div加
JavaScript
JavaScript 事件
键盘事件： 按键事件在按下不抬起时会连续触发 但是连续触发前会有一个停顿 因此在做按住连续触发并且不想要停顿效果时， 需要自己写连续方法（用计时器的方法） 详细见方块移动的例子
JavaSห้องสมุดไป่ตู้ript
JavaScript 事件
事件默认行为：
当一个事件发生时，浏览器默认会做的事情 如：点击右键会有个菜单等（oncontextmenu，右键-环境菜单显示出来时触发） 有些时候我们不想让其执行默认行为 阻止默认行为： 1、当前这个行为是什么事件触发 2、在这个事件处理函数中使用return false 练习：做一个自定义的默认菜单（把原本右键的默认事件 取消），这个菜单要求和原本右键菜单一样（内容是个框）