关闭

事件

54人阅读 评论(0) 收藏 举报
分类:

事件总共分为 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更简单。

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






0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:4753次
    • 积分:351
    • 等级:
    • 排名:千里之外
    • 原创:32篇
    • 转载:2篇
    • 译文:0篇
    • 评论:0条
    文章分类