事件

原创 2016年08月30日 16:13:57

事件总共分为 html中添加事件,DOM0级事件,DOM2级事件

html中添加事件

<input type="button" id="btn1" value="html" onclick="showMes()" />
function showMes(){
		alert('hello ');
	}
js代码是添加在html中的,和html耦合很密切,修改起来很不方便

DOM0级添加事件

DOM0级呢是把元素从html中提取出来,在js中给他赋予事件。
<input type="button" id="btn2" value="dom0级" />
var btn2 = document.getElementById('btn2');
	btn2.onclick = function(){
		alert('dom0');
	}
可以删除事件,用btn2.onclick= null;

DOM2级添加事件

<input type="button" id="btn3" value="dom2级" />
var btn3=document.getElementById('btn3');
	btn3.addEventListener('click',showMes,false);
第一个参数是什么类型的事件,第二个参数是执行什么函数,第三个参数是以什么方式触发。true代表事件捕获,false代表事件冒泡
DOM2事件必须把on去掉
删除事件可以用btn3.removeEventListener('click',showMes,false);
这种方式可以给一个元素添加多个事件,事件是按添加先后顺序执行的。

IE事件处理程序

<input type="button" id="btn4" value="IE处理" />
var btn4 = document.getElementById("btn4");
	btn4.attachEvent('onclick',showMes);
attachEvent只接受两个参数,第一个参数是事件类型,这里要把on加上去,第二个参数是执行什么函数
 删除事件是detachEvent();函数,
	btn4.detachEvent('onclick',showMes;
IE事件处理程序只有ie8之前的版本和Opera浏览器支持,其他浏览器支持DOM2,再低的只能支持DOM0级的

处理跨浏览器事件处理

var eventUtil ={
			addHandler:function(element,type,handler){
				if (addEventListener) {
					element.addEventListener(type,handler,false);//DOM2
				}else if (attachEvent) {			
					element.attachEvent("on"+type,handler); //IE
				}else {
					element['on'+type] = handler;  //dom0
				}
			},
			removeHandler:function(element,type,handler){
				if(removeEventListener){
					element.removeEventListener(type,handler,false);
				}else if (detachEvent) {
					element.detachEvent('on'+type,handler)
				}else {
					element['on'+type]= null;
				}
			}
		}
		eventUtil.addHandler(btn4,'click',showMes);
		eventUtil.removeHandler(btn4,'click',showMes);
定义一个对象,把添加事件删除事件封装在里面,事件类型要去掉on,因为在使用过程中添加on比删除on更简单。

这样一个整个的代码可以在任何浏览器中使用






版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

UE4发报机-蓝图类之间的事件绑定

UE4发报机-蓝图类之间的事件绑定

微信小程序事件

  • 2017年04月18日 20:49
  • 3KB
  • 下载

LABVIEW 事件结构的学习

  • 2016年04月17日 08:20
  • 17KB
  • 下载

javascript中定义事件的三种方式

在javascript中,可以为某个元素指定事件,指定的方式有以下三种: 1、在html中,使用onclick属性 2、在javascript中,使用onclick属性 3、在javascipt...

Anroid touch事件分发探究

  • 2016年03月13日 21:27
  • 1.41MB
  • 下载

SQL利用扩展事件进行调优和

  • 2016年02月26日 15:53
  • 1.15MB
  • 下载

easyui中combobox的值改变onchang事件

easyui中combobox的值改变onchang事件 oyhk 学习笔记 今天在公司里,那jquery中的easy-ui-里面的combobox,真的郁闷死了! 把郁闷的事情记下来,下次就不会...

java事件处理机制

  • 2016年02月27日 00:47
  • 138KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:事件
举报原因:
原因补充:

(最多只允许输入30个字)