JavaScript事件和修改this指向

2021-10-9 前端达人

1、鼠标事件：

onclick 左键单击 ondblclick 左键双击 onmouseover onmouseenter 鼠标移入 onmouseout onmouseleave鼠标移出 onmousedown 鼠标按下 onmousmove 鼠标移动（鼠标滑动） onmouseup 鼠标抬起 oncontextmenu 右键单击(右键菜单)

2、键盘事件：

onkeydown onkeypress 键按下 onkeyup 键抬起 键盘事件必须放在整个文档（document）里面去操作，不能放在节点里面去操作

3、系统事件：

onload 加载完成后 onerror 加载出错后 onresize 窗口调整大小时 onscroll 滚动时




    

        

            

            

        

        

            
                //onload 加载完成后 onerror 加载出错后 onresize 窗口调整大小时   都是放在window的身上
            

        

    

    

        

            

            

        

        

            
                window.onload = function(){};
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //onscroll 滚动时  可以放在document和window身上
            

        

    

    

        

            

            

        

        

            
                document.onscroll = function(){};

4、表单事件：

onfocus 获取焦点后 onblur 失去焦点后 onchange 改变内容后 onreset 重置后 onselect 选择后 onsubmit 提交后

5、监听事件(绑定事件)写法：

节点.事件 = 函数。

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

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

行内绑定

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

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

<script type="text/javascript">

          var func = () => {

                    alert('hello world')

          };

</script>

6、事件函数this指向：在事件函数中，关键词 this 就表示触发事件的这个节点对象。

7、修改this指向：

call() 第一个参数为函数this将要修改指向的对象函数有参数时后面, 一一跟上即可可以主动执行函数

apply() 第一个参数为函数this将要修改指向的对象函数有参数时数组包一下可以主动执行函数

bind() 第一个参数为函数this将要修改指向的对象函数有参数时后面, 一一跟上即可不不不会主动执行函数但会return函数本体再加一个括号即可执行




    

        

            

            

        

        

            
                window.a = 0 //在window对象下创建一个属性，属性值为0
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let obj1 = {
            

        

    

    

        

            

            

        

        

            
                a: 1
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                let obj2 = {
            

        

    

    

        

            

            

        

        

            
                a: 2
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                function fn(num1, num2, num3) {
            

        

    

    

        

            

            

        

        

            
                console.log(this.a);
            

        

    

    

        

            

            

        

        

            
                console.log(num1, num2, num3);
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //修改函数里面this的指向
            

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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

        

    

    

        

            

            

        

        

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