-
IE 事件處理程序
attachEvent() 添加事件
detachEvent() 刪除事件
接收相同的兩個(gè)參數(shù)：事件處理程序的名稱和事件處理程序的函數(shù)
不使用第三參數(shù)的原因：IE8 以及更早的瀏覽器版本只支持事件冒泡！
查看全部 -
1、對(duì)于HTML事件來(lái)說(shuō)，只能添加一個(gè)事件程序，且與JS的耦合過(guò)密，不利于后期的維護(hù)。
2、對(duì)于DOM0級(jí)事件，可以添加多個(gè)事件程序，但是只會(huì)執(zhí)行最后一個(gè)事件。
3、對(duì)于DOM2級(jí)事件，同樣可以添加多個(gè)事件程序，并且從上到下按順序執(zhí)行
DOM2級(jí)事件定義了兩個(gè)方法：
????????用于處理指定和刪除事件程序的操作，addEventListener（）和removeEventListener（）。
? ? ? ? 這兩個(gè)方法都需要接收三個(gè)參數(shù)：
????????????- 要處理的事件名
????????????- 作為事件處理程序的函數(shù)
????????????-??布爾值（true：捕獲法，false：冒泡法）。
查看全部 -
DOM0級(jí)事件處理程序 （用得比較多）：先把元素取出來(lái)，然后為其屬性添加一個(gè)事件的方法叫DOM0級(jí)處理程序。
DOM0級(jí)事件處理程序：
var y=document.getElementById('btn2');? 取得btn2按鈕對(duì)象。
btn2.onclick=function(){
????alert('這是通過(guò)DOM0級(jí)添加的事件！')
}
btn2.onclick=null;? ? 刪除onclick屬性
查看全部 -
事件流與事件冒泡順序相反，由最大的節(jié)點(diǎn)傳遞到最小的節(jié)點(diǎn)。
已采納回答?/?qq_倪洱_03939395
組織對(duì)象的事件,更符合網(wǎng)頁(yè)的產(chǎn)品需求比如點(diǎn)擊A只要在頁(yè)面內(nèi)跳轉(zhuǎn)位置,不需要跳轉(zhuǎn)頁(yè)面,則需要攔截事件流進(jìn)行阻止比如點(diǎn)擊一個(gè)全選按鈕,要選擇所有的列表項(xiàng),則要進(jìn)行事件冒泡捕獲列表的整個(gè)父div然后選中
查看全部 -
事件冒泡：事件最開始由最具體的元素（文檔中嵌套層次最深的那個(gè)節(jié)點(diǎn)）接收，然后逐級(jí)向上傳播至最不具體的那個(gè)節(jié)點(diǎn)（文檔）。
查看全部 -
添加事件處理程序 addEventListener(要處理的事件名，作為事件處理程序的函數(shù)，bool)
查看全部 -
代碼
<!doctype html>
<html>
<head>
? ? <meta charset="UTF-8">
? ? <title>下拉菜單</title>
<style type="text/css">
body,ul,li{ margin:0; padding:0; font-size:13px;}
ul,li{list-style:none;}
#divselect{width:186px; margin:80px auto; position:relative; z-index:10000;}
#divselect cite{width:150px; height:24px;line-height:24px; display:block; color:#807a62; cursor:pointer;font-style:normal;
padding-left:4px; padding-right:30px; border:1px solid #333333;?
background:url(xjt.png) no-repeat right center;}
#divselect ul{width:184px;border:1px solid #333333; background-color:#ffffff; position:absolute; z-index:20000; margin-top:-1px; display:none;}
#divselect ul li{height:24px; line-height:24px;}
#divselect ul li a{display:block; height:24px; color:#333333; text-decoration:none; padding-left:10px; padding-right:10px;}
</style>
? ?<script type="text/javascript">
window.onload=function(){
var box=document.getElementById('divselect'),
? ? title=box.getElementsByTagName('cite')[0],
? ? menu=box.getElementsByTagName('ul')[0],
? ? as=box.getElementsByTagName('a'),
? ? ? ? index=-1;
? ?
? ? // 點(diǎn)擊三角時(shí)
? ? title.onclick=function(event){
? ? ? // 執(zhí)行腳本
? ? ? event = event ? event : window.event;
? ? ? if(event.stopPropagation) {
? ? ? ? event.stopPropagation();
? ? ? } else {
? ? ? ? event.cancleBubble=true;
? ? ? }
? ? ? menu.style.display="block";
? ? }??
? ??
? ?// 滑過(guò)滑過(guò)、離開、點(diǎn)擊每個(gè)選項(xiàng)時(shí)
? ? var addBg = function(ele) {
? ? ? ? ele.style.background='#999';
? ? }
? ? var removeBg = function(ele) {
? ? ? ? ele.style.background='#fff';
? ? }
? ? var removeBgs = function() {
? ? ? ? for(var i=0, len= as.length;i<len;i++) {
? ? ? ? ? ? removeBg(as[i]);
? ? ? ? }
? ? }
var closeMenu = function(){
index = -1;
? ? ? ? menu.style.display="none";
}
? ? for(var i=0, len= as.length;i<len;i++) {
? ? ? ? as[i].onmouseover = function() {
removeBgs();
? ? ? ? ? ? addBg(this);
? ? ? ? }
? ? ? ? as[i].onmouseout = function() {
? ? ? ? ? ? // this.style.background='#fff';
? ? ? ? ? ? removeBg(this);
? ? ? ? }
? ? ? ? as[i].onclick = function(e) {
? ? ? ? ? ? e = e ? e: window.event;
? ? ? ? ? ? if(e.stopPropagation) {
? ? ? ? ? ? ? ? e.stopPropagation();
? ? ? ? ? ? }
? ? ? ? ? ? else {
? ? ? ? ? ? ? ? e.cancleBubble=true;
? ? ? ? ? ? }
? ? ? ? ? ? title.innerHTML = this.innerHTML;
closeMenu();
? ? ? ? }
? ? }
? ??
? ? document.onkeyup = function(e) {
? ? ? ? if (menu.style.display === "none") {
? ? ? ? ? ? return false;
? ? ? ? }
? ? ? ? var keyNum = e.keyCode,
len = as.length;
? ? ? ? if(keyNum === 38) { //上方向
? ? ? ? ? ? if (index <= 0) {
? ? ? ? ? ? ? ? index = len;
? ? ? ? ? ? }
? ? ? ? ? ? index--;
? ? ? ? ? ? removeBgs();
? ? ? ? ? ? addBg(as[index]);
? ? ? ? } else if(keyNum === 40) {? //下方向
? ? ? ? ? ? index++;
? ? ? ? ? ? if (index >= len) {
? ? ? ? ? ? ? ? index = 0;
? ? ? ? ? ? }
? ? ? ? ? ? removeBgs();
? ? ? ? ? ? addBg(as[index]);
? ? ? ? } else if(keyNum === 13) {? //回車
? ? ? ? ? ? if (index === -1) {
? ? ? ? ? ? ? ? return false;
? ? ? ? ? ? }
? ? ? ? ? ? removeBgs();
? ? ? ? ? ? as[index].click();
? ? ? ? }
? ? }
? ?// 點(diǎn)擊頁(yè)面空白處時(shí)
? ? document.onclick = function() {
? ? ? ? closeMenu();
? ? }
?}
? ?</script>
</head>
<body>
<div id="divselect">
? ? ? <cite>請(qǐng)選擇分類</cite>
? ? ? <ul>
? ? ? ? ?<li id="li"><a href="javascript:;" selectid="1">ASP開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="2">.NET開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="3">PHP開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="4">Javascript開發(fā)</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="5">Java特效</a></li>
? ? ? </ul>
? ? </div>
</body>
</html>
查看全部 -
IE 中的事件對(duì)象
type 屬性：獲取事件類型
srcElement屬性：獲取事件目標(biāo)
cancelBubble屬性：阻止事件冒泡
returnValue屬性：阻止事件的默認(rèn)行為
查看全部 -
事件對(duì)象（event）：在觸發(fā) DOM 上的事件時(shí)都會(huì)產(chǎn)生一個(gè)對(duì)象
DOM 中的事件對(duì)象
type 屬性：用于獲取事件類型
target 屬性：用于獲取事件目標(biāo)
stopPropagation() 方法，阻止時(shí)間冒泡
preventDefault() 方法，阻止事件的默認(rèn)行為
查看全部 -
跨瀏覽器的事件處理程序
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;//DOM0級(jí)事件處理程序判斷 ????????} ????}, ????//刪除句柄 ????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;//DOM0級(jí)事件處理程序判斷 ????????} ????} } eventUtil.addHandler(btn3,'click',showMes); eventUtil.removeHandler(btn3,'click',showMes);查看全部 -
三種事件處理
1、對(duì)于HTML事件來(lái)說(shuō)，只能添加一個(gè)事件程序，且與JS的耦合過(guò)密，不利于后期的維護(hù)。
2、對(duì)于DOM0級(jí)事件，可以添加多個(gè)事件程序，但是只會(huì)執(zhí)行最后一個(gè)事件。
3、對(duì)于DOM2級(jí)事件，同樣可以添加多個(gè)事件程序，并且從上到下按順序執(zhí)行
? DOM2級(jí)事件定義了兩個(gè)方法：
????????用于處理指定和刪除事件程序的操作，addEventListener（）和removeEventListener（）。
????????接收三個(gè)參數(shù)：要處理的事件名、作為事件處理程序的函數(shù)和? 布爾值（true：捕獲法，false：冒泡法）。
查看全部 -
DOM0級(jí)事件處理程序 （用得比較多）：先把元素取出來(lái)，然后為其屬性添加一個(gè)事件的方法叫DOM0級(jí)處理程序。
DOM0級(jí)事件處理程序：
var y=document.getElementById('btn2');? 取得btn2按鈕對(duì)象。
btn2.onclick=function(){
????alert('這是通過(guò)DOM0級(jí)添加的事件！')
}
btn2.onclick=null;? ? 刪除onclick屬性
查看全部 -
HTML事件處理程序(現(xiàn)在不建議使用了):事件直接加在HTML代碼中
缺點(diǎn)：HTML和js代碼高耦合，如果修改，就要修改兩個(gè)地方--HTML元素內(nèi)和script函數(shù)。查看全部 -
當(dāng)在 子元素 與父元素同事添加onclick事件時(shí), 注意考慮事件冒泡的情況
例如：子元素的onclick事件執(zhí)行了隱藏某個(gè)元素的事件，但父元素的onclick執(zhí)行了顯示這個(gè)元素的事件、當(dāng)觸發(fā)事件冒泡時(shí)，瀏覽器會(huì)先觸發(fā)子元素的onclick 再 觸發(fā) 父元素的onclick? 就會(huì)把這個(gè)元素先隱藏又顯示了、就會(huì)看不到j(luò)s執(zhí)行效果
查看全部 -
事件捕獲：不太具體的節(jié)點(diǎn)應(yīng)該更早接收到事件，而最具體的節(jié)點(diǎn)最后接收到事件。
查看全部
舉報(bào)