博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript事件小结(事件处理程序方式)--javascript高级程序设计笔记
阅读量:4991 次
发布时间:2019-06-12

本文共 3185 字,大约阅读时间需要 10 分钟。

1、事件流:描述的是从页面中接收事件的顺序。

2、事件冒泡:IE的事件流叫做事件冒泡,即事件开始从具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播到不具体的节点(文档)。

3、事件捕获:指不太具体的节点应该更早接收到事件,而具体的节点应该是最后接收到事件。

4、DOM事件流:“DOM2级事件”规定的事件流包含三个阶段:事件捕获,处于目标阶段和事件冒泡阶段。(实际的目标元素在捕获阶段接不会收到事件)

IE不支持DOM事件流,Opera、safari、chrome、firefox支持事件流。

5、事件处理程序方式有以下几种:

1)HTML事件处理程序:

<input type="text" οnclick="alert(1)" />;

<input type="text" οnclick="showmessage()" />

这种方式2个缺点:一是当dom元素加载完成,底部js没加载完成时候点击input会报错(这是我理解的精简一句话总结报错);二是js和html代码紧密耦合。若是换事件处理程序,需要改两个地方:HTML和Javascript代码。

2)DOM0级事件处理程序:

就是将一个函数赋值给一个事件的处理程序属性。至今现代为所有浏览器都支持。既简单又款浏览器的优势。属性通常全部小写,例如onclick。将这种属性的值设置为一个函数,就可以指定事件处理程序。如下所示:

<input type="button" id="btn_test" value="测试" />

var oBtn = document.getElementById("btn_test");

oBtn.onclick = function(){
  alert(this.id); //btn_test(ps:程序中的this引用当前元素)
}

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。

删除通过DOM0级指定的事件处理程序方法,将事件处理程序属性设置为null即可:

btn.onclick = null; //删除时间处理程序

3)DOM2级事件处理程序:

“DOM2级事件”定义了两个方法,用于处理指定和删除事件处理程序的操作:addEventListener()和removeEventListener()。所有DOM几点都包含这两个方法,并且它们接受3个参数:要处理的事件名,作为事件处理的函数和一个布尔值。最后这个布尔值为true,则代表在捕获阶段调用事件处理程序;若为false,表示在冒泡阶段调用时间处理程序。

var oBtn = document.getElementById("btn_test");

function test1(){ console.log("test1") } 

oBtn.addEventListener("click",test1,false);//冒泡

移除事件处理程序方法:

oBtn.removeEventListener("click",test1,false);//可以移除,匿名函数是移除不掉的。

大多数情况下将事件处理程序都是添加到事件流的冒泡阶段,这样可以最大限度的兼容各种浏览器。

4)IE事件处理程序:

IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接收相同的两个参数,事件处理程序名称和事件处理程序函数。由于IE只支持事件冒泡,所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。

var oBtn = document.getElementById("btn_test");

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

  alert(this === window); //true 

});

 

var oBtn = document.getElementById("btn_test");

function test1(){ console.log("test1") } 

oBtn.attachEvent("onclick",test1);

移除相应的事件处理程序:

oBtn.detachEvent("onclick",test1);

5)跨浏览器的事件处理:

var EventUtil = {                addHandler:function(element, type ,handler){                    if (element.addEventListener) { //IE 中                        element.addEventListener(type,handler,false);//冒泡                    }                    else if (element.attachEvent) { //IE 中                        element.attachEvent("on"+type,handler);                    }                    else{                        element["on" + type] = handler;                    }                },                removeHandler:function(element, type ,handler){                    if (element.removeEventListener) { //IE 中                        element.removeEventListener(type,handler,false);//冒泡                    }                    else if (element.detachEvent) { //IE 中                        element.detachEvent("on"+type,handler);                    }                    else{                        element["on" + type] = null;                    }                }                            }                         var oBtn = document.getElementById("btn_test");            var handler = function(){                alert(111);            }            EventUtil.addHandler(oBtn,"click",handler);            EventUtil.removeHandler(oBtn,"click",handler);

无论时间处理程序是采用什么方式添加到元素中,如果其他方法无效,则默认采用DOM0级方法。

先写到这里,欢迎转载与转发,请注明出处,若是对您有帮助,麻烦帮忙点一下右下角的支持~~

转载于:https://www.cnblogs.com/imsomnus/p/4775762.html

你可能感兴趣的文章
【vijos】【树形dp】佳佳的魔法药水
查看>>
聚合新闻头条
查看>>
Ubuntu 关闭锁屏界面的 on-screen keyboard
查看>>
凸优化学习笔记
查看>>
使用ehcache-spring-annotations开启ehcache的注解功能
查看>>
Charles设置HTTPS抓包
查看>>
NGUI出现Shader wants normals, but the mesh UIAtlas doesn&#39;t have them
查看>>
Boost.Asio c++ 网络编程翻译(14)
查看>>
Codeforces Round #306 (Div. 2) D.E. 解题报告
查看>>
uva 1557 - Calendar Game(博弈)
查看>>
HDU1051 Wooden Sticks 【贪婪】
查看>>
十大经典数据挖掘算法
查看>>
Rhythmbox乱码的解决的方法
查看>>
中纪委:抗震中官员临危退缩玩忽职守将被严处
查看>>
MySQL 8.0.12 基于Windows 安装教程
查看>>
在hue中使用hive
查看>>
eclipse快捷键
查看>>
在指定文本里记录内容
查看>>
Android WebView常见问题及解决方案汇总
查看>>
[BZOJ4025]二分图
查看>>