JavaScript -- 时光流逝（八）：js中的事件Event的使用

JavaScript -- 知识点回顾篇（八）：js中的事件Event的使用

事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行。

(1) onabort : onabort 事件会在图像加载被中断时发生。

<!doctype html>

<html>

 <head>

      <script type="text/javascript">

        function abortImage()

        {

          alert('Error: Loading of the image was aborted')

        }

      </script>

 </head>

 <body>

    <img src="test.jpg" onabort="abortImage()" />

 </body>

</html>

(2) onblur :元素失去焦点时触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function txtToupper(){

        var x=document.getElementById("txt1").value

        document.getElementById("txt1").value=x.toUpperCase()

    }

</script>

</head>

<body>

    输入小写字母：

    <input type="text" id="txt1" onblur="txtToupper()" />

</body>

</html>

(3) onchange :域的内容被改变触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function txtToupper(){

        var x=document.getElementById("txt1").value

        document.getElementById("txt1").value=x.toUpperCase()

    }

</script>

</head>

<body>

    输入小写字母：

    <input type="text" id="txt1" onchange="txtToupper()" />

</body>

</html>

(4) onclick :当用户点击某个对象时触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function txtToupper(){

        var x=document.getElementById("txt1").value

        document.getElementById("txt1").value=x.toUpperCase()

    }

</script>

</head>

<body>

    <button onclick="txtToupper()">点我一下</button>

    <input type="text" id="txt1" />

</body>

</html>

(5) ondblclick :当用户双击某个html元素时触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

    function txtToupper(){

        var x=document.getElementById("txt1").value

        document.getElementById("txt1").value=x.toUpperCase()

    }

</script>

</head>

<body>

    <button ondblclick="txtToupper()">点我一下</button>

    <input type="text" id="txt1" />

</body>

</html>

(6) onerror :在加载文档或图像时发生错误触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function loadImageError(){

          alert('Error: Loading of the image was aborted')

        }

</script>

</head>

<body>

    <img src="test.jpg" onabort="loadImageError()" />

</body>

</html>

(7) onfocus :元素获得焦点触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1" onfocus="setStyle(this.id)" />

</body>

</html>

(8) onkeydown :某个键盘按键被按下触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1" onkeydown="setStyle(this.id)" />

</body>

</html>

(9) onkeypress :某个键盘按键被按下并松开触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1" onkeypress="setStyle(this.id)" />

</body>

</html>

(10) onkeyup :某个键盘按键被松开触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onkeyup="setStyle(this.id)" />

</body>

</html>

(11) onload :一张页面或一幅图像完成加载触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function alertLoadingPageInfo(){

            alert('页面加载中');

        }

</script>

</head>

<body onload="alertLoadingPageInfo()">

</body>

</html>

(12) onmousedown :鼠标按钮被按下触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onmousedown="setStyle(this.id)" />

</body>

</html>

(13) onmousemove :鼠标被移动触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onmousemove="setStyle(this.id)" />

</body>

</html>

(14) onmouseout :鼠标从某元素移开触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onmouseout="setStyle(this.id)" />

</body>

</html>

(15) onmouseover :鼠标移到某元素之上触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onmouseover="setStyle(this.id)" />

</body>

</html>

(16) onmouseup :鼠标按键被松开触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(x){

            document.getElementById(x).style.background="green";

        }

</script>

</head>

<body>

    <input type="text" id="txt1"  onmouseup="setStyle(this.id)" />

</body>

</html>

(17) onreset :重置按钮被点击触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(){

            document.getElementById('txt1').style.background="yellow";

        }

</script>

</head>

<body>

    <form onreset="setStyle()">

        <input type="text"  id="txt1" />

        <input type="reset" value="Reset" />

    </form>

</body>

</html>

(18) onresize :窗口或框架被重新调整大小触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(){

            document.getElementById('txt1').style.background="yellow";

        }

</script>

</head>

<body onresize="setStyle()">

        <input type="text"  id="txt1" />

</body>

</html>

(19) onselect :文本被选中触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function setStyle(){

            document.getElementById('txt1').style.background="yellow";

        }

</script>

</head>

<body>

    <input type="text" id="txt1" /><br/>

    <input type="text" onselect="setStyle()" />

</body>

</html>

(20) onunload :用户退出页面触发该事件。

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<script type="text/javascript">

        function alertClosePageInfo(){

            alert('将会关闭本页面');

        }

</script>

</head>

