JavaScript事件学习小结js事件对象_javascript技巧_脚本之家

相关阅读:

相关阅读:

JavaScript事件学习小结js中事件类型之鼠标事件

JavaScript事件学习小结js中事件类型之鼠标事件

//www.jb51.net/article/86259.htm

//www.jb51.net/article/86259.htm

JavaScript事件学习小结事件流

JavaScript事件学习小结事件流

//www.jb51.net/article/86261.htm

//www.jb51.net/article/86261.htm

javaScript事件学习小结

javaScript事件学习小结

//www.jb51.net/article/86262.htm

//www.jb51.net/article/86262.htm

JavaScript事件学习小结js事件处理程序

JavaScript事件学习小结js事件处理程序

//www.jb51.net/article/86264.htm

//www.jb51.net/article/86264.htm

JavaScript事件学习小结js事件对象

JavaScript事件学习小结js事件对象

//www.jb51.net/article/86266.htm

一、事件处理程序

一、事件对象

前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字。响应某个事件的函数就叫事件处理程序。事件处理程序的名字以”on”开头,因此click事件的事件处理程序就是onclick,load事件的事件处理程序就是onload。

1、认识事件对象

为事件指定事件处理程序的方法主要有3种。

事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。

1、html事件处理程序

例如:鼠标操作产生的event中会包含鼠标位置的信息;键盘操作产生的event中会包含与按下的键有关的信息。

首先,这种方法已经过时了。因为动作和内容紧密耦合。但是写个小demo的时候还是可以使用的。

所有浏览器都支持event对象,但支持方式不同,在DOM中event对象必须作为唯一的参数传给事件处理函数,在IE中event是window对象的一个属性。

这种方式也有两种方法,都很简单:

2、html事件处理程序中event

第一种:直接在html中定义事件处理程序及包含的动作。

这样会创建一个包含局部变量event的函数。可通过event直接访问事件对象。

复制代码 代码如下:

3、DOM中的事件对象

第二种:html中定义事件处理程序,执行的动作则调用其他地方定义的脚本。

DOM0级和DOM2级事件处理程序都会把event作为参数传入。

复制代码 代码如下:

var btn=document.getElementById;btn.onclick=function{console.log;console.log; //click}btn.addEventListener("click", function  {console.log;console.log; //click},false);

note:

4、IE中的事件对象

1)通过event变量可以直接访问事件本身,比如onclick=”alert”会弹出click事件。

第一种情况:
通过DOM0级方法添加事件处理程序时,event对象作为window对象的一个属性存在。

2)this值等于事件的目标元素,这里目标元素是input。比如onclick=”alert”可以得到input元素的value值。

