码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript 笔记与总结(2-14)事件

时间:2015-05-02 15:04:05      阅读:142      评论:0      收藏:0      [点我收藏+]

标签:

常用事件:

● 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" >
    <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>

 

Javascript 笔记与总结(2-14)事件

标签:

原文地址:http://www.cnblogs.com/dee0912/p/4471961.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!