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

常用事件:

● 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 >
    <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>
时间: 2024-08-24 23:31:19

Javascript 笔记与总结(2-14)事件的相关文章

Javascript 笔记与总结(1-4)this

js 中函数的 4 种调用方式: ① 作为普通函数来调用,this 的值指向 window,准确地说,this 为 null,被解释成为 window.在 ECMAScript5 标准中,如果 this 为 null,则解释成 undefined <script> function t(){ this.x = 'hello'; } t(); alert(window.x); </script> 弹出:hello ② a.作为对象的方法来调用,this 指向方法的调用者,即该对象 &

.Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化

原文:.Net 转战 Android 4.4 日常笔记(4)--按钮事件和国际化 我们知道资源被注册到R.java我们通过R.java就可以读取到界面中的组件.跟我们.net一样,通过ID来读取组件 知识点: 通过R.java读取组件 MainActivity.java通过findViewById方法查找组件 在Layout中用@string查找字符串,这个跟我们MVC中国际化基本相识,通过xml这种资源引用进行中文和英文切换 加入中文和英文本地化 双击fragment_main.xml设计视图

Web开发——JavaScript库(jQuery 语法 / 选择器 / 事件)

通过 jQuery,您可以选取(查询,query) HTML 元素,并对它们执行"操作"(actions). 1.jQuery 语法 1.1 jQuery语法举例 1.1.1 $(this).hide() 演示 jQuery hide() 函数,隐藏当前的 HTML 元素. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta h

javascript高级程序设计 第十三章--事件

javascript高级程序设计 第十三章--事件js与HTML的交互就是通过事件实现的,事件就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流:事件流描述的是从页面中接收事件的顺序,IE的是事件冒泡流,Netscape的是事件捕获流,这个两个是完全相反的事件流概念. 事件冒泡:由最具体的元素接收,然后逐级向上传播到更高级的节点,即事件沿DOM树向上传播,直到document对象. 事件捕获:不大具体的节点应该更早接收到事件,相当于沿DOM节点树向下级传播直到事件的实际目标,在浏览器中,是

JavaScript笔记之Function

一.函数定义 (1)使用function declaration 格式:function functionName(parameters) { function body } 注:此种方式声明的函数作用域是全局的,即在声明之前可以调用 (2)使用function expression 格式:var name = function (parameters) { function body }; 注:与(1)不同,在声明之前不可以调用 (3)使用function constructor() 格式:v

笔记-【3】-event事件对象的详解!

event事件对象:是指当前对象发生的事件的一些详细的信息在event这个对象里. event对象从哪里来?从事件函数中传入 obj. //e就会当前的事件对象event } 对象就有属性和方法:那么event对象也有属性和方法 event的属性和方法: { 属性: button :  当前事件的方法中判断鼠标的按键位置 有三个值: 0 (左键) 1(滚轮) 2(右键) ctrlkey:  判断是否按下了ctrl键; altkey:  判断是否按下了alt键; shiftkey:  判断是否按下

JavaScript文档加载和事件绑定

为了保证网页代码层次清晰,便于管理,一般HTML中只体现网页结构,具体的行为处理通过JS实现,样式则通过CSS文件管理. 在以上原则下通过JS实现行为时,一定要注意文档加载过程中,执行JS代码的时机.页面加载过程有两个事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载.) (1) 一些待调用函数定义,要在调用前定义. (2) 对于完善网页元素的JS,伴随文档

document.ready和onload的区别——JavaScript文档加载完成事件

文章转自:http://blog.csdn.net/kk5595/article/details/5713209 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 我的理解: 一般样式控制的,比如图片大小控制放在onload 里面加载; 而:jS事件触发的方法,可以在ready 里面加载; 更多内容戳这里:http://blog.

javascript笔记(二)

concat() 连接多个字符串,返回合并后的字符串. 1 var s1="a"; 2 var s2="b"; 3 var s3="c"; 4 5 console.log(s1.concat(s2,s3));//abc concat() 方法的结果等同于:result = s1 + s2 + ... + sN.如果有不是字符串的参数,则它们在连接之前将首先被转换为字符串. 数组中的concat():将参数添加为数组的元素,返回新的数组. 1 va

【javascript】jQuery判断用户右击事件

jquery 判断用户是鼠标是右击还是左击, // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键 $(document).mousedown(function(e) { if(3 == e.which){ alert('这 是右键单击事件'); }else if(1 == e.which){ alert('这 是左键单击事件'); } }); [javascript]jQuery判断用户右击事件,布布扣,bubuko.com