var btn=document.getElementById;btn.onclick= function () {var event=window.event;console.log; //click}

2、DOM0级事件处理程序

第二种情况:通过attachEvent()添加的事件处理程序,event对象作为参数传入。

这种方法简单而且跨浏览器,但是只能为一个元素添加一个事件处理函数。

var btn=document.getElementById;btn.attachEvent("onclick", function  {console.log; //click})

因为这种方法为元素添加多个事件处理函数,则后面的会覆盖前面的。

但是我有两个地方不懂。

添加事件处理程序:

1、通过DOM0级方法添加的事件处理程序中同样可以传入一个event参数,它的type和window.event.type一样,但是传入的event参数却和window.event不一样,为什么?

function showMessage;}
btn.onclick= function  {var event1=window.event;console.log('event1.type='+event1.type); //event1.type=clickconsole.log('event.type='+event.type); //event.type=clickconsole.log('event1==event?'+; //event1==event?false}

删除事件处理程序:

2、通过attachEvent添加的事件处理程序中传入的event和window.event是不一样的,为什么?

复制代码 代码如下: myBtn.onclick=null;

var btn=document.getElementById;btn.attachEvent("onclick", function  {console.log; //clickconsole.log("event==window.event?"+; //event==window.event?false})

3、DOM2级事件处理程序

以上所述是小编给大家介绍的JavaScript事件学习小结js事件对象的相关知识,希望对大家有所帮助,如果大家想了解更多内容敬请关注脚本之家网站!

DOM2级事件处理程序可以为一个元素添加多个事件处理程序。其定义了两个方法用于添加和删除事件处理程序:addEventListener()和removeEventListener()。

这两个方法都需要3个参数:事件名,事件处理函数,布尔值。

这个布尔值为true,在捕获阶段处理事件,为false,在冒泡阶段处理事件,默认为false。

添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world”。

 var myBtn=document.getElementById; myBtn.addEventListener{ alert; myBtn.addEventListener{ alert;

删除事件处理程序:通过addEventListener添加的事件处理程序必须通过removeEventListener删除,且参数一致。

note:通过addEventListener添加的匿名函数将无法删除。下面这段代码将不起作用!

复制代码 代码如下:
myBtn.removeEventListener{ alert;

看似该removeEventListener与上面的addEventListener参数一致,实则第二个参数中匿名函数是完全不同的。

所以为了能删除事件处理程序,代码可以这样写:

 var myBtn=document.getElementById; var handler=function; } myBtn.addEventListener("click",handler,false); myBtn.removeEventListener("click",handler,false);

二、IE事件处理程序

1、实际应用场景

IE8及以下浏览器不支持addEventListener,在实际开发中如果要兼容到IE8及以下浏览器。如果用原生的绑定事件,需要做兼容处理,可利用jquery的bind代替。

2、IE8事件绑定

IE8及以下版本浏览器实现了与DOM中类似的两个方法:attachEvent。

这两个方法都需要两个参数:事件处理程序名称和事件处理程序函数。

note:

IE11只支持addEventListener!

IE9,IE10对attachEvent和addEventListener都支持!

TE8及以下版本只支持attachEvent!

可以拿下面代码在IE各个版本浏览器中进行测试。

 var myBtn=document.getElementById; var handlerIE=function; } var handlerDOM= function ; } myBtn.addEventListener("click",handlerDOM,false); myBtn.attachEvent;

添加事件处理程序:现在为按钮添加两个事件处理函数,一个弹出“hello”,一个弹出“world

 var myBtn=document.getElementById; myBtn.attachEvent{ alert; myBtn.attachEvent{ alert;

note:这里运行效果值得注意一下:

IE8以下浏览器中先弹出“world”,再弹出“hello”。和DOM中事件触发顺序相反。

IE9及以上浏览器先弹出“hello”,再弹出“world”。和DOM中事件触发顺序相同了。

可见IE浏览器慢慢也走上正轨了。。。

删除事件处理程序:通过attachEvent添加的事件处理程序必须通过detachEvent方法删除,且参数一致。

和DOM事件一样,添加的匿名函数将无法删除。

所以为了能删除事件处理程序,代码可以这样写:

 var myBtn=document.getElementById; var handler= function ; } myBtn.attachEvent; myBtn.detachEvent;

note:IE事件处理程序中还有一个地方需要注意:作用域。

使用attachEvent()方法,事件处理程序会在全局作用域中运行,因此this等于window。

而dom2或dom0级的方法作用域都是在元素内部,this值为目标元素。

下面例子会弹出true。

 var myBtn=document.getElementById; myBtn.attachEvent{ alert;

在编写跨浏览器的代码时,需牢记这点。

IE78检测:

//判断IE78 兼容性检测 var isIE=!!window.ActiveXObject; var isIE6=isIE&&!window.XMLHttpRequest; var isIE8=isIE&&!!document.documentMode; var isIE7=isIE&&!isIE6&&!isIE8; if{ li.attachEvent{ _marker.openInfoWindow }else{ li.addEventListener{ _marker.openInfoWindow }

以上所述是小编给大家介绍的JavaScript事件学习小结js事件处理程序的相关知识,希望对大家有所帮助!

发表评论

电子邮件地址不会被公开。 必填项已用*标注