慕课网

精品课程 DOM事件探秘

DOM事件探秘

最热最新

qq_啊啦嘞_0

DOM中的事件对象：event event属性：type（事件类型）、target（拥有事件的元素） event方法： 1）stopPropagation阻止事件冒泡事件冒泡是从最具体的元素开始接收，然后逐级向上冒泡。event.stopPropagation(); 2）preventDefault（）方法IE中的时间对象：IE8之前的window.event event属性：type、srcElement event方法：cancelBubble属性阻止事件冒泡 returnValue属性阻止默认属性

查看全部

0 采集收起来源：编程练习
2016-05-04
时光似小丑

// 滑过滑过、离开、点击每个选项时 for(var i=0;i<as.length;i++){ as[i].onmouseover=function(){ this.style.background='#ccc'; } as[i].onmouseout=function(){ this.style.background='none'; } as[i].onclick=function(){ title.innerHTML=this.innerHTML; } } // 点击页面空白处时 document.onclick=function(){ menu.style.display='none'; } } }

查看全部

1 采集收起来源：编程挑战
2018-03-22
时光似小丑

//上 if(e.keyCode == 38){ index = (index <= 0) ? as.length : index; index --; as[index].style.background = '#ccc'; if(index == as.length-1){ as[0].style.background = ''; } if(index+1<as.length){ as[index+1].style.background = ''; } } //回车选中 if(e.keyCode == 13 && index != -1){ title.innerHTML = as[index].innerHTML; for(var i=0;i<as.length;i++){ as[i].style.background=''; } menu.style.display=''; index=-1; } }

查看全部

0 采集收起来源：编程挑战
2018-03-22
时光似小丑

title.onclick=function(e){ //获得事件对象 e = help.getEvent(e); //阻止事件冒泡 help.stopP(e); menu.style.display = 'block'; //方向键控制 document.onkeyup = function(e){ e = help.getEvent(e); //下 if(e.keyCode == 40){ index ++; index = (index >= as.length) ? 0 : index; as[index].style.background = '#ccc'; if(index == 0){ as[as.length-1].style.background = ''; } if(index-1 >= 0){ as[index-1].style.background = ''; } }

查看全部

0 采集收起来源：编程挑战
2018-03-22
时光似小丑

window.onload=function(){ var box=document.getElementById('divselect'), title=box.getElementsByTagName('cite')[0], menu=box.getElementsByTagName('ul')[0], as=box.getElementsByTagName('a'), index=-1; var help = { //获取事件对象 getEvent:function(e){ return e?e:window.event; }, //阻止事件冒泡 stopP:function(e){ if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } } }

查看全部

0 采集收起来源：编程挑战
2016-05-04
Feng在路上 03:06

事件对象

查看全部

0 采集收起来源：IE中的事件对象
2016-05-04
时光似小丑

IE中的事件对象： 1.type属性用于获取事件类型 2.srcElement属性用于获取事件的目标 3.cancelBubble属性用于阻止事件冒泡（设置为true表示阻止冒泡，flase表示不阻止冒泡） 4.retrueValue属性用于阻止事件的默认行为（设置为fasle表示阻止事件的默认行为）把多个事件封装到一个对象里面，再把每个功能封装到对应方法里面，建议将封装的对象写到成单独的js文件，然后在需要的文件中引用。 {getEvent:function(event){ //ie8以前的事件对象为window.event return event?event:window.event; }, getType:function(event){ return event.type; }, getElement:function(event){ //非IE:event.target，IE:event.srcElement return event.target || event.srcElement; }, preventDefault:function(event){ //判断对象方法是否存在时,要将方法当做属性来判断[函数名后不加小括号:if(对象.方法函数)],很多方法没有返回值, //即使有返回值也不一定是布尔值,当if(方法函数())时会出现不可预料的结果 if(event.preventDefault){ event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE属性处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE属性处理 } }}

查看全部

0 采集收起来源：IE中的事件对象
2016-05-04
吃瓜小夏 10:59

封装方法之后调用

查看全部

0 采集收起来源：IE事件处理程序及跨浏览器解决
2016-05-04
吃瓜小夏 00:33

事件处理程序

查看全部

0 采集收起来源：IE事件处理程序及跨浏览器解决
2016-05-04
吃瓜小夏

addEventListener removeEventListener

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-04
吃瓜小夏

boolean类型，false是通常用的，你就记住就可以了，代表默认的事件冒泡行为。

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-04
qq_玩笑你真可笑_0 04:03

DOM0级事件处理程序： html代码：<input type="button" value="按钮" id="btn"> js代码：var btn=document.getElementBtId('btn'); btn.onclick=function(){ alert('hello'); } 此方法与<input type="button" value="按钮" id="btn" onclick="show()"> function show(){ alert('hello'); }等同，但效率更高

查看全部

0 采集收起来源：DOM0级事件处理程序
2018-03-22
吃瓜小夏

false 并不是兼容浏览器的。 addEventListener方法的第三个参数的意义是： true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄在冒泡阶段执行兼容性是后面课程讲的，封装对象和方法

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-04
13weibo_Debbie

IE中的事件对象<br> （1）type属性用于获取事件的类型<br> （2）SRCElement属性用于获取事件的目标（3）cancelBubble属性用于阻止事件冒泡 =true是阻止冒泡 =false表示不阻止冒泡（4）returnValue属性用于阻止事件的默认行为 =false表示阻止默认行为注意：判断不要判断方法，判断属性。例如：if(event.propagation)

查看全部

0 采集收起来源：IE中的事件对象
2018-03-22
13weibo_Debbie

IE事件处理程序：<br> attachEvent()添加事件<br> detachEvent()删除事件<br> 接收相同的两个参数：事件处理程序的名称和事件处理程序的函数注意：这里必须写全事件名，例如"onclick" 跨浏览器的事件处理程序（适当的能力检测）将添加和删除方法封装在对象里，每个方法用判断的能力检测。element['on'+type]=headler

查看全部

0 采集收起来源：IE事件处理程序及跨浏览器解决
2018-03-22

首页上一页 231 232 233 234 235 236 237 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.你一定对HTML+CSS比较熟悉； 2.掌握一定的JS基础知识，尤其是函数封装、调用等知识。

老师告诉你能学到什么？: DOM事件具体相关知识，DOM事件的使用方法及应用！