常用事件:

● 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. MVC中session创建并获取问题

    有两个ActionResult分别为A和B,如下 public ActionResult A() { Session["test"]="123"; return ...

  2. Jquery的tmpl

    jquery 中的tmpl类似于asp.net中的datalist控件. 首选,在页面代码中加入两行,jquery的js文件引用 <script src="http://code.jq ...

  3. poj 3140(树形dp)

    题目链接:http://poj.org/problem?id=3140 思路:简单树形dp题,dp[u]表示以u为根的子树的人数和. #include<iostream> #include ...

  4. mvc-4控制器和状态(2)

    访问视图 常见地视图模式时一个视图对应一个控制器,视图包含一个id,通过id传入控制器:在视图之中的元素则使用class 这里会使用jquery的选择器,为了减少使用,可以设置一个专门用于存放选择器到 ...

  5. javascript优化--01高质量编码

    javascript的浮点数: Javascript的数字都是双精度浮点数: 64位编码数字: 能表达53位精度的整数: 进行位运算时会隐式地转化为32位整数(0,1序列)后计算: 浮点数运算可能会有 ...

  6. Xamarin Android提示找不到资源属性定义

    Xamarin Android提示找不到资源属性定义 错误信息:”Resource.Attribute”未包含”actonBarSize”的定义Xamarin Android经常会出现找不到资源属性的 ...

  7. 2016 Multi-University Training Contest 8

    solved 4/11 2016 Multi-University Training Contest 8 贪心 1001 Ball(BH) 代码: #include <bits/stdc++.h ...

  8. 回文串+回溯法 URAL 1635 Mnemonics and Palindromes

    题目传送门 /* 题意:给出一个长为n的仅由小写英文字母组成的字符串,求它的回文串划分的元素的最小个数,并按顺序输出此划分方案 回文串+回溯:dp[i] 表示前i+1个字符(从0开始)最少需要划分的数 ...

  9. datetime与smalldatetime之间的区别

    1.一直以为smalldatetime和datetime的差别只是在于时间范围: smalldatetime的有效时间范围1900/1/1~2079/6/6datetime的有效时间范围1753/1/ ...

  10. BZOJ4348 : [POI2016]Park wodny

    首先特判全部都是A或者全部都是B或者$n=1$的情况. 然后把矩阵四周都填充上A,枚举一个块,分以下情况讨论: 1.在它四周选两个块扩展,此时平方暴力枚举即可. 2.在它四周选定一个方向扩展两步. 3 ...