Rumah > hujung hadapan web > tutorial js > JavaScript学习中常会遇到的js事件处理程序

JavaScript学习中常会遇到的js事件处理程序

php是最好的语言
Lepaskan: 2018-07-26 12:43:45
asal
1584 orang telah melayarinya

事件指定事件处理程序的方法主要有3种。1、html事件处理程序:首先,这种方法已经过时了;2、DOM0级事件处理程:这种方法简单而且跨浏览器,但是只能为一个元素添加一个事件处理函数;3、DOM2级事件处理程序:DOM2级事件处理程序可以为一个元素添加多个事件处理程序。

一、事件处理程序

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

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

1、html事件处理程序

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

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

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

代码如下:

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

代码如下:

<script>function showMessage(){ alert("clicked!");}</script>

note:

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

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

2、DOM0级事件处理程序

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

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

添加事件处理程序:

1

2

3

4

5

6

<input type="button" value="click me!" onclick="showMessage()"/>

<script>

function showMessage(){

 alert("clicked!");

}

</script>

Salin selepas log masuk

删除事件处理程序:

代码如下:

myBtn.onclick=null;

3、DOM2级事件处理程序

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

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

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

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

1

2

3

4

5

6

7

8

9

10

<input id="myBtn" type="button" value="click me!"/>

<script>

 var myBtn=document.getElementById("myBtn");

 myBtn.addEventListener("click",function(){

  alert("hello");

 },false);

 myBtn.addEventListener("click",function(){

  alert("world");

 },false);

</script>

Salin selepas log masuk

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

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

代码如下:

myBtn.removeEventListener("click",function(){ alert("world"); },false);

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

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

1

2

3

4

5

6

7

8

9

<input id="myBtn" type="button" value="click me!"/>

<script>

 var myBtn=document.getElementById("myBtn");

 var handler=function(){

  alert("hello");

 }

 myBtn.addEventListener("click",handler,false);

 myBtn.removeEventListener("click",handler,false);

</script>

Salin selepas log masuk

二、IE事件处理程序

1、实际应用场景

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

2、IE8事件绑定

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

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

note:

IE11只支持addEventListener!

IE9,IE10对attachEvent和addEventListener都支持!

TE8及以下版本只支持attachEvent!

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

1

2

3

4

5

6

7

8

9

10

11

12

<input id="myBtn" type="button" value="click me!"/>

<script>

 var myBtn=document.getElementById("myBtn");

 var handlerIE=function(){

  alert("helloIE");

 }

 var handlerDOM= function () {

  alert("helloDOM");

 }

 myBtn.addEventListener("click",handlerDOM,false);

 myBtn.attachEvent("onclick",handlerIE);

</script>

Salin selepas log masuk

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

1

2

3

4

5

6

7

8

9

<script>

 var myBtn=document.getElementById("myBtn");

 myBtn.attachEvent("onclick",function(){

  alert("hello");

 });

 myBtn.attachEvent("onclick",function(){

  alert("world");

 });

</script>

Salin selepas log masuk

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

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

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

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

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

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

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

1

2

3

4

5

6

7

8

9

<input id="myBtn" type="button" value="click me!"/>

<script>

 var myBtn=document.getElementById("myBtn");

 var handler= function () {

  alert("hello");

 }

 myBtn.attachEvent("onclick",handler);

 myBtn.detachEvent("onclick",handler);

</script>

Salin selepas log masuk

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

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

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

下面例子会弹出true。

1

2

3

4

5

6

7

<input id="myBtn" type="button" value="click me!"/>

<script>

 var myBtn=document.getElementById("myBtn");

 myBtn.attachEvent("onclick",function(){

  alert(this===window);

 });

</script>

Salin selepas log masuk

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

IE7\8检测:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

//判断IE7\8 兼容性检测

   var isIE=!!window.ActiveXObject;

   var isIE6=isIE&&!window.XMLHttpRequest;

   var isIE8=isIE&&!!document.documentMode;

   var isIE7=isIE&&!isIE6&&!isIE8;

   if(isIE8 || isIE7){

    li.attachEvent("onclick",function(){

     _marker.openInfoWindow(_iw);

    })

   }else{

    li.addEventListener("click",function(){

     _marker.openInfoWindow(_iw);

    })

   }

Salin selepas log masuk

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

相关推荐:

Atas ialah kandungan terperinci JavaScript学习中常会遇到的js事件处理程序. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan