为了账号安全,请及时绑定邮箱和手机立即绑定
  • 什么是事件对象?在触发DOM上的事件时都会产生一个对象 例:function show(event){……} 参数event接收的就是事件传过来的对象 事件对象EVENT ①DOM中的事件对象 属性 (1)type属性用于获取事件类型 (2)target属性用于获取事件目标 (3)stopPropagation()方法 用于阻止事件冒泡 (4)preventDefault() 方法 阻止事件的默认行为 如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡,那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。(由内而外) 如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡,用stopPropagation()方法。 如果需要阻止a标签的默认属性跳转,可以使用阻止事件的默认行为preventDefault()方法。 <div id="box"> <input type="button" value="按钮1" id="btn1" /> <input type="button" value="按钮2" id="btn2" /> <input type="button" value="按钮3" id="btn3" /> <a href="https://www.baidu.com/" id="goTo">跳转</a> </div> <script> function showMessage(event){ //参数event接收的就是事件传过来的对象 alert(event.type); //type属性用于获取事件类型,此处输出:click //alert(event.target); //target属性用于获取事件目标,此处输出:[object HTMLInputElement] //alert(event.target.nodeName); //输出元素节点名称:input event.stopPropagation(); //stopPropagation()方法用于阻止事件冒泡 } function showBox(){ alert("这是盒子box"); }
    查看全部
  • 跨浏览器事件处理,注意:在js中 element.onclick===element['click'] .可以用中括号【】代替
    查看全部
  • 事件处理程序
    查看全部
  • 执行步骤:在标题区域按下->要页面中移动->释放鼠标时停止移动 1、任何能够跟着鼠标移动的东西 都要有一个前提:绝对定位 2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。 所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 3、ie10以前版本不支持document.getElementsByClassName,所以要用js封装getClass方法,获取class 4、实现随鼠标拖动,需要让窗口的坐标随着鼠标移动,鼠标的坐标保存在事件的clientX和clientY两个属性中。 5、onmousedown鼠标按下,窗口和鼠标的位置同步;element.style.left/top=clientX/Y+'px'; 6、onmousemove当鼠标指针在元素内部移动时重复地触发 代码: function getClass(clsname,parent){ var parent=parent?document.getElementById(parent):document, elements=document.getElementsByTagName("*"), eles=[]; for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsname){ eles.push(elements[i]); } } return eles; } window.onload=function(){ var oTitle=getClass("login_title","box")[0]; oTitle.onmousedown=fnDown; } function fnDown(){ var box=document.getElementById("box"); document.onmousemove=function(event){ event=event||window.event; box.style.left=event.clientX+"px"; box.style.top=event.clientY+"px"; } }
    查看全部
  • 键盘事件
    查看全部
  • bubble ~~~
    查看全部
  • document.getElementByClassName()方法IE10之前是不支持的 所以为了兼容 最好自己封装
    查看全部
  • element['on' + type] = handler; //变量和字符串不能用点连 element.'on'+type是错误的 function stopGo(event){ event.stopPropagation(); //阻止向上冒泡适用于DOM event.preventDefault(); //取消默认行为 IE不支持适用于DOM } event.returnValue=false;//适用于IE阻止默认行为; event.cancelBubble=true;//适用于IE阻止冒泡
    查看全部
  • stopPropogation()方法阻止事件冒泡 preventDefult()方法阻止默认行为 type 获取事件属性 target获取事件目标
    查看全部
  • 是看你看
    查看全部
  • 例子例子例子
    查看全部
  • element.onclick===element[onclick]
    查看全部
  • 夸浏览器的事件处理可以恰当地使用能力检测
    查看全部
  • 在js中 element.onclick===element['click'] .可以用中括号【】代替
    查看全部
  • 2016.2.1
    查看全部

举报

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

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

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