事件处理

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

事件注册及监听

1、 DOM0级事件处理

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

onClick="dongfun(20)"

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

 <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/">跳转</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);
}

JavaScript的事件及异常捕获的更多相关文章

  1. JavaScript事件——冒泡、捕获

    本节要点:1.干预系统的事件处理机制 (一)DOM事件流 (二)停止事件冒泡 (三)阻止事件的默认行为 1.干预系统的事件处理机制 (一)DOM事件流 DOM模型是一个树形结构,在DOM模型中,HTM ...

  2. JavaScript异常捕获

    理论准备 ★   异常捕获 △ 异常:当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停止运行: △ 异常抛出:当异常产生,并且这个异常生成一个错误信息: △ 异常捕获: ...

  3. Javascript异步请求你能捕获到异常吗?

    Javascript异步请求你能捕获到异常吗? 异常处理是程序发布之前必须要解决的问题,不经过异常处理的应用会让用户对产品失去信心.在异常处理中,我们一贯的做法是按照函数调用的次序,将异常从数据访问层 ...

  4. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  5. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  6. javascript学习笔记(五):异常捕获和事件处理

    异常捕获 Try{ 发生异常的代码块 }catch(err){ 异常信息处理 } <!DOCTYPE html> <html> <head lang="en&q ...

  7. Javascript的异常捕获机制

    這個異常處理機制,之前也只是,但是沒有怎麼用過,用了一次后發現還可以, 和java,python的異常處理機制也很相似 Javascript的异常捕获机制 1.1 基本的try…catch语句 ES3 ...

  8. JavaScript(3)---事件冒泡、事件捕获

    JavaScript(3)---事件冒泡与事件捕获 一.理解冒泡与捕获 假设有这么一段代码 <body> <div><p>标签</p> </div ...

  9. JavaScript事件起泡与捕获

    // 向 <div> 元素添加事件句柄 document.getElementById("myDIV").addEventListener("mousemov ...

随机推荐

  1. windows10计划任务启动bat执行jar打包的jar文件

    今天公司要用bat文件执行jar打包的java文件,运行没项目的程序,并且用任务计划开机自启,今天记录下坑 系统:win10 一.编写.bat执行用jar打包的jar文件 @echo off java ...

  2. linux 做了raid后,硬盘坏了更换问题

    系统做完raid1后发现 raid盘坏了,硬盘都是热插拔的,更换后,需要简单配置一下才能自动进行镜像拷贝. 在pd mgmt 页面,选择新加入的硬盘,按F2,选择 make global HS选项 选 ...

  3. node04

    1.模板引擎 用于渲染页面 介绍jade或ejs jade:侵入式,与原生html/css不共存,使用缩进代表层级 模板后缀.jade ejs:则非侵入式的 2.jade 1)简单使用: //代码 c ...

  4. MySQL视图更新

    昨天在写美团2019秋招笔试题的时候遇到了关于视图是否能更新的问题,突然感觉这个问题之前复习的时候重点关注过,但是却又想不全.今天特地搜了一些资料总结一下.本文主要说明视图的更新限制,如需关于视图的更 ...

  5. Ubuntu上安装使用WeChat、TIM

    WeChat可以直接到软件商店安装,不过是网页版...(其实个人感觉还行,就是什么都不能设置就挺蛋疼的,字体大小.背景什么的) 以下是网上找到的教程,在此总结一下: 下载地址:https://gith ...

  6. pip和cmd常用命令

    1.pip常用命令 显示模块的详情  pip    show 安装模块   pip    install    模块名称 卸载模块    pip    uninstall    模块名称 查看当前环境 ...

  7. Mesos源码分析(11): Mesos-Master接收到launchTasks消息

    根据Mesos源码分析(6): Mesos Master的初始化中的代码分析,当Mesos-Master接收到launchTask消息的时候,会调用Master::launchTasks函数.   v ...

  8. RabbitMQ消息队列系列教程(二)Windows下安装和部署RabbitMQ

    摘要 本篇经验将和大家介绍Windows下安装和部署RabbitMQ消息队列服务器,希望对大家的工作和学习有所帮助! 目录 一.Erlang语言环境的搭建 二.RabbitMQ服务环境的搭建 三.Ra ...

  9. Websocket实现即时通讯

    前言 关于我和WebSocket的缘:我从大二在计算机网络课上听老师讲过之后,第一次使用就到了毕业之后的第一份工作.直到最近换了工作,到了一家是含有IM社交聊天功能的app的时候,我觉得我现在可以谈谈 ...

  10. 流媒体协议(一):HLS 协议

    一.HLS 概述 HLS 全称是 HTTP Live Streaming,是一个由 Apple 公司提出的基于 HTTP 的媒体流传输协议,用于实时音视频流的传输.目前HLS协议被广泛的应用于视频点播 ...