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

时间：2018-11-04 11:15:12 阅读：140 评论：0 收藏：0 [点我收藏+]

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的使用

标签：code tcl 字母 eve span 图片时光驱动 txt

原文地址：https://www.cnblogs.com/ChengWenHao/p/JavascriptPart8.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行