js事件绑定方法
最近收集了一些关于JavaScript绑定事件的方法,汇总了一下,不全面,但是,希望便于以后自己查看。
JavaScript中绑定事件的方法主要有三种:
1 在DOM元素中直接绑定
2 JavaScript代码中直接绑定
3 绑定事件监听函数
一、在DOM元素中直接绑定
也就是直接在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>
二、JavaScript代码中直接绑定
在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>
这里需要了解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;//早期浏览器
}
}
}
四、说说JQuery中绑定事件的几种方法。
主要有on()、bind()、live()、delegate()等几种,相对应的解绑就是off()、unbind()、live()、undelegate();
1 on()、bind()、live()、delegate()中除了bind(),其他的都可以给后来追加的元素对象添加绑定事件。
2 这几种方法中各自有对应支持的JQuery版本。
3 在给动态添加的页面元素绑定事件时,通常用on()方法。
最新文章
- C++ 用RGB 三种颜色绘图
- JS 弹出模态窗口解决方案
- jQuery getJSON() 能给外部变量赋值
- 连续区间覆盖染色问题 ------ SHUOJ 1716
- c++ 时间格式化
- python 多级菜单 纯循环与分支
- 深入理解querySelector(All)
- linux 之 tar 命令
- (记录前面算过的后面仍然会用的数减小复杂度)A - AC Me
- 函数式编程很难,这正是你要学习它的原因 | 外刊IT评论网
- popOver 弹出框简单使用
- Elasticsearch中Head插件的使用
- js生成带logo的二维码
- NodeJs之word文件生成与解析
- JMM以及并发三大特性介绍(包括解决方案)
- js中获取URL参数的共通方法getRequest()方法
- Idea 提交代码到码云(提交到github也大同小异)
- go语言使用go-sciter创建桌面应用(七) view对象常用方法,文件选择,窗口弹出,请求
- 26、redis中默认有多少个哈希槽?
- 必须记住的 30 类 CSS 选择器