提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

Javascript 笔记与总结（2-14）事件

JavaScript事件笔记 总结 14
2023-09-11 14:17:03 时间

常用事件：

● onclick 元素点击时

● onfocus 元素获得焦点时

● onblur 元素失去焦点时

● onmouseover 鼠标经过时

● onsubmit 表单提交时（<form onsubmit="return func();"></form>）

● onload 页面加载完毕时

注：onsubmit = "return func()";  func() 函数才能阻拦提交的结果。

 

【例】onload 的缺点：

img.php，用于展示图片，这里让图片 5 秒之后输出

<?php
$img = imagecreatetruecolor(300, 300); //创建一个300 * 300 px 的黑色方块
sleep(5); //5 秒之后输出
header("content-type:image/png");
imagepng($img);

 

test.html，引用图片，同时使用 onload 事件改变文字效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        function t(){
            document.getElementById("p").style.fontWeight = "bold";
        }
    </script>
</head>
<body onload="t();">
    <img src="img.php" alt="">
    <p id="p">定时改变文字</p>                
</body>
</html>

 

此时访问 test.html，页面显示：

5 秒之后：

结论：onload 事件必须要等页面内所关联的 比如 src 引用来的不论是本站还是外站的全部的元素都加载完毕之后，才执行。

 

 

附：sublime （text2 | test3）快捷键：

① 输入：

p>input:text

按 tab ，得到：

<p><input type="text" name="" id=""></p>

 

② 输入：

p*2>input:text

按 tab，得到：

<p><input type="text" name="" id=""></p>
<p><input type="text" name="" id=""></p>

 

相关文章