this的使用
1.給一組元素綁定事件
? ? ? ? for(var i = 0;i<list.length;i++{
? ? ? ? ? ? ? ? lis[i].onclick=function(){
? ? ? ? ? ? ? ? console.log(i);
? ? ? ? ? ? ? ? this.style.backgroundColor=”red”;
? ? ? ? }
}
2. 在元素內(nèi)部通過事件屬性使用
? ? ? ? <button onclick = 'change(this)'></button>
? ? ? ? function change(ob){ob.style.color='red'}
事件列表
1.鼠標(biāo)事件
? ? ? ? 1.onclick 單擊
? ? ? ? 2.ondblclick 雙擊
? ? ? ? 3.oncontextmenu右擊 --return false 阻止系統(tǒng)菜單彈出
? ? 自定義右鍵菜單
? ? ? ? ? ? ? ? 1.event對(duì)象
? ? ? ? ? ? ? ? 2.client.X? client.Y
? ? ? ? ? ? ? ? 3.window.innerWidth? window.innerHeight
? ? ? ? ? ? ? ? 4.document.documentElement.clientWidth;
? ? ? ? ? ? ? ? 5.document.documentElement.clientHeiht;
? ? ? ? 4.onmouseover 鼠標(biāo)滑上元素 --導(dǎo)航條
? ? ? ? 5.onmouseout 鼠標(biāo)移出元素
? ? ? ? 6.onmousedown 鼠標(biāo)按下
? ? ? ? ? ? ? ? box.onmousedown=function(en){
? ? ? ? ? ? ? ? ? ? ? ? var env = en || window.event;
? ? ? ? ? ? ? ? ? ? ? ? switch (env.button){
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? console.log(env.button);? ??
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ?}
? ? ? ? 7.onmouseup 鼠標(biāo)抬起
? ? ? ? 8.onmousemove 鼠標(biāo)移動(dòng)
? ? ? ? ? ? ? ? box.onmousemove=function(en){
? ? ? ? ? ? ? ? ? ? ? ? var env = en || window.event;
? ? ? ? ? ? ? ? ? ? ? ? //獲取鼠標(biāo)的坐標(biāo)
? ? ? ? ? ? ? ? ? ? ? ? var X = env.clientX;
? ? ? ? ? ? ? ? ? ? ? ? var Y = env.clientY;
? ? ? ? ? ? ? ? ? ? ? ?//獲取box的位置? --offsetLeft相對(duì)于定位的父級(jí)
? ? ? ? ? ? ? ? ? ? ? ?var left? = this.offsetLeft;
? ? ? ? ? ? ? ? ? ? ? ?var top? = this.offsetTop;
? ? ? ? ? ? ? ? ? ? ? //得到鼠標(biāo)在box上的位置
? ? ? ? ? ? ? ? ? ? ? ?var x = X-left;? var y = Y-top;
? ? ? ? ? ? ? ? }
2. 鍵盤事件
? ? ? ? onkeydown 鍵盤按下
? ? ? ? onkeyup 鍵盤抬起
? ? ? ? onkeypress 鍵盤按下---可打印的(可見的)
? ? ? ? ? ? ? ? document.onkeydown=function(en){
? ? ? ? ? ? ? ? ? ? ? ? ?var e = en || window.event;
? ? ? ? ? ? ? ? ? ? ? ? ?var char = String.fromCharCode(e.keyCode);
? ? ? ? ? ? ? ? ? ? ? ? ?返回ASCII表的字母(大寫)
? ? ? ? ? ? ? ? }
3. 文檔事件
? ? ? ? onload 文檔中的一切加載完成（可以使代碼放在元素前面）
? ? ? ? onunload 文檔關(guān)閉的時(shí)候(w3c里有標(biāo)準(zhǔn)但是瀏覽器不支持)
? ? ? ? onbeforeunload 文檔關(guān)閉之前
? ? body window的兼容和沖突
? ? ? ? ? ? window.onload=function(){
? ? ? ? ? ? ? ? ? ? alert(1);
? ? ? ? ? ? };
? ? 瀏覽器支持較差
? ? ? ? ? ? window.onbeforeunload = function(){
? ? ? ? ? ? ? ? ? ? return "別走";? //頁面刷新的時(shí)候提醒
? ? ? ? ? ? }
4. 表單事件
? ? ? ? 1.onsubmit --- 提交
? ? ? ? ? ? ? ? document.myForm.onsubmit=function(){
? ? ? ? ? ? ? ? ? ? ? ? return false;? 不提交
? ? ? ? ? ? ? ? ? ? ? ?//return true;? 提交
? ? ? ? ? ? ? ? }
? ? ? ? 2.onreset --- 重置
? ? ? ? ? ? ? ? ? doucment.myform.onreset=function(){
? ? ? ? ? ? ? ? ? ? ? ? ? return false ;? ? 不重置
? ? ? ? ? ? ? ? ? ? ? ? ? //return true;? ? ? ? 重置
? ? ? ? ? ? ? ? ? }
? ? ? ?3.onfocus -- 獲取焦點(diǎn)
? ? ? ? ? ? ? ? ?inp.onfocus=function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ?this.style.backgroundColor='blue';
? ? ? ? ? ? ? ? ?}
? ? ? ? 4.onblur ---失去焦點(diǎn)
? ? ? ? ? ? ? ? 使用onblur驗(yàn)證表單（提高用戶體驗(yàn)）
? ? ? ? 5.onchange ---內(nèi)容發(fā)生改變(失去焦點(diǎn))
? ? ? ? ? ? ? ? input.onchange = function(){
? ? ? ? ? ? ? ? ? ? ? document.getElementById('box').innerHTML = this.value;
? ? ? ? ? ? ? ?}
? ? ? ? 實(shí)例：地址聯(lián)動(dòng)
? ? ? ? 6.onselect ---當(dāng)內(nèi)容被選擇(表單)
? ? ? ? ? ? ? ? textarea.onselect = function(){
? ? ? ? ? ? ? ? ? ? ? ? alert('選中了');
? ? ? ? ? ? ? ? }
5. 圖片事件
? ? ? ? onload ---加載完成
? ? ? ? ? ? ? ? <img src="1.jpg" onload='alert()'>
? ? ? ? onerror ---加載失敗
? ? ? ? ? ? ? ? img.onerror = function(){this.src = "error.jpg";}
? ? ? ? onabort ---加載中斷
