整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
avascript添加事件、移除事件、阻止冒泡、阻止瀏覽器默認行為等寫法(兼容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;
}
};阻止事件(包括冒泡和默認行為)
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的方法來取消事件冒泡
} else {
e.stopPropagation(); //因此它支持W3C的stopPropation()方法
}
}!+"\v1″的理解：
其實就是利用各瀏覽器對轉義字符"\v"的理解
在ie瀏覽器中，"\v"沒有轉義，得到的結果為"v"
而在其他瀏覽器中"\v"表示一個垂直制表符(一定程度上相當于空格)
僅阻止瀏覽器默認行為
var preventDefault=function(e) {
e=e || window.event;
if(e.preventDefault) {
e.preventDefault();
}else{
e.returnValue=false;
}
}取得事件源對象
var getEventTarget=function(e){
e=e || window.event;
var target=event.srcElement ? event.srcElement : event.target;
return target;
}附：綁定onpropertychange事件
onpropertychange, 它在一個元素的屬性發生變化的時候觸發, 一般用在表單元素中捕獲其value值改變, 它比onchange事件更實時捕獲它的改變,
不過為微軟私有事件。FF大致和它相似的有oninput事件, 不過它只針對textfield與textarea的value屬性。
safari, firefox, chrome與opera都支持此事件。
多人都說HTML是一門很簡單的語言，看看書，看看視頻就能讀懂。但是，如果你完全沒有接觸過，就想通過看一遍教程，背背標簽，想要完全了解HTML，真的有點太天真了。
HTML中文“超文本標記語言”，英文名叫HTML沒有變量，沒有循環，沒有函數，只是單純的一門靜態語言而已。你可以用來描述靜態的東西，比如標題、段落、圖片。
1）HTML通常被稱為靜態網頁。
2）HTML的一些標簽代碼規則將內容呈現在瀏覽器中所需的風格。
3）HTML可以使用記事本創建，并以.html為擴展名保存。
打開瀏覽器，例如打開百度的首頁
這個頁面非常的簡潔，但是包含了很多內容，有文字、圖片、動畫、超鏈接等一系列HTML頁面所能夠包含的元素。什么意思，也就是說，HTML頁面就是能夠包含文本、圖像、聲音、超鏈接等內容的集合，然后通過瀏覽器對這些元素進行渲染，就呈現出多彩的頁面。
打開頁面的審查元素（快捷鍵是【F12】），就能夠看到構成HTML頁面的所有元素，當我們在寫頁面，對頁面進行調試的時候，也是通過審查元素，在這個窗口里面檢測問題，所以審查的方法一定要掌握。
一個HTML頁面最基本框架。
優點
易于使用，松散的語法（雖然，過于靈活的將不符合標準），HTML還允許使用模板，這使設計網頁變得容易、對Web設計領域的初學者來說非常有用。幾乎所有瀏覽器都支持該功能。被廣泛使用的; 建立在幾乎所有網站上。與XML語法非常相似，后者已越來越多地用于數據存儲。免費-無需購買任何軟件，即使對于新手程序員而言，都易于學習和編碼。
缺點
由于它是一種靜態語言，它不能單獨產生動態輸出。有時，HTML文檔的結構難以掌握。程序錯誤可能會導致高昂的代價。它只能創建靜態頁面和普通頁面，因此如果我們需要動態頁面，則HTML無效。需要編寫大量代碼來制作簡單的網頁。您必須跟上已棄用的標記，并確保不要使用它們，因為出現了另一種與HTML兼容的語言代替了標記的原始工作。因此需要學習其他語言（大多數情況下是CSS）HTML提供的安全功能受到限制。
在了解這么多之后，一定想要自己寫個HTML頁面試試手，那么HTML頁面怎么寫呢，用什么工具來寫呢？在電腦上建立一個hello.txt的文件，將下面的代碼粘貼復制進去保存 。
然后將后綴名修改為.html，用瀏覽器在頁面上看到hello world字樣的輸出，這就是第一個HTML頁面。
今天我們就先分享到這里啦，趕快去練練手吧~（私信我有免費IT課程可以領取喲）
什么會有瀏覽器兼容問題
瀏覽器兼容性問題，是指因為不同的瀏覽器標準不同對同一段代碼的解析有差異或者是統一瀏覽器由于版本的不同，導致支持的特性不一樣，造成頁面顯示效果不一致。在大多數情況下，我們的需求是，無論用戶用什么瀏覽器來查看我們的頁面，都應該是統一的效果，所以需要一些方法讓他的頁面顯示效果一致。
部分兼容問題解決方案
問題一：不同瀏覽器的標簽默認的內外邊距不同
//解決方案：
*{margin:0;padding:0;}
問題二：圖片默認有間距
解決方案：使用float屬性為img布局（問題一中提到的通配符不起作用）
問題三：li之間有間距
解決方法：li設置vertical-align:middle
問題四：標簽最低高度設置min-height不兼容
解決方案：設置一個標簽的最小高度200px
p{min-height:200px;
height:auto !important;
height:200px;
overflow:visible;
}
問題五：ie各個版本的hack
//類內部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*/
問題六：常見屬性的兼容情況
問題七：clear float
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1; /* 僅對ie67有效 */
}
可能用到的技巧和工具
條件注釋 (conditional comment) 是于HTML源碼中被IE有條件解釋的語句。條件注釋可被用來向IE提供及隱藏代碼。
<!--[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]-->
IE條件注釋法(即HTML條件注釋Hack)：針對所有IE(注：IE10+已經不再支持條件注釋)： <!--[if IE]>IE瀏覽器顯示的內容 <![endif]-->，針對IE6及以下版本：<!--[if lt IE 6]>只在IE6-顯示的內容 <![endif]-->。這類Hack不僅對CSS生效，對寫在判斷語句里面的所有代碼都會生效。
能力檢測的目標不是識別特定的瀏覽器，而是識別瀏覽器的能力。使用這種方式無需顧及瀏覽器如何如何，只需確定瀏覽器是否支持特定的能力，就可以給出相關的方案。
//特性檢測
if (object.propertyInQuestion) {
//使用object.propertyInQuestion
}
瀏覽器IE8及以下IE版本對HTML5標簽的支持是有限的，我們可以通過在網頁中添加腳本的方式來解決目前IE瀏覽器對HTML5支持的問題。
<!–[if IE]> <script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script> <[endif]–>
Respond.js讓不支持css3 Media Query的瀏覽器包括IE6-IE8等其他瀏覽器支持查詢兼容響應式布局
css reset重置樣式，清除瀏覽器默認樣式，并配置適合設計的基礎樣式（強調文本是否大多是粗體、主文字色，主鏈接色，主字體等）。reset 的目的，是將所有的瀏覽器的自帶樣式重置掉，這樣更易于保持各瀏覽器渲染的一致性。例如 yui3 reset 中的一段：
ol, ul {list-style: none}
h1, h2, h3, h4, h5, h6 {font-size: 100%;font-weight: normal}
Normalize.css 是一個可定制的 CSS 文件，使瀏覽器呈現的所有元素，更一致和符合現代標準;是在現代瀏覽器環境下對于CSS reset的替代。 它正是針對只需要統一的元素樣式。該項目依賴于研究瀏覽器默認元素風格之間的差異，精確定位需要重置的樣式。 這是一個現代的，HTML5-ready 的 CSS 重置樣式集。bootstrap就使用了它，github的地址為：https://github.com/necolas/normalize.css/， Normalize.css做了以下幾件事：
Modernizr
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
