-
恰当的适用能力检测，即如果这个浏览器适合这个事件处理程序，就用这个，反之用另外的事件处理程序；
封装在一个对象内，把对象放在变量里面，即var eventuitil={..............这里面编写的是对象的方法};
.跨浏览器检测<br>
/*addEventLister兼容性*/<br>var eventuitil={
function addHandler(ele, type, handler) {
if (ele.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
ele.addEventListener(type, handler, false);
} else if (ele.attachEvent) { // IE 8 及更早版本
ele.attachEvent("on" + type, handler);
} else {
ele["on" + type] = handler;<br>
}
}}
eventuitil.addHandler(btn3,'click',showMes);//调用上面封装好的对象的方法
查看全部 -
1.事件冒泡：事件由子元素获取并沿DOM树向上传播
2.事件捕获：事件由根元素获取并沿DOM树向下分发查看全部 -
本章内容
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阻止事件的默认行为查看全部 -
IE中的事件对象
（非IE的事件对象用event，IE8之前用window.event)
查看全部 -
查看全部 -
事件处理程序查看全部
-
事件对象总结 1.DOM中的事件对象 event.stopPropagation();//阻止事件冒泡 （相当于Android中的拦截） event.preventDefalt();//阻止默认行为（例如：阻止a标签的href跳转） 2.IE中的事件对象 cancelBubble属性 用于阻止/取消事件冒泡 设置为true表示阻止冒泡 设置为false表示不阻止冒泡 returnValue属性 用于阻止事件的默认行为 设置为false表示阻止事件的默认行为 注意：IE8之前获取event是window.event 兼容性写法： var eventUtil = { getEvent:function(event){ //或event=event||window.event; 非IE:event,IE:window.event return event?event:window.event; }, getType:function(event){ return event.type; //非IE与IE相同 }, getElementName:function(event){ //非IE:event.target，IE:event.srcElement return event.target || event.srcElement; }, preventDefault:function(event){ //判断对象方法是否存在时,要将方法当做属性来判断 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方法处理 } } }查看全部
-
什么是事件对象？在触发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不支持该事件查看全部
-
1.页面会随着上下方向键移动，改为onkeydown事件即可 2.三角号实现： .divselect cite:after{ content:""; display:block; position:absolute; right:5px; top:10px; border-width: 4px; border-style: solid; border-color: #888 transparent transparent transparent; }查看全部
-
//解决评论区指出的两个Bug的完整代码 var arr = ['三星手机','小米1','小米2','苹果','魅族','50元话费','谢谢光临','血压仪','100元代金券','慕课网职业路径']; var timer; var flag = 0; window.onload = function(){ var play = document.getElementById('play'); var stop = document.getElementById('stop'); //鼠标抽奖 play.onclick = playFun; stop.onclick = stopFun; //键盘抽奖 document.onkeyup = function(event){ event = event || window.event; if(event.keyCode == 13){ if(flag == 0){ playFun(); }else if(flag == 1){ stopFun(); } } } } function playFun() { var title = document.getElementById('title'); var play = document.getElementById('play'); if(flag==0){ timer = setInterval(function(){ var random = Math.floor(Math.random()*arr.length); title.innerHTML = arr[random]; },100) play.style.background="#333" flag = 1; } } function stopFun(){ clearInterval(timer); flag = 0； play.style.background="#113" }查看全部
-
IE8以前的浏览器只支持事件冒泡，不支持事件捕获，它也不支持addEventListener函数，不会用第三个参数来表示是冒泡还是捕获，它提供了另一个函数attachEvent。IE9就支持addEventListener（这段是借鉴其他问题别的同学的回答）。 addEventListener()的第三个参数useCapture，这个参数决定要使用的事件处理程序的调用类型，只有在特定狀況下才会对事件产生影响，通常建议用false； 如果参数是true，事件处理程序以捕捉模式触发；从顶层的父节点开始触发事件，从外到内传播。 如果参数是false，事件处理程序以冒泡模式触发；从最内层的节点开始触发事件，逐级冒泡直到顶层节点，从内向外传播。查看全部
-
前三种方式的事件处理程序： 1 HTML事件处理程序 <input type="button" onclick="showMes()"> 2 DOM0级事件处理程序 btn.onclick=function(){} 3 DOM2级事件处理程序 btn.addEventListener("click",showMes,false) HTML事件处理程序与DOM0 DOM2级事件处理程序的区别：HTML形式的只能添加一个事件或者一个事件处理函数 而DOM0 DOM2可以添加多个事件或者事件处理函数查看全部
-
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/150
提交
取消