为了账号安全,请及时绑定邮箱和手机立即绑定
慕课网数字资源数据库体验端
DOM事件探秘_学习笔记_慕课网
为了账号安全,请及时绑定邮箱和手机立即绑定

DOM事件探秘

Amy
难度中级
时长 2小时57分
  • 拖拽->鼠标跟随 1、绑定鼠标点击事件 2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性) 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽) 4、将拖拽元素设置成绝对定位 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法) 6、设置left、top限定,禁止元素拖出窗口 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth 8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果 注意可以把left、top理解成x轴、y轴
    查看全部
  • 哇咔咔
    查看全部
  • IE事件处理程序 attachEvent(时间名称,函数); detachEvent(事件名称,函数); 跨浏览器最好封装进一个队像内 js属性连接中,所有用点的地方都可以替换为[] 如:element.onclick==element['onclick']; addhandler:添加句柄
    查看全部
  • <!DOCTYPE HTML> <html> <header> <meta charset='utf8'> <title>DOM事件</title> </header> <body> <div id="box"> <input type="button" name="btn" id="btn" value="按钮"/> </div> <script> var btnNode=document.getElementById('btn'); btnNode.onlick=function(){ alert('hello world'); } </script> </body> </html>
    查看全部
  • math.floor() 取整
    查看全部
  • keyup释放键盘时触发
    查看全部
  • 键盘事件 keydown 任意键触发 keypress字符键触发
    查看全部
  • ie
    查看全部
  • 阻止事件冒泡 event.stopPropagation(); *说明: 该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。 stopPropagation() 阻止事件冒泡相当好用, 可是 IE8 及以前版本都不支持. IE 的事件对象包含特有的属性 cancelBubble, 只要将它赋值为 true 即可阻止事件继续。 event.cancelBubble = true;
    查看全部
  • DOM中的时间对象
    查看全部
  • 拖拽->鼠标跟随<br> 1、绑定鼠标点击事件<br> 2、获取鼠标坐标:clientX clientY (所有浏览器都支持此属性)<br> 3、为容器元素绑定onmousemove (表明可拖拽元素只在容器元素内可拖拽)<br> 4、将拖拽元素设置成绝对定位<br> 5、在onmousemove中改变拖拽元素的left、top (注意left、top的算法)<br> 6、设置left、top限定,禁止元素拖出窗口<br> 7、当前浏览器窗口宽度document.documentElement.clientWidth或document.body.clientWidth<br> 8、拖拽元素绑定onmouseup事件,在此事件中注销onmousemove事件,完成元素拖拽的释放效果<br> 注意可以把left、top理解成x轴、y轴 有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5: document.documentElement.clientHeight document.documentElement.clientWidth 或者 document.body.clientHeight document.body.clientWidth
    查看全部
  • 总结: 该课程的编程挑战,主要分为四个事件,鼠标滑过(mouseover)和鼠标离开事件(mouseout),
    查看全部
    0 采集 收起 来源:编程挑战

    2016-05-05

  • IE事件处理程序及跨浏览器解决方法
    查看全部
  • this引用被触发的元素
    查看全部
  • 布尔值的true代表再捕获阶段调用 false代表在冒泡阶段调用
    查看全部

举报

0/150
提交
取消
课程须知
1.你一定对HTML+CSS比较熟悉; 2.掌握一定的JS基础知识,尤其是函数封装、调用等知识。
老师告诉你能学到什么?
DOM事件具体相关知识,DOM事件的使用方法及应用!
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!