本文共 1531 字，大约阅读时间需要 5 分钟。

事件处理

【onClick】单击事件、【onMouseOver】鼠标经过事件、【onMouseOut】鼠标移出事件、【onChange】文本内容改变事件、【onSelect】文本被框选事件、【onFoucus】得到光标事件、【onBlur】光标失去事件、【onLoad】网页加载事件（在body标签中添加）、【onUnload】网页关闭事件（在body标签中添加或者使用window.function(){} ）

事件注册及监听

1、 DOM0级事件处理

在标签中添加onClick或其他事件的属性并赋值为JS的自定义方法名

onClick="dongfun(20)"

两种方法在事件中得到事件的标签对象：

   
    东小东
   

内容改变监听：

方法一

方法二

2、 DOM1级事件处理

通过标签或者ID寻找到对象，进行事件监听，一个事件只能对应一个事件处理函数，在HTML中不用进行注册

function dongfunx(){ alert("东小东弹框"); }//找到对象var h1objx=document.getElementsByTagName("h1")[0];//注册事件h1objx.dongfunx;//清除事件h1objx.null;

3、 DOM2级事件处理

通过标签或者ID寻找到对象，进行事件监听，一个事件只能对应多个事件处理函数，在HTML中不用进行注册

//通过ID找到标签对象divobjx=document.getElementById("divid");  //添加监听事件，可以添加多个相同或者不同的事件//参数（事件名，处理函数名），其中事件名是普通事件中去掉“on”前缀divobjx.addEventListener("click",onck1);divobjx.addEventListener("click",onck2);  //事件处理函数function onck1(){ alert("----- onck1 -----");  }function onck2(){ alert("----- onck2 -----"); }  //移除点击事件divobjx.removeEventListener("click",onck1);

匿名方法实现

divobjx=document.getElementById("divid");divobjx.addEventListener("click",function(){//执行操作内容alert("----------");});

补充：

阻止HTML的默认事件

跳转

页面加载完毕监听：

window.function(){alert("页面加载完毕");}

异常捕获

如果程序执行时遇到异常且未进行异常捕获，则程序将终止执行，如果有异常捕获，则可以继续执行异常以下的代码。

捕获所有异常：

try{ //alert(jj);//未定义变量异常 throw("东小东异常");//手动抛出异常，参数为异常内容}catch(e){ alert("捕获的错误:"+e); }

最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：.欢迎大家进群交流讨论，学习交流，共同进步。

当真正开始学习的时候难免不知道从哪入手，导致效率低下影响继续学习的信心。

但最重要的是不知道哪些技术需要重点掌握，学习时频繁踩坑，最终浪费大量时间，所以有有效资源还是很有必要的。

最后祝福所有遇到瓶疾且不知道怎么办的前端程序员们，祝福大家在往后的工作与面试中一切顺利。