-
DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。 它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。 优点：简单，跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性查看全部
-
(重点)事件冒泡：即事件最开始由最具体的元素（文档中嵌套最深的那个节点）接收，然后逐级向上传播至最不具体的那个节点（文档）。 事件捕获：不太具体的节点应该更早接收到元素，而最具体的节点最后接收到事件。查看全部
-
function resetM() { box.className = ''; menu.className = ''; menu.style.display = "none"; index = -1; resetA(); } title.onclick = function(event) { event = event || window.event; event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true; if(box.className == "extended"){ resetM(); } else { box.className = "extended"; menu.className = "anim_extendDown animated speed_fast"; menu.style.display = "block"; } } for(var i = 0; i < as.length; i++) { as[i].onmouseover = function() { resetA(); this.style.background = "#ccc"; index = this.getAttribute('selectid') - 1; } as[i].onclick = function() { resetM(); title.innerHTML = this.innerHTML; } } document.onclick = function() { resetM(); }查看全部
-
document.onkeydown = function (e) { e = e || window.event; if(box.className == "extended"){ if(e.keyCode == 40){ e.preventDefault ? e.preventDefault() : e.returnValue = false; index++; if(index > as.length - 1){ index = 0; } resetA(); as[index].style.backgroundColor = "#ccc"; }else if(e.keyCode == 38){ e.preventDefault ? e.preventDefault() : e.returnValue = false; index--; if(index < 0){ index = as.length - 1; } resetA(); as[index].style.backgroundColor = "#ccc"; }else if(e.keyCode == 13 && index != -1){ e.preventDefault ? e.preventDefault() : e.returnValue = false; title.innerHTML = as[index].innerHTML; index = -1; resetA(); resetM(); } } }; }查看全部
-
事件冒泡有具体到不具体查看全部
-
这里存在一个阻止冒泡事件查看全部
-
dom事件，但是这个真的需要好好的看一看到底在哪里能够用上查看全部
-
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属性处理 } }}查看全部
-
什么是事件对象？在触发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']查看全部
-
事件封装在对象中，功能封装在方法中。 单独存成文件 做Util工具 在IE中: 几乎都是属性存在的 1) event || window.event (IE 8以前) 2) srcElement属性： 用于获取目标 event.target || event.srcElement 3) cancleBubble属性: 用于阻止事件冒泡 4) returnValue属性: 用于阻止事件的默认行为 false表示阻止事件的默认行为查看全部
-
DOM2级事件处理程序 定义了两个方法： addEventListener()添加事件 removeEventListener()移除事件 三个参数设置;事件名称，处理方法(函数)，布尔值-----冒泡（false）或捕获（true） btn3.addEventListener('click',showMes,false); 注意： 1、若事件名称有on，则需去掉on。onclick -----> click，onmouseover -----> mouseover等等； 2、false 兼容所有浏览器-----事件冒泡流。 3.通过addEventListener添加的事件只能通过removeEventListener来删除。---参数要一样 btn.removeEventListener(参数);//参数必须和btn.addEventListener的参数一致，删除事件 dom0级和dom2级事件处理程序 可以给一个事件绑定多个函数，事件触发的时候会按照绑定顺序执行各个函数。 btn3.addEventListener('click',showMes,false); btn3.addEventListener('click',showMes,function(){alert(this.value）;},false);查看全部
-
DOM0级事件处理程序 （用得比较多）：先把元素取出来，然后为其属性添加一个事件的方法叫DOM0级处理程序。 它是一种较传统的方式：把一个函数赋值给一个事件处理程序的属性。 优点：简单，跨浏览器的优势 var btn2=document.getElementById("btn2");---先获取出元素，定义对象 //取得btn2按钮对象 btn2.onclick=function(){alert('这是通过DOM0级添加的事件！')}----让 事件以对象的属性 的形式出现。 //给btn2添加onclick属性查看全部
-
什么是事件对象？在触发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']查看全部
举报
0/150
提交
取消