20掌握JavaScript事件绑定：从入门到跨浏览器兼容的实战秘籍

常见事件

绑定事件的第一种方式

使用addEventListener绑定事件

使用attachEvent绑定事件

【兼容性封装】addEventListener和attachEvent

非 VIP 用户可前往公众号“前端基地”进行免费阅读，文章链接如下：

20掌握JavaScript事件绑定：从入门到跨浏览器兼容的实战秘籍

常见事件

在JavaScript中，事件是实现页面交互的关键，通过监听不同事件并执行相应代码，可实现丰富的功能。常见事件如下：

鼠标事件：

事件名	描述
onclick	鼠标单击元素时触发，常用于按钮点击操作等场景，如提交表单、触发功能按钮等。
ondblclick	鼠标双击元素时触发，可用于实现双击放大图片、快速打开文件等操作。
onmouseover	鼠标指针移动到元素上方时触发，常配合onmouseout实现鼠标悬停效果，如导航菜单的展开与收起。
onmouseout	鼠标指针移出元素范围时触发。
onmouseenter	鼠标指针进入元素时触发，与onmouseover功能类似，但onmouseenter不会在子元素上重复触发，适合处理复杂结构元素的鼠标进入效果。
onmouseleave	鼠标指针离开元素时触发，与onmouseenter对应，同样不会在子元素上重复触发。
onmouseup	鼠标按键在元素上被松开时触发，常与onmousedown配合，实现完整的鼠标操作流程，如完成拖拽动作。
onmousedown	鼠标按键在元素上被按下时触发，常用于模拟按下按钮的初始状态，如在拖拽功能中记录鼠标按下的起始位置。
onmousemove	鼠标在元素上移动时持续触发，可用于实现鼠标跟随效果、放大镜效果等。

键盘事件：

事件名	描述
onkeyup	按下键盘上的一个键并释放时触发，可用于实时监听用户输入，如搜索框的实时搜索功能。
onkeydown	按下键盘上的键时触发（在onkeyup之前），可用于拦截特定按键操作，如禁止用户输入某些字符。
onkeypress	按下可打印字符键时触发（不包括功能键，如 Ctrl、Shift 等），主要用于处理文本输入相关操作。

表单事件：

事件名	描述
onchange	适用于文本框、下拉菜单等表单元素，当元素的内容或选项发生改变且失去焦点时触发，常用于表单数据的验证和提交前的处理。
onfocus	元素获得焦点时触发，如文本框获取鼠标光标，可用于显示提示信息或改变文本框样式。
onblur	元素失去焦点时触发，常与onfocus配合进行表单验证，如检查输入内容是否符合要求。
onsubmit	表单提交时触发，可用于在提交前进行数据合法性校验，阻止不符合要求的表单提交。
onreset	表单提交时触发，可用于在提交前进行数据合法性校验，阻止不符合要求的表单提交。

页面与元素事件：

事件名	描述
onload	整个网页文档、图片等资源加载完成后触发，常用于初始化页面数据、执行依赖资源加载完成后的脚本。
onunload	用户离开当前页面（如关闭窗口、跳转页面）时触发，可用于保存用户的临时数据或执行清理操作。
onscroll	当元素的滚动条发生滚动时触发，常用于实现滚动加载、回到顶部按钮显示隐藏等功能。
onresize	浏览器窗口或框架大小被调整时触发，可用于实现响应式布局，根据窗口大小动态调整页面样式和内容。

绑定事件的第一种方式

在JavaScript里，可借助“元素对象.on事件类型”这种语法形式来绑定事件。具体语法如下：

元素对象.onclick=function(){
    //这里编写触发事件后要执行的代码
}

需要留意的是，运用“元素对象.on事件类型”这种方式绑定事件时，由于它本质是赋值操作，所以后写的事件处理函数会覆盖先写的。

示例代码如下：

