这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 JavaScript 中事件绑定的方法总结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
最近收集了一些关于 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() 方法。
来源: http://www.phperz.com/article/17/0513/330897.html