一、最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性。事件属性名称由事件类型外加一个“on”前缀构成。这些属性也被称为事件处理器
<INPUT TYPE="text" NAME="first_name" onChange="convertToUpper(this)">
或者
<INPUT TYPE="text" NAME="first_name" onChange="javascript : js code">
或者
Dom.onclick = function(e){  //todo  }
二、js方法绑定事件
1、dom对象的attachEvent()方法给该dom元素的事件(该方法仅支持冒泡事件——IE绑定事件的方式)
elemObj.attachEvent(事件, func);这个方法有一个值得注意的地方:您不能在元素被载入浏览器之前执行这个语句。该对象的引用在相应的HTML按键元素被浏览器创建之前,都是无效的。因此,要让这样的绑定语句或者在页面的底部运行,或者在BODY元素的onLoad事件处理器调用的函数中运行。
2、dom对象的addEventListener()方法给该dom对象的事件(支持捕捉事件和冒泡事件——w3c绑定事件的方式)
elemObj.addEventListener(on事件, func, captureFlag);这个方法的第一个参数是一个声明事件类型的字符串(不带"on"前缀),比如click,mousedown,和keypress。第二个参数是绑定的函数。第三个参数则是一个Boolean值,用来设置事件是在事件捕获时执行,还是事件冒泡时执行。IE的事件模型默认是在事件冒泡时执行的,也就是在useCapture等于false的时候执行,所以把在处理事件时把useCapture设置为false是比较安全,也实现兼容浏览器的效果。
3、捕捉型事件和冒泡型事件:
事件冒泡:事件从当前元素对象触发,然后向上层元素搜索相同对象事件并触发(直搜到document节点)。IE事件默认都只这种类型的事件。
事件捕获:从document节点开始搜索事件,然后向下层搜索相同对象事件并触发,直到当前元素节点。
4、

停止事件冒泡: 
IE: window.event.cancelBubble=false; 
Other: e.stopPropagation(); 
三、事件解除绑定
IE: detachEvent 
Other: removeEventListener 
 四、常用举例
var button = document.getElementById("buttonId");
if(button.addEventListener){
button.addEventListener("click",eventFunction,false);
}else if(button.attachEvent){
button.attachEvent("onclick",eventFunction);
}
 
 
 
五、window.event
1、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。

2、属性:

altKey, button, cancelBubble, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, propertyName, returnValue, screenX, screenY, shiftKey, srcElement, srcFilter, toElement, type, x, y
 
3、常用属性详细说明:
altKey:检查alt键的状态
shiftKey:检查shift键的状态
ctrlKey:检查ctrl键的状态
keyCode:检测键盘事件相对应的内码
srcElement: 返回触发事件的元素
button:检查按下的鼠标键,仅用于onmousedown,onmouseup和onmousemove事件。对其他事件,不管鼠标状态如何,都返回0(比如onclick)
type:返回事件名
 
4、兼容性
//IE:有window.event对象
//FF:没有window.event对象。可以通过给函数的参数传递event对象。如onmousemove=doMouseMove(event)
<script>
function test(event) {
var event = event || window.event;
//do Something
}
</script>
<input type="button" value="click" onclick="test(event)"/>

  

javascript 事件绑定的更多相关文章

  1. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  2. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  3. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  4. javaScript事件绑定

    事件绑定,就是要对某一个东西进行操作.(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!) 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函 ...

  5. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  6. javascript事件绑定和普通事件的区别

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  7. javascript事件绑定1-模拟jquery可爱的东西

    1.给对象添加事件attachEvent(兼容IE,不兼容ff.chrome) <html xmlns="http://www.w3.org/1999/xhtml"> ...

  8. JavaScript事件绑定的常见方式

    在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...

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

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

随机推荐

  1. pfx 证书怎么打开

    其实双击就能够自动运行导入向导的 不行的话使用我的办法: 单击开始--运行--里输入mmc 然后单击文件--选择添加删除管理单元--再选择添加--拉动滚动条找到证书一项,点击添加再点击完成(不用做任何 ...

  2. centos升级python(从2.6.6升级到2.7.8)

    ***先安装readline,否则升级后python回退和方向键不能使用 yum install readline-devel.x86_64   1.#wget www.python.org/ftp/ ...

  3. WPF绑定xaml中绑定对象需用属性表示,字段不可以绑定

    在练习WPF绑定时发现对象属性可以在XAML中绑定,但字段是不可以绑定: 比如: private Person person{get;set;}  可以绑定到XAML中,<TextBox Nam ...

  4. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

  5. 在html在添加cookie和读取cookie

    1.保存cookie var oDate = new Date(); oDate.setDate(oDate.getDate() + );//有效期为30天 document.cookie = &qu ...

  6. hdu3625-Rooms

    题目 有\(n\)个房间,\(n\)个钥匙,每个钥匙随机出现在一个房间里,一个房间里有且仅有一个钥匙.我们现在手上没有钥匙,但我们要搜索所有的房间,所以我们有\(k\)次机会把一个房间炸开.一号房间里 ...

  7. BZOJ4737 组合数问题(卢卡斯定理+数位dp)

    不妨不管j<=i的限制.由卢卡斯定理,C(i,j) mod k=0相当于k进制下存在某位上j大于i.容易想到数位dp,即设f[x][0/1][0/1][0/1]为到第x位时是否有某位上j> ...

  8. Skills - CF613B

    Lesha plays the recently published new version of the legendary game hacknet. In this version charac ...

  9. 2018牛客多校第六场 I.Team Rocket

    题意: 给出n个区间和m个点(点按顺序给出且强制在线).每个区间只会被第一个他包含的点摧毁.问每个点能摧毁多少个区间以及每个区间是被哪个点摧毁的. 题解: 将n个区间按照左端点排序,然后用vector ...

  10. Matrix-Tree定理题表

    矩阵树这个东西……并不懂什么基尔霍夫矩阵……背了一下结论……(顺便用这个东西加强了一下矩阵)(打板子的时候还是该取负取负,因为不取负才有可能是负数,最后答案一定是正数???(ryf说一定是这样))bz ...