Javascript的事件绑定主要有四种方法（一下在IE中运行正常，但不保证其他浏览器）：

[注：onXXX为某一事件，fun为某一function，domId为某一DOM对象id，event类型见后边附录。]

1、在DOM中，直接用onXXX="fun();"进行绑定

2、在Javascript代码中用 DOM对象.onXXX=fun 进行绑定

3、用 DOM对象.attachEvent("onXXX",fun) 进行绑定

4、用<script for="domId" event="onXXX">fun();</script> 进行绑定

示例：

<html>

<head>

<title>event test</title>

</head>

<body onload="init()">

<!-- 绑定方式一:在元素中，通过onXXX（事件）设置绑定方法 -->

<button id="btn1" onclick="display()" >绑定方式一</button>

<!-- 绑定方式二：在Javascript代码中，通过获得元素，为元素的onXXX（事件）设置绑定方法  -->

<button id="btn2">绑定方式二</button>

<!-- 绑定方式三：通过for、event为元素绑定事件（IE4+）。for后面是元素id，event是具体事件  -->

<button id="btn3">绑定方式三</button>

<!-- 绑定方式四：通过attachEvent为元素绑定事件（IE5+）。第一个参数是事件名，第二个参数是绑定的方法 -->

<button id="btn4">绑定方式四</button>

</body>

</html>

<script type="text/javascript">

function init() {

document.getElementById("btn2").onclick = display;//为button2绑定事件

document.getElementById("btn4").attachEvent("onclick", display);//为button4绑定事件

}

function display(event) {

var targ;//触发事件的对象引用

if (!event) {

var event = window.event;//获得当前事件(IE)

}

if (event.target) {//IE没有target

targ = evente.target;

} else if (event.srcElement) {//适用于IE

targ = event.srcElement;

}

//对触发事件的对象进行操作

alert(targ.tagName+"-"+targ.id+"-"+event.x+"-"+event.offsetX);

targ.disabled="disabled" ;

}

<script>

<script for="btn3" event="onclick">

display();//为button3绑定事件

<script>

/*==============================================================================================*/

附一：event事件：

onabort： 图像的加载被中断
onblur： 元素失去焦点
onchange： 域的内容被改变
onclick： 当用户点击某个对象时调用的事件句柄
ondblclick： 当用户双击某个对象时调用的事件句柄
onerror： 在加载文档或图像时发生错误
onfocus： 元素获得焦点
onkeydown： 某个键盘按键被按下
onkeypress： 某个键盘按键被按下并松开
onkeyup： 某个键盘按键被松开
onload： 一张页面或一幅图像完成加载
onmousedown： 鼠标按钮被按下
onmousemove： 鼠标被移动
onmouseout： 鼠标从某元素移开
onmouseover： 鼠标移到某元素之上
onmouseup： 鼠标按键被松开
onreset： 重置按钮被点击
onresize： 窗口或框架被重新调整大小
onselect： 文本被选中
onsubmit： 确认按钮被点击
onunload： 用户退出页面

附二：IE event属性：

cancelBubble： 如果事件句柄想阻止事件传播到包容对象，必须把该属性设为 true。 
fromElement ：对于 mouseover 和 mouseout 事件，fromElement 引用移出鼠标的元素。 
keyCode ：对于 keypress 事件，该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件，它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。 
offsetX,offsetY ：发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。 
returnValue： 如果设置了该属性，它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle，可以取消发生事件的源元素的默认动作。 
srcElement ：对于生成事件的 Window 对象、Document 对象或 Element 对象的引用。 
toElement： 对于 mouseover 和 mouseout 事件，该属性引用移入鼠标的元素。 
x,y： 事件发生的位置的 x 坐标和 y 坐标，它们相对于用CSS动态定位的最内层包容元素。

Javascript事件绑定的几种方式的更多相关文章

  1. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

  2. JavaScript 中事件绑定的三种方式

    以下是在 JS 中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="uplo ...

  3. JavaScript事件处理程序的3种方式

    最近这段时间因为每天要修改网站,为网站做特效,所以看了很多的js接触事件,自己只会使用一小部分,有时用的时候也比较混乱,现在系统的整理了一下,首先跟大家在马海祥博客上跟大家分享的是JavaScript ...

  4. JS中事件绑定的三种方式

    以下是搜集的在JS中事件绑定的三种方式.   1. HTML onclick attribute     <button type="button" id="upl ...

  5. jQuery中的事件绑定的几种方式

    jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...

  6. js事件绑定的几种方式

    在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数 一. 在DOM元素中直接绑定 这里的DOM元素,可以理解为HTM ...

  7. js事件绑定的几种方式与on()、bind()的区别

    版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...

  8. React事件绑定的几种方式对比

    React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...

  9. JS事件绑定的三种方式比较

    js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

随机推荐

  1. 给Chrome和Firefox添加js脚本作为插件的方法

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5973141. ...

  2. jmap命令

    一.jmap -heap PID using parallel threads in the new generation.  ##新生代采用的是并行线程处理方式 using thread-local ...

  3. linux基于file的logger

    我们可能会遇到这样的问题:即写出的代码可能需要编译成动态连接库并在不同运行环境下运行,而这些运行环境下log的输出方式可能不同,一种运行环境的log方式在另一种运行环境下可能无法输出.而为保证多种运行 ...

  4. modelsim 仿真时出现无限迭代（iteration reach limitation）的原因及其解决办法

    modelsim 仿真时出现无限迭代(iteration reach limitation) 出现这种故障的原因:  一般都是代码里出现的组合逻辑无限循环或者组合逻辑A产生signal_A,signa ...

  5. ajax 跨域的几种方式

    网络上跨域的文章大多一样,这里我写下,巩固下自己的知识,顺便做个记录 什么是跨域 这里简单拿百度的网址做个例子:http://www.baidu.com:80 (默认都是80端口.可省略) http ...

  6. 默认安装wamp修改MySQL密码

    首先,通过WAMP打开mysql控制台. 提示输入密码,因为现在是空,所以直接按回车. 然后输入“use mysql”,意思是使用mysql这个数据库,提示“Database changed”就行. ...

  7. WinForm程序中两份mdf文件问题的解决

    在项目中用程序中嵌入mdf文件的方式来进行SQLServer数据库开发非常方便,用来发布开源项目等很方便,点击就可以运行,免部署,特别是在教学中用起来更加方便,老师不用先将数据库文件detach再发给 ...

  8. Java_字符类（Character、String、StringBuffer）_char是基本数据类型，Character是其包装类型。

         在java中有三个类负责对字符的操作:Character.String.StringBuffer.其中,Character类是对单个字符进行操作,String是对一个字符序列的操作,Stri ...

  9. EasyUI的DataGrid 分页栏英文改中文解决方案

    (一)分页栏英文改中文解决方案 这个问题其实很简单,就是引入文件jquery-easyui-1.3/locale/easyui-lang-zh_CN.js . 注意这个文件要放在本页js的后面,放在最 ...

  10. Shell/Bash 变量/variable 循环/loop

    如何在bash脚本里面进行循环 #!/bin/bash n=9999 for(( i =1; i<=100;i++)) do /root/testProgram $n sleep 5 n=$(( ...