常用事件：

● 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*>input:text

按 tab，得到：

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

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

Javascript 笔记与总结（2-14）事件的更多相关文章

  1. Javascript 笔记与总结（1-4）this

    js 中函数的 4 种调用方式: ① 作为普通函数来调用,this 的值指向 window,准确地说,this 为 null,被解释成为 window.在 ECMAScript5 标准中,如果 thi ...

  2. [Effective JavaScript 笔记]第3章：使用函数--个人总结

    前言 这一章把平时会用到,但不会深究的知识点,分开细化地讲解了.里面很多内容在高3等基础内容里,也有很多讲到.但由于本身书籍的篇幅较大,很容易忽视对应的小知识点.这章里的许多小提示都很有帮助,特别是在 ...

  3. javaScript笔记详解（1）

    javaScript基础详解 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 首先讲javaScript的摆放位置:<sc ...

  4. jQuery学习笔记之DOM操作、事件绑定（2）

    jQuery学习笔记之DOM操作.事件绑定(2) --------------------学习目录------------------------ 4.DOM操作 5.事件绑定 源码地址: https ...

  5. JavaScript笔记（第一章，第二章）

    JavaScript笔记(第一章,第二章) 第一章: <meta http-equiv="Content-Type" content="text/html; cha ...

  6. JavaScript获取onclick、onchange等事件值的代码

    这里主要是用到了getAttributeNode()这个方法,它获取的是属性节点,忽略属性和事件的差别,具体示例如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 今天小菜处理下拉菜单级联问题时,想获取 ...

  7. JavaScript获取onclick、onchange等事件的值

    今天小菜处理下拉菜单级联问题时,想获取HTML标签中某个事件的内容,也就是值,比如从<select id="city" onchange="javascript:t ...

  8. [Effective JavaScript 笔记] 第4条：原始类型优于封闭对象

    js有5种原始值类型:布尔值.数字.字符串.null和undefined. 用typeof检测一下: typeof true; //"boolean" typeof 2; //&q ...

  9. [Effective JavaScript 笔记] 第5条：避免对混合类型使用==运算符

    “1.0e0”=={valueOf:function(){return true;}} 是值是多少? 这两个完全不同的值使用==运算符是相等的.为什么呢?请看<[Effective JavaSc ...

  10. [Effective JavaScript 笔记]第27条：使用闭包而不是字符串来封装代码

    函数是一种将代码作为数据结构存储的便利方式,代码之后可以被执行.这使得富有表现力的高阶函数抽象如map和forEach成为可能.它也是js异步I/O方法的核心.与此同时,也可以将代码表示为字符串的形式 ...

随机推荐

  1. 【图文详解】scrapy安装与真的快速上手——爬取豆瓣9分榜单

    写在开头 现在scrapy的安装教程都明显过时了,随便一搜都是要你安装一大堆的依赖,什么装python(如果别人连python都没装,为什么要学scrapy….)wisted, zope interf ...

  2. cf584a(水题)

    题意是输出一个能被t整除的n位数... 思路很简单,输出t和n-1个0即可.当然,还需要特判一下t为1,n为10的情况.. 代码如下: #include <bits/stdc++.h> u ...

  3. kvm xxx.xml文件的位置

    /var/run/libvirt/qemu/xxx.xml /etc/libvirt/qemu/xxx.xml

  4. JNDI 是什么

    转自:http://blog.csdn.net/zhaosg198312/article/details/3979435 JNDI是 Java 命名与目录接口(Java Naming and Dire ...

  5. JSP页面中的pageEncoding和contentType两种属性

    关于JSP页面中的pageEncoding和contentType两种属性的区别: pageEncoding是jsp文件本身的编码 contentType的charset是指服务器发送给客户端时的内容 ...

  6. 013_VM+WinDbg安装

    预计平均三天一课,录制过程中,大纲会实时更新(更改) 主讲:郁金香灬老师  QQ150330575 开发环境:VC6,VS2003,VS2008 www.yjxsoft.net www.yjxsoft ...

  7. 【转】HADOOP HDFS BALANCER介绍及经验总结

    转自:http://www.aboutyun.com/thread-7354-1-1.html 集群平衡介绍 Hadoop的HDFS集群非常容易出现机器与机器之间磁盘利用率不平衡的情况,比如集群中添加 ...

  8. Myeclipse 60.激活

    Myeclipse 用来开发java web应用是十分的方便的,不过如果没有激活的话,用起来感觉会非常不爽. 当然,个人来说还是非常支持正版的,也鼓励大家支持正版. 好了,下面介绍一下怎么破解Myec ...

  9. 精灵动画Animation对话框组成Idle动画的各精灵

    精灵动画Animation对话框组成Idle动画的各精灵 1.3  精灵动画 场景中已经添加了精灵,现在是时候让让它动起来了.读者也许已经从精灵图集中,各精灵的命名中看出来了,这个精灵一共有两种动画状 ...

  10. 贪心 HDOJ 4726 Kia's Calculation

    题目传送门 /* 这题交给队友做,做了一个多小时,全排列,RE数组越界,赛后发现读题读错了,囧! 贪心:先确定最高位的数字,然后用贪心的方法,越高位数字越大 注意:1. Both A and B wi ...