avascript添加事件、移除事件、阻止冒泡、阻止瀏覽器默認(rèn)行為等寫法(兼容IE/FF/CHROME)

添加事件

var addEvent=function( obj, type, fn ) {
    if (obj.addEventListener)
    obj.addEventListener( type, fn, false );
    else if (obj.attachEvent) {
    obj["e"+type+fn]=fn;
    obj.attachEvent( "on"+type, function() {
    obj["e"+type+fn].call(obj, window.event);
    } );
    }
};

使用方法:

window.onload=function(){
var it=document.getElementsByTagName("input")[0];
addEvent(it,'click',f1);
}

移除事件

var removeEvent=function( obj, type, fn ) {
    if (obj.removeEventListener)
    obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent) {
    obj.detachEvent( "on" +type, obj["e"+type+fn] );
    obj["e"+type+fn]=null;
    }
};

阻止事件(包括冒泡和默認(rèn)行為)

var stopEvent=function(e){
    e=e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    e.stopPropagation();
    }else{
    e.returnValue=false;
    e.cancelBubble=true;
    }
},

僅阻止事件冒泡

var stopPropagation=function(e) {
    e=e || window.event;
    if (!+"\v1″) {
    e.cancelBubble=true; //否則,我們得使用IE的方法來(lái)取消事件冒泡
    } else {
    e.stopPropagation(); //因此它支持W3C的stopPropation()方法
    }
}

!+"\v1″的理解：

其實(shí)就是利用各瀏覽器對(duì)轉(zhuǎn)義字符"\v"的理解

在ie瀏覽器中，"\v"沒(méi)有轉(zhuǎn)義，得到的結(jié)果為"v"

而在其他瀏覽器中"\v"表示一個(gè)垂直制表符(一定程度上相當(dāng)于空格)

僅阻止瀏覽器默認(rèn)行為

var preventDefault=function(e) {
    e=e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    }else{
    e.returnValue=false;
    }
}

取得事件源對(duì)象

var getEventTarget=function(e){
    e=e || window.event;
    var target=event.srcElement ? event.srcElement : event.target;
    return target;
}

附：綁定onpropertychange事件

onpropertychange, 它在一個(gè)元素的屬性發(fā)生變化的時(shí)候觸發(fā), 一般用在表單元素中捕獲其value值改變, 它比onchange事件更實(shí)時(shí)捕獲它的改變,

不過(guò)為微軟私有事件。FF大致和它相似的有oninput事件, 不過(guò)它只針對(duì)textfield與textarea的value屬性。

safari, firefox, chrome與opera都支持此事件。

多人都說(shuō)HTML是一門很簡(jiǎn)單的語(yǔ)言，看看書，看看視頻就能讀懂。但是，如果你完全沒(méi)有接觸過(guò)，就想通過(guò)看一遍教程，背背標(biāo)簽，想要完全了解HTML，真的有點(diǎn)太天真了。

HTML中文“超文本標(biāo)記語(yǔ)言”，英文名叫HTML沒(méi)有變量，沒(méi)有循環(huán)，沒(méi)有函數(shù)，只是單純的一門靜態(tài)語(yǔ)言而已。你可以用來(lái)描述靜態(tài)的東西，比如標(biāo)題、段落、圖片。

1）HTML通常被稱為靜態(tài)網(wǎng)頁(yè)。

2）HTML的一些標(biāo)簽代碼規(guī)則將內(nèi)容呈現(xiàn)在瀏覽器中所需的風(fēng)格。

3）HTML可以使用記事本創(chuàng)建，并以.html為擴(kuò)展名保存。

打開瀏覽器，例如打開百度的首頁(yè)

這個(gè)頁(yè)面非常的簡(jiǎn)潔，但是包含了很多內(nèi)容，有文字、圖片、動(dòng)畫、超鏈接等一系列HTML頁(yè)面所能夠包含的元素。什么意思，也就是說(shuō)，HTML頁(yè)面就是能夠包含文本、圖像、聲音、超鏈接等內(nèi)容的集合，然后通過(guò)瀏覽器對(duì)這些元素進(jìn)行渲染，就呈現(xiàn)出多彩的頁(yè)面。

