-
keyDown:当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件 keyPress:当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件 keyUp:当用户释放键盘上的键时触发查看全部
-
1.首先分析实现原理；然后分析要取出的对象，进行取出；再给对象绑定事件； 2.分析各种事件，并对其件进行函数封装； 3.块的里面的文字（状态、下）不见了：用负缩进把他们搞到窗口之外了，当代码注释使用。 4.在适当的地方阻止事件冒泡： ul父元为div，点击li时希望ul隐藏，点击div时希望其显示，在点击li后会冒泡到div ,因而需要阻止冒泡； 注意区分onmousedown和onclick，只能阻止相对应类型事件。 重点：利用事件冒泡实现切换状态菜单；当一个块内包含众多事件时，必须要注意到事件冒泡的影响。 5.在其他任何地方点击，要使列表隐藏：document.onclick是代表在页面的任何地方点击事件。 document下的子元素还有一个onclick事件，所以要注意事件冒泡的影响；查看全部
-
拖拽->鼠标跟随 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、鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。 3、js ie10以下版本不支持document.getElementsByClassName 4、js封装getClass方法，获取class 5、实现随鼠标拖动，需要让窗口的坐标随着鼠标移动，鼠标的坐标保存在时间的clientX和clientY两个属性中。 6、onmousedown鼠标按下 窗口和鼠标的位置同步； element.style.left/top=clientX/Y+'px'; onmousemove当鼠标指针在元素内部移动时重复地触发查看全部
-
2.IE中的事件对象 a.type属性 用于获取事件类型 b.srcElement属性 用于获取事件目标 c.cancelBubble属性 用于阻止/取消事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡 d.returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为 getEvent:function(event){ return event?event:window.event;//或event=eventwindow.event; 非IE:event,IE:window.event }, getType:function(event){ return event.type; //非IE与IE相同 }, getElement:function(event){ return event.target event.srcElement; //非IE:event.target，IE:event.srcElement }, preventDefault:function(event){ if(event.preventDefault){//判断对象方法是否存在时,要将方法当做属性来判断[函数名后不加小括号:if(对象.方法函数)],很多方法没有返回值,即使有返回值也不一定是布尔值,如果是if(方法函数())时会出现不可预料的结果 event.preventDefault(); //非IE方法处理 }else{ event.returnValue=false; //IE方法处理 } }, stopPropagation:function(event){ if(event.stopPropagation){ //event.stopPropagation:以属性的形式进行判断 event.stopPropagation(); //非IE方法处理 }else{ event.cancelBubble=true; //IE方法处理 } }查看全部
-
什么是事件对象？在触发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']查看全部
-
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不支持该事件查看全部
-
DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。 它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。 优点：简单，跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性查看全部
-
HTML事件处理程序，现在不建议使用了。 1. 事件直接加在HTML代码中: 缺点：HTML和js代码高耦合，如果修改，就要修改两个地方：HTML元素内和script函数。查看全部
-
事件冒泡：即事件最开始由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 事件捕获：不太具体的节点应该更早接收到元素，而最具体的节点最后接收到事件。查看全部
-
跨浏览器解决事件处理程序查看全部
-
DOM事件 参数的事件名不要加on IE事件 参数的事件名要加on查看全部
-
事件对象查看全部
举报
0/150
提交
取消