为了账号安全,请及时绑定邮箱和手机立即绑定
  • 什么是事件对象?在触发DOM上的事件时都会产生一个对象 事件对象EVENT ①DOM中的事件对象 属性 (1)、type属性用于获取事件类型 (2)、target属性用于获取事件目标 (3)、stopPropagation()方法 用于阻止事件冒泡 (4)、preventDefault() 方法 阻止事件的默认行为 如果一个div里面有一个button,button和div都绑定了click事件,如果是事件冒泡,那么点击button的时候,首先触发button的处理函数,然后触发div的处理函数。(由内而外) 如果有时候不想冒泡,也就是不希望div的事件被触发,那么需要阻止事件冒泡。stopPropagation()方法 如果需要阻止a标签的默认属性跳转,可以使用阻止事件的默认行为preventDefault()方法
    查看全部
  • 1.IE事件处理程序:IE也提供了类似DOM2级事件处理程序 attachEvent()添加事件 detachEvent()删除事件 接收相同的两个参数,事件处理程序的名称和事件处理程序的函数。去掉了布尔值,不使用第三个参数的原因:IE8以及更早的浏览器版本只支持事件冒泡! 在ie下给btn3添加事件 btn3.attachEvent('onclick',showMes); 主意:在ie事件处理程序上,又要把on加上 btn3.detachEvent('onclick',showMes); 支持ie事件处理程序的浏览器主要有ie和opera两个浏览器。 2.跨浏览器事件处理程序 var eventUtil = { //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){element.addEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.attachEvent){element.attachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=handler;} // DOM0级事件处理程序 }, //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){element.removeEventListener(type,handler,false);} // DOM2级事件处理程序 else if(element.detachEvent){element.detachEvent('on'+type,handler);} // IE事件处理程序 else{element['on'+type]=null;} //DOM0级事件处理程序 } } eventUtil.addHandler(btn3,'click',showMessage); 3.js中所有用'.'的地方都可以使用'[]' 如:对象的点击事件element.onclick===element['onclick']
    查看全部
  • 事件是文档或浏览器窗口中发生的特定的交互瞬间。【JavaScript <------>HTML】 事件流:描述的是从页面中接受事件的顺序 (IE:事件冒泡流 / Netscape事件捕获流) 事件冒泡流:即事件最开始由最具体的无素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到最不具体的那个节点(文档) input----->document
    查看全部
    9 采集 收起 来源:[DOM] 事件冒泡

    2018-03-22

  • 视频中提及的flag值的设定....个人认为应该把flag写进star和stop函数里面....如下... function startFn(){ clearInterval(timer); timer = setInterval(function(){ var i = Math.floor(Math.random()*8); title.innerHTML = data[i]; }, 300); play.style.backgroundColor = '#999'; flag = 1; } function stopFn(){ clearInterval(timer); play.style.backgroundColor = null; flag = 0; } 这样子.,....当用户用鼠标点击开始抽奖以后...就能直接按回车来停止抽奖...视频中的代码...当鼠标点击开始后..按下回车..是会导致再开始一遍...从而导致鼠标和键盘事件是分开的...没办法很好地鼠标键盘联系一起...
    查看全部
  • 我有另外一个思路:保证鼠标移动到的点的坐标(x1,y1)-初始点击点的坐标(x0,y0)=窗口移动后的左上角坐标(w1,h1)-窗口初始左上角坐标(w0,h0)即可。于是w1=x1-x0+w0,h1=y1-y2+h0。这个思路实现起来似乎更为简单。 已成功实现!!!搞了两个小时。。。。
    查看全部
  • DOM2级事件处理程序 定义了两个方法--用于处理指定和删除事件处理程序的操作: addEventListener()添加事件监听程序 removeEventListener()移除事件监听程序 三个参数设置;事件名称,处理方法(函数),布尔值--false:表示在冒泡阶段调用事件处理程序(可以最大限度的兼容浏览器),一般设为false;true表示在捕获阶段调用事件处理程序 btn3.addEventListener('click',showMes,false); 注意: 1、若事件名称有on,则需去掉on。onclick --> click,onmouseover --> mouseover等等; 2、false 最大限度兼容所有浏览器--事件冒泡流。 3.通过addEventListener添加的事件只能通过removeEventListener来删除。--参数要与添加事件时相同 btn3.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致,删除事件监听 DOM0级和DOM2级事件处理程序可以给一个事件绑定多个函数,事件触发的时候会按照绑定顺序执行各个函数。如下所示: btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value);},false); 缺点:IE不支持该事件
    查看全部
  • 拖拽->鼠标跟随 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轴
    查看全部
  • 1.首先分析实现原理;然后分析要取出的对象,进行取出;再给对象绑定事件; 2.分析各种事件,并对其件进行函数封装; 3.块的里面的文字(状态、下)不见了:用负缩进把他们搞到窗口之外了,当代码注释使用。 4.在适当的地方阻止事件冒泡: ul父元为div,点击li时希望ul隐藏,点击div时希望其显示,在点击li后会冒泡到div ,因而需要阻止冒泡; 注意区分onmousedown和onclick,只能阻止相对应类型事件。 重点:利用事件冒泡实现切换状态菜单;当一个块内包含众多事件时,必须要注意到事件冒泡的影响。 5.在其他任何地方点击,要使列表隐藏:document.onclick是代表在页面的任何地方点击事件。 document下的子元素还有一个onclick事件,所以要注意事件冒泡的影响;
    查看全部
  • 1、函数最外层少一个} 2、看不到“关闭”按钮的,需要在span中添加文本,比如X
    查看全部
    4 采集 收起 来源:编程练习

    2017-02-27

  • IE中的事件对象 1.type属性 用于获取事件类型 2.srcElement属性 用于获取事件目标 IE和其它浏览器兼容: event = event||window.event (IE8之前的浏览器用window.event) var ele = event.target ||event.srcElement 3.ancelBubble属性 用于阻止事件冒泡。 true表示阻止冒泡,false表示不阻止冒泡。 4.returnValue属性 用于阻止事件的默认行为。 设置false为阻止事件的默认行为。(ie中基本都是属性,没有方法)
    查看全部
  • console.log 主要是方便你调式javascript用的,你可以看到你在页面中输出的内容。 相比alert他的优点是: 他能看到结构化的东西,如果是alert,淡出一个对象就是[object object],但是console能看到对象的内容。 console不会打断你页面的操作,如果用alert弹出来内容,那么页面就死了,但是console输出内容后你页面还可以正常操作。 console里面的内容非常丰富,你可以在控制台输入:console,然后就可看到它有网页的各种提示。 键盘事件 onkeydown:按下键盘上任意键时触发,(按住不放会重复触发) onkeypress:按下键盘上的字符键时触发 onkeyup:释放键盘上的键时触发,(即按住不会重复触发) keyCode:event对象的keyCode属性用于得到键盘对应键的键码值,回车键为13。 定时器: 注意:使用timer前一定要进行初始化=====>var timer[]; timer=setInterval(function(){},50):每隔50ms执行一次函数 clearInterval(定时器名):清除定时器,再加定时器前需清除原来的定时器,防止多个定时器叠加 随机数: Math.random():生成0-1的随机数 Math.floor():向下取整
    查看全部
  • DOM0级事件处理程序 (用得比较多):先把元素取出来,然后为其属性添加一个事件的方法叫DOM0级处理程序。 它是一种较传统的方式:把一个函数赋值给一个事件处理程序的属性。 优点:简单,跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素,定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件!')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性
    查看全部
  • 1、任何能够跟着鼠标移动的东西 都要有一个前提:绝对定位 2、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性,它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 3、js ie10以下版本不支持document.getElementsByClassName 4、js封装getClass方法,获取class 5、实现随鼠标拖动,需要让窗口的坐标随着鼠标移动,鼠标的坐标保存在时间的clientX和clientY两个属性中。 6、onmousedown鼠标按下 窗口和鼠标的位置同步; element.style.left/top=clientX/Y+'px'; onmousemove当鼠标指针在元素内部移动时重复地触发
    查看全部
  • DOM时间对象与IE中时间对象:
    查看全部
  • 以前都是看答案后再写的,而这次可以说是第一次自己把代码写完,连BUG也改了。很难得,但优化得如何就不知道了。 1、多次点击一级菜单,二级菜单开关切换; 2、鼠标移动后衔接键盘上下移动; 3、鼠标移动后衔接键盘回车选择; 4、键盘上下移动后鼠标移动,LI不存在两个“被选”。
    查看全部
    3 采集 收起 来源:编程挑战

    2015-07-09

首页上一页1234567下一页尾页

举报

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

微信扫码,参与3人拼团

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

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