<body>
    <button>按钮</button>
    <script>
        var btn=document.getElementById('btn');
        btn.onclick=function(){
            console.log('第一次绑定onclick事件');
        }
        btn.onclick=function(){
            console.log('第二次绑定onclick事件');//会覆盖第一次的绑定
        }
        btn.onmouseover=function(){
            console.log('第一次绑定onmouseover事件')
        }
        btn.onmouseover=function(){
            console.log('第二次绑定onmouseover事件')//会覆盖第一次的绑定
        }
    </script>
</body>

运行结果：当你点击按钮时，控制台会输出第二次绑定 onclick 事件；当鼠标悬停在按钮上时，控制台会输出第二次绑定 onmouseover 事件。这就表明后绑定的事件处理函数覆盖了先绑定的。

使用addEventListener绑定事件

addEventListener 是现代浏览器（包括 IE9+）标准的事件绑定方法，具有更高的灵活性和功能性。其语法如下：

元素对象.addEventListener=('不带on的事件类型',事件处理函数,[useCapture])

事件类型：指定事件名称（如 click、mouseover），不带 on 前缀

事件处理函数：事件触发时执行的回调函数

useCapture（可选）：布尔值，指定事件在捕获阶段（true）或冒泡阶段（false）触发，默认值为 false

示例代码如下：

<body>
    <button>按钮</button>
    <script>
        var btn=document.getElementById('btn');
        console.log(btn.addEventListener);
        btn.addEventListener('click',fn1,false);
        btn.addEventListener('click',fn2,false);
        btn.addEventListener('click',function(){
            console.log('我是匿名函数');
        },false);
        function fn1(){
            console.log('我是fn1函数');
        }
        function fn2(){
            console.log('我是fn2函数');
        }
    </script>
</body>

分析：

ie6、7、8版本浏览器：

console.log(obj.addEventListener); //undefined

在 IE9 及以上版本浏览器和主流浏览器中，addEventListener不仅完全可用，还支持为同一元素多次绑定相同类型事件，其事件处理函数会按绑定顺序依次执行，同时还能通过参数灵活控制事件在捕获或冒泡阶段触发，实现更精细的事件流管理。

运行结果：

使用attachEvent绑定事件

attachEvent 是微软为 IE 浏览器（IE5.5-IE10）提供的事件绑定方法，现代浏览器已不再支持。其语法如下：

元素对象.attachEvent=('带on的事件类型',事件处理函数)

事件类型：需带 on 前缀（如 onclick、onmouseover）

同一元素绑定多个相同类型事件时：

IE9/10：按绑定顺序从上至下执行

IE6/7/8：按绑定顺序从下至上执行（与现代浏览器相反）

兼容性：

IE10 及以下版本：支持 attachEvent

IE11+ 和主流浏览器：不支持该方法，需使用 addEventListener

示例代码如下：

<body>
    <button>按钮</button>
    <script>
        var btn=document.getElementById('btn');
        btn.attachEvent('onclick',fn1);
        btn.attachEvent('onclick',fn2);
        btn.attachEvent('onclick',function(){
            console.log('我是匿名函数');
        });
        function fn1(){
            console.log('我是fn1函数');
        }
        function fn2(){
            console.log('我是fn2函数');
        }
    </script>
</body>

运行结果：

IE9/10：

我是fn1函数

我是fn2函数

我是匿名函数

IE6/7/8：

我是匿名函数

我是fn2函数

我是fn1函数

IE11+ 或主流浏览器：

btn.attachEvent is not a function

【兼容性封装】addEventListener和attachEvent

在处理跨浏览器事件绑定时，我们可以创建一个封装函数来兼容现代浏览器的 addEventListener 和旧版 IE 的 attachEvent。

示例代码如下：

<body>
    <button>按钮</button>
    <script>
        var btn=document.getElementById('btn');
        function addEvent(obj,type,fn,bool){
            if(obj.addEventListener){
                obj.addEventListener(type,fn,bool);
            }else{
                obj.attachEvent('on'+type,fn);
            }
        }
        addEvent(btn,'click',function(){
            console.log('匿名函数');
        },false);
    </script>
</body>

运行结果：单击按钮，控制台输出：匿名函数

文章版权归作者所有，未经允许请勿转载。如内容涉嫌侵权，请在本页底部进入<联系我们>进行举报投诉!

THE END