慕课网

精品课程 DOM事件探秘

DOM事件探秘

最热最新

WONGSHIN_

//封装一个getByClass的方法 function getByClass(clsName,parent){ var oParent=parent?document.getElementById(parent):document, eles=[], elements=oParent.getElementsByTagName('*'); for(var i=0,l=elements.length;i<l;i++){ if(elements[i].className==clsName){ eles.push(elements[i]); } } return eles; } //onload flag函数会在页面或图像加载完成后立即发生 window.onload=drag; push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度 clientX clientY document.getElementsByClassName() IE10以前的浏览器不支持

查看全部

0 采集收起来源：[DOM事件] QQ面板拖拽效果（上）
2018-03-22
WONGSHIN_

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当鼠标指针在元素内部移动时重复地触发

查看全部

0 采集收起来源：[DOM事件] QQ面板拖拽效果（上）
2016-05-21
artorias443 00:55

IE事件处理程序

查看全部

0 采集收起来源：IE事件处理程序及跨浏览器解决
2016-12-20
artorias443 01:42

使用事件处理程序

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-21
紫辰__

事件流描述的是从页面中接受事件的顺序 IE：事件冒泡流；N：事件捕获流事件冒泡：即事件最开始由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 eg：div包含一个按钮，点击按钮的同时触发div

查看全部

0 采集收起来源：[DOM] 事件冒泡
2016-05-20
WONGSHIN_

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']

查看全部

0 采集收起来源：IE事件处理程序及跨浏览器解决
2016-05-20
WONGSHIN_

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不支持该事件

查看全部

0 采集收起来源：DOM2级事件处理程序
2018-03-22
WONGSHIN_ 01:24

DOM2级事件处理程序

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-20
慕粉3321980 06:22

键盘事件

查看全部

0 采集收起来源：[DOM事件] 抽奖系统（下）
2016-05-20
Bee2 10:11

光标位置：clientX;clientY

查看全部

0 采集收起来源：[DOM事件] QQ面板拖拽效果（上）
2016-05-20
mzone520

本章内容 1、理解事件流 2、使用事件处理程序 3、不同的事件类型一、事件流事件流描述的是从页面中接受事件的顺序。 IE的事件流是事件冒泡流，而Netscape的事件流是事件捕获流 1、事件冒泡事件冒泡，即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上转播至最不具体的节点(文档)。 2、事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点最后接收到事件。二、事件处理程序 1、HTML事件处理程序 2、DOM0级事件处理程序 3、DOM2级事件处理程序 DOM2级事件定义了两个方法：用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。 4、IE事件处理程序 attachEvent()添加事件 detachEvent()删除事件这两个方法接收相同的两个参数：事件处理程序名称与事件处理函数 5、跨浏览器的事件处理程序三、事件对象事件对象event 1、DOM中的事件对象 (1)、type:获取事件类型 (2)、target：事件目标 (3)、stopPropagation() 阻止事件冒泡 (4)、preventDefault() 阻止事件的默认行为 2、IE中的事件对象 (1)、type:获取事件类型 (2)、srcElement：事件目标 (3)、cancelBubble=true阻止事件冒泡 (4)、returnValue=false阻止事件的默认行为

查看全部

0 采集收起来源：编程练习
2016-05-19
慕粉3332585 10:06

阻值冒泡

查看全部

0 采集收起来源：DOM中的事件对象
2016-05-19
慕粉3332585 01:28

IE事件处理程序不需要布尔值；IE事件处理程序只支持IE浏览器与OPERA 跨浏览器的事件处理程序：封装在一个对象内。在js中用点的都可以用【】来写。例：mystr.length=mystr["length"]; //跨浏览器事件处理 var eventutil={ //添加句柄 addHandler:function(element,type,handler){ if(element.addEventListener){ element.addEventListener(type,handler,false); } else if(element.attachEvent){ element.attachEvent('on'+type,handler); } else{ element['on'+type]=handler; } } } //删除句柄 removeHandler:function(element,type,handler){ if(element.removeEventListener){ element.removeEventListener(type,handler,false); } else if(element.detachEvent){ element.detachEvent('on'+type,handler); } else{ element['on'+type]=null; } } } }

查看全部

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

html事件处理程序缺点：html与js代码紧密耦合，更改麻烦。DOM2级事件处理程序每隔节点都有图示两个函数，返回的布尔值ture表示事件捕获流，false表示事件冒泡流，所以一般设置的是false。添加为false可最大限度兼容各种浏览器通过addEventListener（）添加的事件必须通过removeEventListener（）移除。eg：objectName.addEventListener('click',sho,false);sho为添加的函数，click为事件DOM0级与DOM2级都可给一个元素添加多个事件处理程序。事件处理程序按顺序处理。dom2级事件处理程序对IE不起作用。

查看全部

0 采集收起来源：DOM2级事件处理程序
2016-05-19
慕粉3332585 00:36

事件捕获

查看全部

0 采集收起来源：[DOM] 事件捕获
2016-05-19

首页上一页 218 219 220 221 222 223 224 下一页尾页

0/150

提交

取消

开始学习

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

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