事件处理
【onClick】单击事件、【onMouseOver】鼠标经过事件、【onMouseOut】鼠标移出事件、【onChange】文本内容改变事件、【onSelect】文本被框选事件、【onFoucus】得到光标事件、【onBlur】光标失去事件、【onLoad】网页加载事件(在body标签中添加)、【onUnload】网页关闭事件(在body标签中添加或者使用window.onload=function(){}
)
事件注册及监听
1、 DOM0级事件处理
在标签中添加onClick或其他事件的属性并赋值为JS的自定义方法名
两种方法在事件中得到事件的标签对象:
<div id="divid" onMouseOver="overbut(this)" onMouseOut="outbut()">东小东</div><script> //通过参数传递对象 function overbut(obj){ obj.innerHTML="事件触发发,鼠标在我的范围"; } //通过ID查找到对象 function outbut(){ document.getElementById("divid").innerHTML="再见见"; }</script>
内容改变监听:
方法一
<input onChange="this.style.backgroundColor='red'">
方法二
<input id="inid" onChange="inputbut(this)"><script> function inputbut(obj){ obj.style.backgroundColor="green";//更改样式 }</script>
2、 DOM1级事件处理
通过标签或者ID寻找到对象,进行事件监听,一个事件只能对应一个事件处理函数,在HTML中不用进行注册
function dongfunx(){ alert("东小东弹框"); }//找到对象var h1objx=document.getElementsByTagName("h1")[0];//注册事件h1objx.onclick=dongfunx;//清除事件h1objx.onclick=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的默认事件
<a href="https://www.cnblogs.com/dongxiaodong/" rel="external nofollow" >跳转</a><script> function dongfunx(eventx){ eventx.preventDefault();//阻止默认事件,不进行跳转 } //找到对象 var aobjx=document.getElementsByTagName("a")[0]; //注册事件 aobjx.onclick=dongfunx;</script>
页面加载完毕监听:
window.onload=function(){ alert("页面加载完毕"); }
异常捕获
如果程序执行时遇到异常且未进行异常捕获,则程序将终止执行,如果有异常捕获,则可以继续执行异常以下的代码。
捕获所有异常:
try{ //alert(jj);//未定义变量异常 throw("东小东异常");//手动抛出异常,参数为异常内容}catch(e){ alert("捕获的错误:"+e); }
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对VeVb武林网的支持。
注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。