一枚

8

事件

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

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






阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Doigt_love/article/details/52369360
个人分类: javascript
想对作者说点什么? 我来说一句

事件与概率事件与概率

2008年12月30日 161KB 下载

事件与概率事件与概率事件

2008年12月30日 781KB 下载

flex事件flex事件flex事件flex事件

2011年04月16日 147KB 下载

JavaScript常用事件

2010年08月16日 20KB 下载

java事件 焦点事件 实例代码

2011年04月02日 699B 下载

java事件 选项事件 实例代码

2011年04月02日 332KB 下载

android的 view

2011年07月29日 66KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