当前位置：首页 > 资讯 > 技术文档

关于JavaScript中事件绑定的方法总结

时间：2022-05-08 13:14 编辑：来源：阅读：
扫一扫，手机访问

摘要：关于JavaScript中事件绑定的方法总结

最近收集了一些关于JavaScript绑定事件的方法，汇总了一下，不全面，但是，希望便于以后自己查看。 JavaScript中绑定事件的方法主要有三种： 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 [b]一、在DOM元素中直接绑定[/b] 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子：

<input type="button" value="点我呦" onclick="alert("hello world!")"/>
<!--或者-->
<input type="button" value="点我呦" onclick="testAlert()">
<script type="text/javascript">
  function testAlert(){
   alert("hello world!");
  }
</script>

[b]二、JavaScript代码中直接绑定[/b] 在JavaScript中通过查找DOM对象，对其绑定，elementObject.onclick=function(){} 的格式，举例如下：

<input type="button" value="点我呦" id="demo">
<script type="text/javascript">

  document.getElementById("demo").onclick=function testAlert(){
   alert("hello world!");
  }
</script>

[b]三、绑定事件监听函数[/b] 这里需要了解addEventListener()和attachEvent()的函数语法。 1 elementObject.addEventListener(eventName,handle,useCapture) （支持主流浏览器、以及IE9.0及以上） eventName:要绑定的事件名称。注意写法，比如点击事件，写成click,而不是onclick. handle: 处理事件的函数名。但是写法上没有小括号。 useCapture:Boolean类型，是否使用捕获，一般用false，具体涉及到的会在后边总结。 2 elementObject.attachEvent(eventName,handle);（仅支持IE8及以下）从网上找到了一个兼容的好办法，相比较if。。else语句，这个方法用的是try..catch错误处理语句，可以避免浏览器出现错误提示。

function addEvent(obj,type,handle){
  try{
   obj.addEventListener(type,handle,false);
  }catch(e){
   try{
    obj.attachEvent('on'+type,handle);
   }
   catch(e){
    obj['on' + type]=handle;//早期浏览器
   }
  }
}

[b]四、说说JQuery中绑定事件的几种方法。[/b] 主要有on()、bind()、live()、delegate()等几种，相对应的解绑就是off()、unbind()、live()、undelegate(); 1 on()、bind()、live()、delegate()中除了bind()，其他的都可以给后来追加的元素对象添加绑定事件。 2 这几种方法中各自有对应支持的JQuery版本。 3 在给动态添加的页面元素绑定事件时，通常用on()方法。以上就是小编为大家带来的关于JavaScript中事件绑定的方法总结全部内容了，希望大家多多支持编程素材网~

全部评论(0)

上一篇：js点击页面其它地方将某个显示的DIV隐藏
下一篇：JavaScript Object的extend是一个常用的功能

资讯排行榜
更多>>