打開頁(yè)面的審查元素（快捷鍵是【F12】），就能夠看到構(gòu)成HTML頁(yè)面的所有元素，當(dāng)我們?cè)趯戫?yè)面，對(duì)頁(yè)面進(jìn)行調(diào)試的時(shí)候，也是通過(guò)審查元素，在這個(gè)窗口里面檢測(cè)問(wèn)題，所以審查的方法一定要掌握。

一個(gè)HTML頁(yè)面最基本框架。

優(yōu)點(diǎn)

易于使用，松散的語(yǔ)法（雖然，過(guò)于靈活的將不符合標(biāo)準(zhǔn)），HTML還允許使用模板，這使設(shè)計(jì)網(wǎng)頁(yè)變得容易、對(duì)Web設(shè)計(jì)領(lǐng)域的初學(xué)者來(lái)說(shuō)非常有用。幾乎所有瀏覽器都支持該功能。被廣泛使用的; 建立在幾乎所有網(wǎng)站上。與XML語(yǔ)法非常相似，后者已越來(lái)越多地用于數(shù)據(jù)存儲(chǔ)。免費(fèi)-無(wú)需購(gòu)買任何軟件，即使對(duì)于新手程序員而言，都易于學(xué)習(xí)和編碼。

缺點(diǎn)

由于它是一種靜態(tài)語(yǔ)言，它不能單獨(dú)產(chǎn)生動(dòng)態(tài)輸出。有時(shí)，HTML文檔的結(jié)構(gòu)難以掌握。程序錯(cuò)誤可能會(huì)導(dǎo)致高昂的代價(jià)。它只能創(chuàng)建靜態(tài)頁(yè)面和普通頁(yè)面，因此如果我們需要?jiǎng)討B(tài)頁(yè)面，則HTML無(wú)效。需要編寫大量代碼來(lái)制作簡(jiǎn)單的網(wǎng)頁(yè)。您必須跟上已棄用的標(biāo)記，并確保不要使用它們，因?yàn)槌霈F(xiàn)了另一種與HTML兼容的語(yǔ)言代替了標(biāo)記的原始工作。因此需要學(xué)習(xí)其他語(yǔ)言（大多數(shù)情況下是CSS）HTML提供的安全功能受到限制。

在了解這么多之后，一定想要自己寫個(gè)HTML頁(yè)面試試手，那么HTML頁(yè)面怎么寫呢，用什么工具來(lái)寫呢？在電腦上建立一個(gè)hello.txt的文件，將下面的代碼粘貼復(fù)制進(jìn)去保存 。

然后將后綴名修改為.html，用瀏覽器在頁(yè)面上看到hello world字樣的輸出，這就是第一個(gè)HTML頁(yè)面。

今天我們就先分享到這里啦，趕快去練練手吧~（私信我有免費(fèi)IT課程可以領(lǐng)取喲）

//解決方案： 
 *{margin:0;padding:0;}

p{min-height:200px; 
 height:auto !important; 
 height:200px; 
 overflow:visible;
} 

//類內(nèi)部hack：
.header {_width:100px;} /* IE6專用*/
.header {*+width:100px;} /* IE7專用*/
.header {*width:100px;} /* IE6、IE7共用*/
.header {width:100px\0;} /* IE8、IE9共用*/
.header {width:100px\9;} /* IE6、IE7、IE8、IE9共用*/
.header {width:330px\9\0;} /* IE9專用*/

//選擇器Hack：
*html .header{} /*IE6*/ 
*+html .header{} /*IE7*/ 

.clearfix:after{
 content: '';
 display: block;
 clear: both;
}
.clearfix{
 *zoom: 1; /* 僅對(duì)ie67有效 */
} 

 <!--[if IE 6]>
 <p>You are using Internet Explorer 6.</p>
 <![endif]-->
 <!--[if !IE]><!-->
 <script>alert(1);</script>
 <!--<![endif]-->
 <!--[if IE 8]>
 <link href="ie8only.css" rel="stylesheet">
 <![endif]--> 

 //特性檢測(cè)
if (object.propertyInQuestion) {
 //使用object.propertyInQuestion
 }

<!–[if IE]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> 
<[endif]–>

ol, ul {list-style: none}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}