javascript事件绑定的三种方法 Love The Way You Lie 2022-07-15 22:24 150阅读 0赞 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。 在JavaScript中,有三种常用的绑定事件的方法: 1. 在DOM元素中直接绑定; 2. 在JavaScript代码中绑定; 3. 绑定事件监听函数。 ## 一. 在DOM元素中直接绑定 ## 这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为: onXXX="JavaScript Code" 其中: * onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。 * JavaScript Code 为处理事件的JavaScript代码,一般是函数。 例如,单击一个按钮,弹出警告框的代码有如下两种写法。 1. 原生函数 <input onclick="alert('谢谢支持')" type="button" value="点击我,弹出警告框" /> 实例演示: 2. 自定义函数 <input onclick="myAlert()" type="button" value="点击我,弹出警告框" /> <script type="text/javascript"> function myAlert(){ alert("谢谢支持"); } </script> 实例演示: ## 二. 在JavaScript代码中绑定 ## 在JavaScript代码中(即<script>标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。 在JavaScript代码中绑定事件的语法为: elementObject.onXXX=function()\{ // 事件处理代码 \} 其中: * elementObject 为DOM对象,即DOM元素。 * onXXX 为事件名称。 例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性: <input id="demo" type="button" value="点击我,显示 type 属性" /> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签 } </script> 实例演示: ## 三. 绑定事件监听函数 ## 绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 addEventListener()函数语法: elementObject.addEventListener(eventName,handle,useCapture); <table style="width:764px; border-collapse:collapse; color:rgb(51,51,51); font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif; font-size:14px; line-height:22.4px; background-color:rgb(252,252,252)"> <tbody> <tr> <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 参数</th> <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 说明</th> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">elementObject</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">DOM对象(即DOM元素)。</td> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">eventName</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。</td> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">handle</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">事件句柄函数,即用来处理事件的函数。</td> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">useCapture</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">Boolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。</td> </tr> </tbody> </table> attachEvent()函数语法: elementObject.attachEvent(eventName,handle); <table style="width:764px; border-collapse:collapse; color:rgb(51,51,51); font-family:"Microsoft Yahei",Arial,Helvetica,sans-serif; font-size:14px; line-height:22.4px; background-color:rgb(252,252,252)"> <tbody> <tr> <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 参数</th> <th style="padding:7px 5px; border:1px solid rgb(204,204,204); color:rgb(102,102,102); background-color:rgb(237,237,237)"> 说明</th> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">elementObject</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">DOM对象(即DOM元素)。</td> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">eventName</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。</td> </tr> <tr> <td style="padding:5px; border:1px solid rgb(204,204,204)">handle</td> <td style="padding:5px; border:1px solid rgb(204,204,204)">事件句柄函数,即用来处理事件的函数。</td> </tr> </tbody> </table> 注意:事件句柄函数是指“ 函数名 ”,不能带小括号。 addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。 下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本 obj.addEventListener(type,handle,false); }catch(e){ try{ // IE8.0及其以下版本 obj.attachEvent('on' + type,handle); }catch(e){ // 早期浏览器 obj['on' + type] = handle; } } } 这里使用 try\{ ... \} catch(e)\{ ... \} 代替 if ... else... 语句,避免浏览器出现错误提示。 例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框: 复制纯文本新窗口 addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){ alert("又是一个警告框"); }
还没有评论,来说两句吧...