<body onunload="alertClosePageInfo()">

</body>

</html>

JavaScript -- 时光流逝（八）：js中的事件Event的使用的更多相关文章

看懂此文，不再困惑于 JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计今天刚在关注的微信公众号看到的文章,关于JS事件的,写的很详细也很容易理解,相关的知识点都有总结到,看完就有种很舒畅的感觉,该串起来的知识点都串起来了.反正一 ...
js中冒泡事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
从零开始的JS生活（二）——BOM、DOM与JS中的事件
上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举 ...
JS中的事件&对象
一.JS中的事件 (一)JS中的事件分类 1.鼠标事件 click/dblclick/onmouseover/onmouseout 2.HTML事件 onload/onscroll/onsubmit/ ...
JS学习五(js中的事件)
[JS中的事件分类] 1.鼠标事件 click/bdlclick/onmouseover/onmouseout 2. HTML事件 onload/onscroll/onsubmit/onchange/ ...
JS基础--函数与BOM、DOM操作、JS中的事件以及内置对象
前言絮叨絮叨这里是JS基础知识集中讲解的第三篇,也是最后一篇,三篇JS的基础,大多是知识的罗列,并没有涉及更难得东西,干货满满!看完这一篇后,相信许多正在像我一样正处于初级阶段的同学, ...
JS 中的事件设计
看懂此文,不再困惑于 JS 中的事件设计原文出处: aitangyong 抽空学习了下javascript和jquery的事件设计,收获颇大,总结此贴,和大家分享. (一)事件绑定的几种方式 ...
js中的事件委托或是事件代理
JavaScript(jQuery)中的事件委托 https://www.cnblogs.com/zhoushengxiu/p/5703095.html js中的事件委托或是事件代理详解 https: ...
JS中的事件传播流程
JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2 ...

随机推荐

Go Web：Handler
Multiplexer根据URL将请求路由给指定的Handler.Handler用于处理请求并给予响应.更严格地说,用来读取请求体.并将请求对应的响应字段(respones header)写入Resp ...
GNU C 与 ANSI C（下）
1. 语句表达式 GNU C 把包含在括号中的复合语句看做是一个表达式,称作语句表达式,它可以出现在任何允许表达式的地方.我们可以在语句表达式中使用原本只能在复合语句中使用的循环.局部变量等,例如: ...
MySQL系列详解十：MySQL多源复制演示-技术流ken
前言多源复制即多主一从结构,多个主服务器端的数据都会同步到后端一个从服务器上面.至于为什么要做多源复制下面的总结很到位. 1.灾备作用:将各个库汇总在一起,就算是其他库都挂了(整个机房都无法连接了) ...
重构——与设计模式的恋情
慢慢的,我发现,我想和<重构>加深感情不那么容易,于是我就想办法,重构有个好闺蜜<设计模式>,他们青梅竹马两小无猜,行为习性喜好都差不多,要让重构爱上我,我或许可以和设计模式多 ...
vb.net 水晶報表CrystalReport 動態設定資料庫來源
沒有出現CrystalReportViewer時,須安裝CRforVS_13_0. 新增1個數據集,新增1個數據表,添加二列,列名要和資料庫名一樣. 修改目標Framework 修改app.confi ...
vb.net 多线程運用 ping
Imports System.IOImports System.ThreadingImports System.Diagnostics Public Class Form1 Dim A(254) As ...
Linux-学习patch命令打补丁,diff命令制作补丁(3)
patch:通过补丁文件,来对原文件打补丁 diff: 比较两个文件,然后生成一个补丁文件 1.patch用法 patch -p[剥离层级] <[补丁文件] 2.patch命令 ...
js的介绍及用法常量变量！
1.js介绍 js全程叫javascript,但不是java 他是一门前台语言而java是后台语言. js的作者是布兰登爱奇前台语言:运行在客户端后台语言:跟数据库有关的. 2.能干什么? 页 ...
Redirection
Typically, the syntax of these characters is as follows, using < to redirect input, and > to r ...
adb命令中的keyevent事件
电话键 KEYCODE_CALL: 拨号键 KEYCODE_ENDCALL: 挂机键 KEYCODE_HOME: 按键Home KEYCODE_MENU: 菜单键 KEYCODE_BACK: 返回键 ...

JavaScript -- 时光流逝（八）：js中的事件Event的使用

JavaScript -- 时光流逝（八）：js中的事件Event的使用的更多相关文章

随机推荐

热门专题