-
IE 事件處理程序
attachEvent() 添加事件
detachEvent() 刪除事件
接收相同的兩個參數：事件處理程序的名稱和事件處理程序的函數
不使用第三參數的原因：IE8 以及更早的瀏覽器版本只支持事件冒泡！
查看全部 -
1、對于HTML事件來說，只能添加一個事件程序，且與JS的耦合過密，不利于后期的維護。
2、對于DOM0級事件，可以添加多個事件程序，但是只會執行最后一個事件。
3、對于DOM2級事件，同樣可以添加多個事件程序，并且從上到下按順序執行
DOM2級事件定義了兩個方法：
????????用于處理指定和刪除事件程序的操作，addEventListener（）和removeEventListener（）。
? ? ? ? 這兩個方法都需要接收三個參數：
????????????- 要處理的事件名
????????????- 作為事件處理程序的函數
????????????-??布爾值（true：捕獲法，false：冒泡法）。
查看全部 -
DOM0級事件處理程序 （用得比較多）：先把元素取出來，然后為其屬性添加一個事件的方法叫DOM0級處理程序。
DOM0級事件處理程序：
var y=document.getElementById('btn2');? 取得btn2按鈕對象。
btn2.onclick=function(){
????alert('這是通過DOM0級添加的事件！')
}
btn2.onclick=null;? ? 刪除onclick屬性
查看全部 -
事件流與事件冒泡順序相反，由最大的節點傳遞到最小的節點。
已采納回答?/?qq_倪洱_03939395
組織對象的事件,更符合網頁的產品需求比如點擊A只要在頁面內跳轉位置,不需要跳轉頁面,則需要攔截事件流進行阻止比如點擊一個全選按鈕,要選擇所有的列表項,則要進行事件冒泡捕獲列表的整個父div然后選中
查看全部 -
事件冒泡：事件最開始由最具體的元素（文檔中嵌套層次最深的那個節點）接收，然后逐級向上傳播至最不具體的那個節點（文檔）。
查看全部 -
添加事件處理程序 addEventListener(要處理的事件名，作為事件處理程序的函數，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;
? ?
? ? // 點擊三角時
? ? title.onclick=function(event){
? ? ? // 執行腳本
? ? ? event = event ? event : window.event;
? ? ? if(event.stopPropagation) {
? ? ? ? event.stopPropagation();
? ? ? } else {
? ? ? ? event.cancleBubble=true;
? ? ? }
? ? ? menu.style.display="block";
? ? }??
? ??
? ?// 滑過滑過、離開、點擊每個選項時
? ? 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();
? ? ? ? }
? ? }
? ?// 點擊頁面空白處時
? ? document.onclick = function() {
? ? ? ? closeMenu();
? ? }
?}
? ?</script>
</head>
<body>
<div id="divselect">
? ? ? <cite>請選擇分類</cite>
? ? ? <ul>
? ? ? ? ?<li id="li"><a href="javascript:;" selectid="1">ASP開發</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="2">.NET開發</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="3">PHP開發</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="4">Javascript開發</a></li>
? ? ? ? ?<li><a href="javascript:;" selectid="5">Java特效</a></li>
? ? ? </ul>
? ? </div>
</body>
</html>
查看全部 -
IE 中的事件對象
type 屬性：獲取事件類型
srcElement屬性：獲取事件目標
cancelBubble屬性：阻止事件冒泡
returnValue屬性：阻止事件的默認行為
查看全部 -
事件對象（event）：在觸發 DOM 上的事件時都會產生一個對象
DOM 中的事件對象
type 屬性：用于獲取事件類型
target 屬性：用于獲取事件目標
stopPropagation() 方法，阻止時間冒泡
preventDefault() 方法，阻止事件的默認行為
查看全部 -
跨瀏覽器的事件處理程序
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級事件處理程序判斷 ????????} ????}, ????//刪除句柄 ????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級事件處理程序判斷 ????????} ????} } eventUtil.addHandler(btn3,'click',showMes); eventUtil.removeHandler(btn3,'click',showMes);查看全部 -
三種事件處理
1、對于HTML事件來說，只能添加一個事件程序，且與JS的耦合過密，不利于后期的維護。
2、對于DOM0級事件，可以添加多個事件程序，但是只會執行最后一個事件。
3、對于DOM2級事件，同樣可以添加多個事件程序，并且從上到下按順序執行
? DOM2級事件定義了兩個方法：
????????用于處理指定和刪除事件程序的操作，addEventListener（）和removeEventListener（）。
????????接收三個參數：要處理的事件名、作為事件處理程序的函數和? 布爾值（true：捕獲法，false：冒泡法）。
查看全部 -
DOM0級事件處理程序 （用得比較多）：先把元素取出來，然后為其屬性添加一個事件的方法叫DOM0級處理程序。
DOM0級事件處理程序：
var y=document.getElementById('btn2');? 取得btn2按鈕對象。
btn2.onclick=function(){
????alert('這是通過DOM0級添加的事件！')
}
btn2.onclick=null;? ? 刪除onclick屬性
查看全部 -
HTML事件處理程序(現在不建議使用了):事件直接加在HTML代碼中
缺點：HTML和js代碼高耦合，如果修改，就要修改兩個地方--HTML元素內和script函數。查看全部 -
當在 子元素 與父元素同事添加onclick事件時, 注意考慮事件冒泡的情況
例如：子元素的onclick事件執行了隱藏某個元素的事件，但父元素的onclick執行了顯示這個元素的事件、當觸發事件冒泡時，瀏覽器會先觸發子元素的onclick 再 觸發 父元素的onclick? 就會把這個元素先隱藏又顯示了、就會看不到js執行效果
查看全部 -
事件捕獲：不太具體的節點應該更早接收到事件，而最具體的節點最后接收到事件。
查看全部
舉報