JavaScript中添加监听句柄的方式_javascript技巧

前言：

监听就是触发某事件之后做出的响应,监听句柄是触发某相应的条件

一、效果展示

鼠标聚焦、鼠标移开、鼠标点击等等都可以作为监听句柄

二、句柄合集

•     onchange    HTML 元素改变
•     onclick    用户点击 HTML 元素
•     onmouseover    用户在一个HTML元素上移动鼠标
•     onmouseout    用户从一个HTML元素上移开鼠标
•     onkeydown    用户按下键盘按键
•     onload    浏览器已完成页面的加载
•     onclick 失去焦点
•     onfocuse 获取焦点

三、添加监听的方式

添加监听的方式有两种：

1.将事件与函数绑定在一起

• 例如将点击监听句柄与f1函数绑定起来

    
    
    
    


    
    
    
点击灯泡开关灯

2.先获取元素再添加事件

例如:

           var x = document.getElementById("myBtn");
        x.addEventListener("mouseover", myFunction);

将鼠标覆盖句柄与函数myFunction绑定在一起

    
            
实例使用 addEventListener() 方法在同一个按钮中添加多个事件。
            点我
            

    

    

总结:

两种监听方式均可以达到效果,个人认为先获取后添加的句柄监听使用更为方便。