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)()
            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

转自：csdn
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务