事件

原创 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更简单。

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






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

事件事件事件

动态库  拷贝过去 L l 静态库能包进去 在Qt中,事件被封装成一个个对象,所有的事件均继承自抽象类QEvent.  接下来依次谈谈Qt中有谁来产生、分发、接受和处理事件: 1、...
  • lusic01
  • lusic01
  • 2018年01月03日 17:58
  • 61

Windows消息和事件的区别 VC++解惑

首先要明确VC++中使用消息映射技术处理“消息”和“事件” ,通过DECLARE_MESSAGE_MAP()等宏通杀          事件就是“当....的时候”,事件总是和一个ID有关   ...
  • Qsir
  • Qsir
  • 2017年05月17日 15:17
  • 967

AngularJs事件大集合

AngularJS事件大集合ng-click ( 适用标签 :所有,触发事件:单击);ngDblclick( 适用标签 :所有,触发事件:双击);ngBlur(适用标签 : a,input,sele...
  • zhaoxiang66
  • zhaoxiang66
  • 2017年03月25日 22:56
  • 1164

文本框输入后立即触发事件

文本框输入事件:onchange 、onkeyup 、onblur onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会...
  • meizhiyun
  • meizhiyun
  • 2013年11月27日 12:14
  • 95791

单选框radio改变事件

前端学习
  • sunxiaoyu94
  • sunxiaoyu94
  • 2016年12月01日 15:21
  • 10623

微信公众号开发系列三:响应关注和取关事件

当我们关注某些微信公众号的时候,有的公众号会给我们回复一条文本信息。本节内容,我们就来实现如何在用户关注公众号后,由公众号给用户回复一条文本信息。同样在用户取消关注时,也可以给用户发送一条信息。...
  • bifengmiaozhuan
  • bifengmiaozhuan
  • 2017年12月13日 20:54
  • 3041

radio change事件

radio change事件 $('input:radio[name="role"]').change( function()
  • sunhuwh
  • sunhuwh
  • 2014年04月16日 14:57
  • 32796

Socket.IO 内置事件

在看一些Socket.IO的文章,都有提到自定义事件命名不要和内置事件冲突,但是找遍了也没有个权威的内置事件有哪些的说明。目前知道的有connection,disconnect,message这三个…...
  • TianTangYouZui
  • TianTangYouZui
  • 2016年06月30日 16:03
  • 987

单个和多个checkbox选中事件

如果使用jquery,应使用prop方法来获取和设置checked属性,不应使用attr,需要的朋友可以参考下## 标题 ##1.通过prop方法获取checked属性,获取的checked返回值为b...
  • Gyb_csdn
  • Gyb_csdn
  • 2016年06月03日 13:50
  • 34513

Activity声明周期中各个事件的执行时机

1 从Activity的官方文档中能看到其生命周期为:onCreate, onStart, onResume  然后结束时候依次调用  onPause, onStop, onDestroy. 然后又分...
  • lhq9220
  • lhq9220
  • 2011年08月09日 16:01
  • 2131
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:事件
举报原因:
原因补充:

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