99久久精品国产片-99久久精品国产免费-99久久精品国产麻豆-99久久精品国产国产毛片-99久久精品国产高清一区二区-99久久精品费精品国产一区二区

JavaScript事件和修改this指向

2021-10-9 前端達(dá)人

1、鼠標(biāo)事件：

onclick 左鍵單擊 ondblclick 左鍵雙擊 onmouseover onmouseenter 鼠標(biāo)移入 onmouseout onmouseleave鼠標(biāo)移出 onmousedown 鼠標(biāo)按下 onmousmove 鼠標(biāo)移動(dòng)（鼠標(biāo)滑動(dòng)） onmouseup 鼠標(biāo)抬起 oncontextmenu 右鍵單擊(右鍵菜單)

2、鍵盤事件：

onkeydown onkeypress 鍵按下 onkeyup 鍵抬起 鍵盤事件必須放在整個(gè)文檔（document）里面去操作，不能放在節(jié)點(diǎn)里面去操作

3、系統(tǒng)事件：

onload 加載完成后 onerror 加載出錯(cuò)后 onresize 窗口調(diào)整大小時(shí) onscroll 滾動(dòng)時(shí)




    

        

            

            

        

        

            
                //onload 加載完成后 onerror 加載出錯(cuò)后 onresize 窗口調(diào)整大小時(shí)   都是放在window的身上
            

        

    

    

        

            

            

        

        

            
                window.onload = function(){};
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //onscroll 滾動(dòng)時(shí)  可以放在document和window身上
            

        

    

    

        

            

            

        

        

            
                document.onscroll = function(){};

4、表單事件：

onfocus 獲取焦點(diǎn)后 onblur 失去焦點(diǎn)后 onchange 改變內(nèi)容后 onreset 重置后 onselect 選擇后 onsubmit 提交后

5、監(jiān)聽事件(綁定事件)寫法：

節(jié)點(diǎn).事件 = 函數(shù)。

document.getElementById("main").onclick = function(){alert(1)};

document.getElementById("main").addEventListener("click",function(){},false);

行內(nèi)綁定

<button οnclick="alert('hello world')">Click</button>

<button οnclick="func()">Click</button>

<script type="text/javascript">

          var func = () => {

                    alert('hello world')

          };

</script>

6、事件函數(shù)this指向：在事件函數(shù)中，關(guān)鍵詞 this 就表示觸發(fā)事件的這個(gè)節(jié)點(diǎn)對象。

7、修改this指向：

call() 第一個(gè)參數(shù)為函數(shù)this將要修改指向的對象函數(shù)有參數(shù)時(shí) 后面, 一一跟上即可可以主動(dòng)執(zhí)行函數(shù)

apply() 第一個(gè)參數(shù)為函數(shù)this將要修改指向的對象函數(shù)有參數(shù)時(shí) 數(shù)組包一下可以主動(dòng)執(zhí)行函數(shù)

bind() 第一個(gè)參數(shù)為函數(shù)this將要修改指向的對象函數(shù)有參數(shù)時(shí) 后面, 一一跟上即可不不不會主動(dòng)執(zhí)行函數(shù) 但會return函數(shù)本體再加一個(gè)括號即可執(zhí)行




    

        

            

            

        

        

            
                window.a = 0 //在window對象下創(chuàng)建一個(gè)屬性，屬性值為0
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let obj1 = {
            

        

    

    

        

            

            

        

        

            
                a: 1
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                let obj2 = {
            

        

    

    

        

            

            

        

        

            
                a: 2
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                function fn(num1, num2, num3) {
            

        

    

    

        

            

            

        

        

            
                console.log(this.a);
            

        

    

    

        

            

            

        

        

            
                console.log(num1, num2, num3);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //修改函數(shù)里面this的指向
            

        

    

    

        

            

            

        

        

            
                fn.call(obj1,4,5,6)
            

        

    

    

        

            

            

        

        

            
                fn.apply(obj2,[4,5,6])
            

        

    

    

        

            

            

        

        

            
                fn.bind(obj1,4,5,6)()