事件绑定的几种方式
来源:互联网 发布:数据库设计包括 编辑:程序博客网 时间:2024/06/05 14:23
转载自:http://blog.csdn.net/johnny0991/article/details/51778356
事件绑定的几种方式
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定;在JavaScript代码中绑定;绑定事件监听函数。
在DOM中直接绑定
在DOM元素中直接绑定这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:
onXXX=”JavaScript Code”
其中: onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。JavaScript Code 为处理事件的JavaScript代码,一般是函数。
例如,单击一个按钮,弹出警告框的代码有如下两种写法。
原生函数
<input onclick="alert('谢谢支持')" type="button" value="点击我,弹出警告框" />
自定义函数
<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 属性:
document.getElementById("demo").onclick=function(){ alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签}
绑定监听函数
绑定事件监听函数绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数说
attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
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("又是一个警告框"); }
- js事件绑定的几种方式
- Javascript事件绑定的几种方式
- Javascript事件绑定的几种方式
- Javascript事件绑定的几种方式
- Javascript事件绑定的几种方式
- Js绑定事件的几种方式
- 事件绑定的几种常见方式
- jquery的几种事件绑定方式
- 事件绑定的几种方式
- jquery几种事件绑定方式的比较
- JavaScript中绑定事件的几种方式
- 为input标签绑定事件的几种方式
- js中的几种事件绑定方式
- js事件绑定的几种方式与on()、bind()的区别
- js事件绑定的几种方法
- JavaScript绑定事件的几种方法
- javascript 绑定事件的几种方法
- jquery同一标签绑定多个事件的几种方式
- Ubuntu14.04升级CMake
- 函数作用域和作用域链
- 【Lua】require 的使用
- Java for Web学习笔记(七一):Service和Repository(6)在Spring框架中使用Listener
- HTML基础知识
- 事件绑定的几种方式
- 单例模式--改进版
- 关联容器map实例
- java的日期转换
- 【简记】Java Web 内幕——NIO,IO调优,IO设计模式
- Complex复数类
- LCM
- sklearn.model_selection.train_test_split
- Leetcode#461. 461. Hamming Distance(异或)