布爾操作符
!false //true
!"blue" //false
!0 //true
!NaN //true
!" " //true
!12345 //false
邏輯與操作可以應用于任何類型的操作數(shù)宗苍，而不僅僅是布爾值。在有一個操作數(shù)不是布爾值的情況下，邏輯與操作不一定返回布爾值讳窟；此時让歼，它遵循以下規(guī)則：
1.如果第一個操作數(shù)是對象彻磁，則返回第二個操作數(shù)辰晕；
2.如果第二個操作數(shù)是對象，則只有第一個操作數(shù)的求值結果為true的情況下才會返回該對象
3.如果兩個操作數(shù)都是對象育八，則返回第二個操作數(shù)补箍；
4.如果有一個操作數(shù)是null改执，則返回null；
5.如果有一個操作數(shù)是NaN坑雅，則返回NaN辈挂；
6.如果有一個操作數(shù)是undefined，則返回undefined裹粤；
邏輯與操作屬于短路操作终蒂，即如果第一個操作數(shù)能夠決定結果，那么就不會再對第二個操作數(shù)求值遥诉。對于邏輯與操作而言拇泣，如果第一個操作數(shù)是false，則無論第二個操作數(shù)是什么值矮锈，結果都不再可能是true了霉翔。來看下面的例子：
var found=true;
var result=(found && someUndefinedVariable) //這里會發(fā)生錯誤
alert(result) //這一行不會被執(zhí)行
在上面的代碼中，當執(zhí)行邏輯與會發(fā)生錯誤苞笨，因為變量someUndefinedVariable沒有聲明早龟。由于變量found的值是true，所以邏輯與操作符會繼續(xù)對變量someUndefinedVariable求值猫缭。但someUndefinedVariable尚未定義葱弟，因此就會導致錯誤。這說明不能邏輯與操作中使用未定義的值猜丹。
var found=false;
var result=(found && someUndefinedVariable) //不會發(fā)生錯誤
alert(result) //會被執(zhí)行
邏輯或與之相反
相等操作符
null==undefined //true
'NaN'==NaN //false
5==NaN //false
NaN==NaN //false
NaN!=NaN //true
false==0 //false
true==1 //true
true==2 //false
undefined==0 //false
null==0 //false
'5'==5//true
全等和不全等
var result1=("55" == 55); //true 因為轉換后相等
var result2=("55" === 55); //false 因為不同的數(shù)據類型不想等
var result1=("55" != 55); //false 因為轉換后相等
var result2=("55" !== 55); //true 因為不同的數(shù)據類型不想等
記住:
null==undefined //true 因為它們是類似的值
null===undefined //false 因為它們是不同類型的值
條件操作符
variable = boolean_expression ? true_value : false_value
檢測類型
typeof "Nicholas" //string
typeof null //object
typeof new Object（）//object
雖然在檢測基本數(shù)據類型時typeof是非常得力的助手芝加，但在檢測引用類型的是值時，這個操作符的用處不大射窒。通常藏杖，我們并不是想知道某個值是對象，而是想知道它是什么類型的對象脉顿。為此蝌麸，ECMAscript提供了instanceof操作符，其語法如下：
person instanceof Object //true
colors instanceof Array //true
傳遞參數(shù)
function addTen(){
num+=10;
return num;
}
var count=20;
var result=addTen(count)
alert(count) //20,沒有變化
alert(result) //30
function setName(obj){
obj.name="Nicholas"
}
var person=new Object();
setName(person);
alert(person.name); //Nicholas
function setName(obj){
obj.name="Nicholas"
obj=new Object()
obj.name="Greg"
}
var person=new Object();
setName(person);
alert(person.name); //Nicholas
以上代碼中創(chuàng)建一個對象艾疟，并將其保存在了變量person中来吩。然后敢辩，這個變量被傳遞到setName函數(shù)中之后就被復制給了obj。在這個函數(shù)內部弟疆，obj和erson引用的是同一個對象戚长。換句話說，即使這個變量是按值傳遞的怠苔，obj也會按引用來訪問同一對象
引用類型：
Object類型
一般來說同廉，訪問對象屬性時使用的都是點表示法，這也是很多面向對象語言中的通用的語法柑司。不過迫肖，在javacript也可以使用方括號表示法來訪問對象屬性。在使用方括號語法時攒驰，應該將要訪問的屬性以字符串的形式放在方括號中蟆湖，如下面的例子所示：
person["name"] //Nicholas
person.name //Nicholas
var propetyName="name"
person[propetyName] //Nicholas
person["first name"] = 'Nicholas'
由于first name中包含一個空格，所以不能使用點表示法來訪問它讼育。然而帐姻，屬性名中是可以包含非字母非數(shù)字的稠集，這時候就可以使用方括號表示法來訪問它們
Array類型
數(shù)組的length屬性很有特點奶段，它不是只讀的。因此剥纷，通過設置這個屬性痹籍，可以從數(shù)組的末尾移除或向數(shù)組中添加新項。
var colors=["red","green","yellow"]
colors.length=2;
alert(colors[2]) //undefined
var colors=["red","green","yellow"]
colors.length=4;
alert(colors[3]) //undefined
檢測數(shù)組
Array.isArray(value) //true or false
棧方法
var colors=["red","green","yellow"]
colors.push("black")
var item=colors.pop() //取得最后一項
alert(item) //"black"
colors.length=2
var item=colors.shift() //取得第一項
alert(item) //"red"
colors.length=2
colors.unshift("black") //跟push相反
push!=unshift
pop!=shift
重排序方法
reverse（）和sort（）
arr.reverse()
function compare(val1,val2){
if(val1<val2){return -1}
else if(val1>val2){return 1}
else{return 0}
}
//升序
function compare(val1,val2){
if(val1<val2){return 1}
else if(val1>val2){return -1}
else{return 0}
}
//降序
var values=["0","1","5","15","10"]
values.sort(compare);
alert(values) //0,1,5,10,15
操作方法
concat() 合并數(shù)組
arr1.concat(arr2)
slice()
var colors=["yeloow","red","black","blue","pink"]
colors.slice(1) // red,black,blue,pink
colors.slice(1,4) //red,black,blue //如果有兩個參數(shù)晦鞋，該方法返回起始和結束位置之間的項蹲缠，但不包括結束位置的項
splice()
刪除：可以刪除任意數(shù)量的項，只需指定2個參數(shù)：要刪除的第一項的位置和要刪除的項數(shù)悠垛。例如线定，splice（0，2）會刪除數(shù)組中的前兩項
插入：可以向指定位置插入任意數(shù)量的項确买，只需提供3個參數(shù)斤讥，起始位置、0（要刪除的項數(shù)）和要插入的項湾趾。如果要插入多個項芭商，可以再傳第四、第五搀缠，以至任何多個項铛楣。例如，colors.splice(2,0,"red","yellow") 會從當前數(shù)組的位置2開始插入字符串red和yellow
替換：可以向指定位置插入任意數(shù)量的項艺普，且同時刪除任意數(shù)量的項簸州，只需指定3個參數(shù)：起始位置鉴竭、要刪除的項數(shù)和要插入的任意數(shù)量的項。插入的項數(shù)不必和刪除的項數(shù)相等勿侯。例如拓瞪，splice(2,1,"red","yellow")會刪除當前數(shù)組位置2的項，然后再從位置2開始插入字符串red和yellow
位置方法
indexOf() //從頭開始找
lastIndexOf() //末尾開始找
var numbers=["1","2","3"]
alert(numbers.indexOf(2)) //1 如果是-1 就是找不到
迭代方法
every()
filter()
forEach()
map()
some()
var numbers=["1","2","3","4","5","4","3","2","1"]
var everyResult=numbers.every(function(item,index,array){
return(item>2)
})
alert(everyResult) //false //并不是每個都大于2
var someResult=numbers.some(function(item,index,array){
return(item>2)
})
alert(someResult) //true //有些是大于2
var filterResult=numbers.filter(function(item,index,array){
return(item>2)
})
alert(filterResult) //[3,4,5,4,3]
var mapResult=numbers.map(funciton(item,index,array){
return item *2
})
alert(mapResult) //[2,4,6,8,10,8,6,4,2]
numbers.forEach(function(item,index,array){
alert(item)
})
RegExp實例方法
RegExp對象的主要方法是exec助琐，exec接受一個參數(shù)祭埂，即要應用模式的字符串，然后返回包含第一個匹配項信息的數(shù)組兵钮；或者在沒有匹配項的情況下返回null蛆橡。返回的數(shù)組雖然是Array的實例，但包含了兩個額外的屬性：index和input掘譬。其中index表示匹配項在字符串中的位置泰演，而input表示應用正則表達式的字符串。在數(shù)組中葱轩，第一項是與整個模式匹配的字符串睦焕，其他項是與模式中的捕獲組匹配的字符串。
var text="mom and dad and baby";
var pattern=/mom( and dad( and baby)?)?/gi;
var matches=pattern.exec(text)
console.log(matches.index) //0
console.log(matches.input) //mom and dad and baby
console.log(matches)
正則表達式的第二個方法是test靴拱，它接受一個字符串參數(shù)垃喊。在模式與該參數(shù)匹配的情況下返回true，否則返回false袜炕。在只想知道目標字符串與某個模式是否匹配本谜，但不需要知道其文本內容的情況下，使用這個方法非常方便偎窘。因此乌助，test方法經常被用在if語句中，如下所示
var text="000-000-000";
var parttern=/\d{3}-\d{2}-\d{4};
if(parttern.test(text)){
console.log("the parttern was mathed")
}
Function類型
function num(num1,num2){
return num1+num2;
}
var num=function(num1,num2){
return num1+num2;
}
函數(shù)聲明與函數(shù)表達式
函數(shù)聲明調用不分先后
sum(10,10);
function sum(num1,num2){
return num1+num2
}
以上代碼完全可以正常運行
sum(10,10);
var sum=function(num1,num2){
return num1+num2;
}
以上代碼會在運行期間產生錯誤
作為值的函數(shù)
排序實例
function creatComparisonFunction(propertyName){
return function(obj1,obj2){
var value1=obj1[propertyName];
var value2=obj2[propertyName];
if(value1<value2){
return -1;
}else if(value1>value2){
return 1
}else{
return 0;
}
}
}
var data=[{name:"Zachary",age:28},{name:"Nicholas",age:29}];
data.sort(creatComparisonFunction("name")) //根據名字排序
data.sort(creatComparisonFunction("age")) //根據年齡排序
Number類型
var num =10;
num.toFixed(2); //10.00
String類型
var str="hello";
var result=str.concat("word")
var str="hello world";
str.slice(3); // lo world
str.substring(3); // lo world
str.substr(3); // lo world
str.slice(3,7); // lo w 這個7是結束第7個陌知，不包含7
str.substring(3,7); // lo w 這個7是結束第7個他托，不包含7
str.substr(3,7); // lo worl 這個7是要返回的個數(shù)
轉換大小寫
var str="hello world"
console.log(str.toLocaleUpperCase()) //HELLO WORLD
console.log(str.toUpperCase()) //HELLO WORLD
console.log(str.toLocaleLowerCase()) //hello world
console.log(str.toLowerCase()) //hello world
查找
var text="cat,bat,sat,fat";
var pos=text.search(/at/);
console.log(pos) //1
替換
var text="cat,bat,sat,fat";
var result=text.replace("at","ond")
console.log(result) //cond,bat,sat,fat
result=text.replace(/at/g,"ond")
console.log(result) //cond,bond,sond,fond
var colorText="red,yellow,blue,pink";
colorText=colorText.split(",");//["red", "yellow", "blue", "pink"]
colorText=colorText.split(",",2);//["red", "yellow"]
console.log(colorText)
var max=Math.max(3,54,32,16);
var min=Math.min(3,54,32,16);
console.log(max) //54
console.log(min) //3
Math.ceil() //向上舍入
Math.floor() //向下舍入
Math.round() //正常舍入
Math.random() //返回大于等于0小于1的隨機數(shù)
每個函數(shù)都包含兩個非繼承而來的方法：apply()和call()
這兩個方法的用途都是在特定的作用域中調用函數(shù)仆葡，實際上等于設置函數(shù)體內的this對象的值。
首先apply方法接收兩個參數(shù)：一個是在其中運行函數(shù)的作用域登刺，另一個是參數(shù)數(shù)組嗡呼。
其中，第二個參數(shù)可以是Array的實例南窗，也可以argumenst對象郎楼；例如：
function sum(num1,num2){
return num1+num2
}
function callSum1(num1,num2){
return sum.apply(this,arguments); //此方法等價于return this.sum(num1,num2);
}
function callSum2(num1,num2){
return sum.apply(this,[num1,num2])
}
console.log(callSum1(10,10)) //20
console.log(callSum2(2,2)) //4
call()方法與apply()方法的作用相同窒悔，他們的區(qū)別僅在于接收參數(shù)的方式不同呜袁。對于call方法而言，第一個參數(shù)是this值沒有變化简珠，變化的是其余參數(shù)都直接傳遞給函數(shù)阶界。換句話說，在使用call方法時聋庵，傳遞給函數(shù)的參數(shù)必須逐個列舉出來膘融，如下面的列子所示
function sum(num1,num2){
return num1+num2
}
function callSum1(num1,num2){
return sum.call(this,num1,num2); //此方法等價于return this.sum(num1,num2);
}
console.log(callSum1(10,10)) //20
事實上，傳遞參數(shù)并非apply和call真正的用武之地祭玉；它們真正強大的地方是能夠擴充函數(shù)賴以生存的作用域氧映，下面來看一個例子：
window.color="red";
var o={color:"blue"};
function sayColor(){
console.log(this.color)
}
sayColor() //red
sayColor.call(this) //red
sayColor.call(window) //red
sayColor.call(o) //blue
但是當運行sayColor.call(o)時，函數(shù)的執(zhí)行環(huán)境就不一樣了脱货，因此此時函數(shù)體內的this對象指向了o岛都，于是結果顯示是blue
面向對象程序設計
創(chuàng)建對象
1.工廠模式
function creatPerson(name,age,job){
var o=new Object();
o.name=name;
o.age=age;
o.job=job;
o.sayName=function(){
console.log(this.name);
}
return o
}
var person1=creatPerson("zuozuo",23,"IT");
person1.sayName()
2.構造函數(shù)模式
構造函數(shù)可用來創(chuàng)建特定類型的對象。像Object和Array這樣的原生構造函數(shù)振峻，在運行時會自動出現(xiàn)在執(zhí)行環(huán)境中臼疫。此外，也可以創(chuàng)建自定義的構造函數(shù)铺韧，從而定義自定義對象類型的屬性和方法多矮。例如
function Person(name,age,job){
this.name=name;
this.age=age;
this.job=job;
this.sayName=function(){
console.log(this.name)
}
}
var person1=new Person("zuo",33,"IT");
person1.sayName()
沒有顯式的創(chuàng)建對象
直接將屬性和方法賦給了this對象
沒有return語句
按照慣例缓淹，構造函數(shù)始終都應該以一個大寫字母開頭哈打，而非構造函數(shù)則應該以一個小寫字母開頭。
這個做法借鑒其他OO語言讯壶，主要是為了區(qū)別與ECMAScript中的其他函數(shù)料仗，因為構造函數(shù)本身也是一個函數(shù)，只不過可以用來創(chuàng)建對象而已伏蚊。
要創(chuàng)建Person的新實例立轧，必須使用new操作符
這兩個對象都有一個constructor屬性，該屬性指向Person
任何函數(shù)躏吊，只要通過new操作符來調用，那它就可以作為構造函數(shù)
3.原型模式
我們創(chuàng)建的每一個函數(shù)都有一個prototype（原型）屬性比伏，這個屬性是一個指針葛躏，指向一個對象舰攒，而這個對象的用途是包含可以由特定類型的所有實例共享的屬性和方法摩窃。如果按照字面意思來理解充择，那么prototype就是通過調用構造函數(shù)而創(chuàng)建的那個對象實例的原型對象椎麦。使用原型對象的好處是可以讓所有對象實例共享它所包含的屬性和方法观挎。換句話說嘁捷，不必在構造函數(shù)中定義對象實例的信息雄嚣，而是可以將這些信息直接添加到原型對象中。
function Person(){
}
Person.prototype.name="zuo";
Person.prototype.age=33;
Person.prototype.job="ITP";
Person.prototype.sayName=function(){
console.log(this.name)
}
var person1=new Person();
person1.sayName()
var person2=new Person();
person2.sayName();
console.log(person1.sayName==person2.sayName) ///true
更簡單的原型語法
function Person(){
}
Person.prototype={
name:"zuo",
age:33,
job:'sdf',
arr:["1","2"],
sayName:function(){
console.log(this.name)
}
}
var person1=new Person();
person1.name='sfdasfdafasf'
person1.sayName()
person1.arr.push("111111")
person1.arr=["5555"]//這個方法并不會影響person2.arr的值
console.log(person1.arr)
var person2=new Person();
person2.sayName();
console.log(person1.sayName==person2.sayName) ///true
console.log(person2.arr)
繼承
ECMAScript實現(xiàn)繼承主要是依靠原型鏈來實現(xiàn)的港谊。
原型鏈：
利用原型讓一個引用類型繼承另一個引用類型的屬性和方法。
簡單回顧以下構造函數(shù)棘脐、原型和實例的關系：每個構造函數(shù)都有一個原型對象顷链，原型對象都包含一個指向構造函數(shù)的指針蕴潦，而實例都包含一個指向原型對象的內部指針潭苞。那么此疹，假如我們讓原型對象等于另一個類型的實例湖笨，結果會怎么樣慈省？顯然边败，此時的原型對象將包含一個指向另一個原型的指針笑窜，相應地，另一個原型中也包含著一個指向另一個構造函數(shù)的指針辐益。假如另一個原型又是另一個類型的實例艳悔，那么上述關系依然成立女仰，如此層層遞進，就構成了實例與原型的鏈條一罩。這就是所謂的原型鏈的基本概念聂渊。
function SuperType(){
this.property=true;
}
SuperType.prototype.getSuperValue=function(){
return this.property;
}
function SubType(){
this.subproperty=false;
}
SubType.prototype=new SuperType();
SubType.prototype.getSubValue=function(){
return this.subproperty;
}
var instance=new SubType();
console.log(instance.getSuperValue()) //true
console.log(instance.getSubValue()) //false
遞歸：
遞歸函數(shù)是在一個函數(shù)通過名字調用自身的情況下構成的
匿名函數(shù)的基本形式為(function(){...})();
前面的括號包含函數(shù)體欲逃，后面的括號就是給匿名函數(shù)傳遞參數(shù)并立即執(zhí)行之
匿名函數(shù)的作用是避免全局變量的污染以及函數(shù)名的沖突
(function(x,y){
alert(x+y);
return x+y;
}(3,4));
閉包：
閉包是指有 權訪問另一個函數(shù)作用域中的變量 的函數(shù)稳析。創(chuàng)建閉包的常見方式彰居，就是在一個函數(shù)內部創(chuàng)建另一個函數(shù)陈惰。
document.getElementById("myDiv")
var images=document.getElementByTagName("img")
var radio=document.getElementByName("color")
var div=document.getElementById("myDiv");
console.log(div.tagName);
console.log(div.tagName==div.nodeName)
html元素
id
title
lang
dir
className
var div=document.getElementById("myDiv");
console.log(div.id);//myDiv
console.log(div.className);//bd
console.log(div.title);//leiei
console.log(div.lang);//en
console.log(div.dir);//ltr
取得特性：
操作特性的DOM方法主要有三個，分別是getAttribute()画髓、setAttribute()和removeAttribute();
<div id="myDiv" class="bd" userid="1"></div>
var div=document.getElementById("myDiv");
console.log(div.getAttribute("id"))
console.log(div.getAttribute("class"))
console.log(div.getAttribute("userid"))
var div=document.getElementById("myDiv");
div.setAttribute("class","test")
div.setAttribute("userid","22")
console.log(div.getAttribute("class"))
創(chuàng)建元素
var div=document.createElement("div");
div.id="myDdiv";
div.className="test";
document.body.appendChild(div)
元素的子節(jié)點
<ul id="myList">
<li userId="1">1</li>
<li userId="2">2</li>
<li userId="3">3</li>
</ul>
var ul=document.getElementById("myList");
for(var i=0,len=ul.childNodes.length;i<len;i++){
if(ul.childNodes[i].nodeType==1){
console.log(ul.childNodes[i].getAttribute("userId"))
}
}
DOM擴展
選擇符API
1.querySelector()
<div class="selected"></div>
<div id="myDiv">asdfasfas</div>
var body=document.querySelector("body");
var myDiv=document.querySelector("#myDiv")
var selected=document.querySelector(".selected")
console.log(selected)
2.querySelectorAll()
var myList=document.querySelectorAll("li")
for(var i=0;i<myList.length;i++){
console.log(myList[i].className)
console.log(myList[i].getAttribute("userId"))
}
<ul id="myList">
<li userId="1" class="tt">1</li>
<li userId="2" class="88">2</li>
<li userId="3" class="kk">3</li>
</ul>
元素遍歷
<div class="1"></div>
<ul id="myList">
<li userId="1" class="tt">1</li>
<li userId="2" class="88">2</li>
<li userId="3" class="kk">3</li>
</ul>
<div class="2"></div>
var myList=document.getElementById("myList")
console.log(myList.childElementCount) //3
console.log(myList.firstElementChild)//<li userId="1" class="tt">1</li>
console.log(myList.lastElementChild)//<li userId="3" class="kk">3</li>
console.log(myList.previousElementSibling)//<div class="1"></div>
console.log(myList.nextElementSibling)//<div class="2"></div>
getElementByClassName("selected")
classList屬性
<div class="bd user disbaled" id="classList"></div>
var div=document.getElementById("classList")
div.classList.remove("user");
div.classList.add("current");
div.classList.toggle("user");
if(div.classList.contains("bd")&&!div.classList.contains("disbaled")){
//執(zhí)行操作
}
自定義數(shù)據屬性
<div id="myDiv" data-app="111" data-myname="zuozuo">順豐到付</div>
var div=document.getElementById("myDiv")
alert(div.innerText) //順豐到付 獲取dom的text
var app=div.dataset.app;
var myname=div.dataset.myname;
console.log(app) //111
console.log(myname) //zuozuo
div.dataset.app="222";
div.dataset.myname="leiei";
if(div.dataset.myname){
console.log("hello " + div.dataset.myname) //hello leiei
}
children屬性==childNodes
訪問元素樣式
var div=document.getElementById("myDiv")
div.style.backgroundColor="red";
div.style.width="200px"
div.style.border="#000 solid 1px"
事件
1.事件冒泡---從下往上執(zhí)行 div-body-html-document
2.事件鋪貨---從上往下執(zhí)行 document-html-body-div
HTML事件處理程序
<input type="text" value="sle" onclick="submit()">
<script>
function submit(){
console.log("onclick")
}
</script>
DOM0級事件處理程序
var btn=document.getElementById("myBtn")
btn.onclick=function(){
console.log(this.value)
}
DOM2級事件處理程序
var btn=document.getElementById("myBtn")
var handler=function(){
console.log(this.value)
}
btn.addEventListener("click",handler,false)
btn.removeEventListener("click",handler,false)
IE事件處理程序
var btn=document.getElementById("myBtn")
var handler=function(){
console.log(this.value)
}
btn.attachEvent("click",handler,false)
btn.detachEvent("click",handler,false)
跨瀏覽器的事件處理程序
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;
}
},
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;
}
}
}
var btn=document.getElementById("myBtn")
var handler=function(){
console.log(this.value)
}
EventUtil.addHandler(btn,"click",handler)
EventUtil.removeHandler(btn,"click",handler)
事件對象
在需要通過一個函數(shù)處理多個事件時，可以使用type屬性
var handler=function(event){
switch(event.type){
case "click":
console.log(1)
break;
case "mouseover":
console.log(2);
break;
case "mouseout":
console.log(3);
break;
}
}
btn.click=handler;
btn.onmouseouver=handler;
btn.onmouseout=handler
直接添加到一個按鈕的事件處理程序可以調用stopPropagation()碉纳，從而避免出發(fā)注冊在document.body上面的事件處理程序
btn.onclick=function(event){
console.log(1);
event.stopPropagation();
}
document.body.onclick=function(event){
console.log(2)
}
阻止鏈接導航這一默認行為劳曹，那么通過鏈接的onclick事件處理程序可以取消它
btn.onclick=function(event){
event.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;
}
},
getEvent:function(event){
return event?event:window.event
},
getTarget:function(event){
return event.target || event.srcElement
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault;
}else{
event.returnValue=false;
}
},
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;
}
},
stopPropagation:function(event){
if(event.stopPropagation){
event.stopPropagation
}else{
event.cancelBubble=true;
}
}
}
var btn=document.getElementById("myBtn")
var handler=function(){
console.log(this.value)
}
EventUtil.addHandler(btn,"click",handler)
EventUtil.removeHandler(btn,"click",handler)
btn.onclick=function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
}
link.onclick=function(event){
event=EventUtil.getEvent(event);
EventUtil.preventDefault(event);
}
btn.onclick=function(event){
event=EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
}
document.body.onclick=function(event){
console.log(11)
}
表單
每個表單都有elements屬性
<form action="" id="myForm">
<ul>
<li>
<input type="radio" name="color" value="red">
</li>
<li>
<input type="radio" name="color" value="yellow">
</li>
<li>
<input type="radio" name="color" value="black">
</li>
</ul>
</form>
var form=document.getElementById("myForm");
var colorFields=form.elements["color"];
console.log(colorFields)
