我们通过DOM的事件能够对HTML的事件作出反应。就像我们用其它编程语言写GUI一样，那么HTML包含哪些事件呢？以下是几个常见的样例，比方网页已经完毕记载，图像完毕载入，鼠标移动到元素上方。输入文字被改变。表单提交。用户点击按键等等，还是蛮多的。

以下我们用实例来演示一下，看以下的HTML代码：

<html>

<p id = "tag" onclick="this.innerHTML ='小倩' ">辛星</p>

</html>

它本来是辛星的。假设我们点击一下，它就会变成”小倩“，这里的onclick事实上就是一个点击事件，双引號里面的就是Javascript代码，那么既然是Javascript代码，我们最好还是把它们写到外面的script标签里面去，例如以下代码：

<html>

<p id = "tag" onclick="xin(this)">辛星</p>

<script type="text/javascript">

	function xin(my){my.innerHTML = "小倩";}

</script>

</html>

事实上功能和上面的代码是一样的，也是点击一下”辛星“。然后变成”小倩“。上面我们是直接写到了HTML代码里面，可能有人会问：能不能直接在Javascript中解决问题呢？答案是肯定的，例如以下代码：

<html>

<p id = "tag" >辛星</p>

<script type="text/javascript">

	document.getElementById("tag").onclick = function(){

		this.innerHTML  = "小倩";

	};

</script>

</html>

事实上也非常好理解。这也是DOM的一个绑定，仅仅是它直接在Javascript中完毕了事件的绑定。每次我们单击”辛星“这个事件触发的时候，它就会运行这个函数，这个函数的功能就是改变当中的文本显示信息。

     除了onclick事件之外，还有哪些事件比較重要一些呢？首先就是onload事件，它会在用户进入页面的时候触发，而onunload会在用户离开页面的时候触发。这两个事件对于处理cookie都是不错的，关于cookie我们后面会接触到。另一个就是onchange事件。它通常结合对输入字段的验证来使用，比方我们能够在输入框或者password框中使用该事件来检測用户输入的信息，而onmouseover则是在鼠标移动到HTML元素上方的时候触发。而onmouseout则是在鼠标从HTML元素上方移出的时候触发。相对于onclick这个点击过程来说，onmousedown、onmouseup就更加仔细入微了，前者表示我们用鼠标点击button的时候触发，后者则是我们松开的时候触发。

2014年辛星解读Javascript之DOM之事件及其绑定的更多相关文章

  1. 2014年辛星解读Javascript之DOM之冒泡和捕获

    上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...

  2. 2014年辛星解读Javascript之DOM高速入门

    在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...

  3. 2014年辛星解读Javascript之用DOM动态操纵HTML元�

    关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...

  4. 2014年度辛星解读css第四节

    接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...

  5. 2014年辛星解读css第一节

    CSS是Cascading Style Sheets的缩写.即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制. ************ ...

  6. 2014年辛星解读css第五节

    本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...

  7. 2014年辛星解读css第二节

    第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好. *************凝视*** ...

  8. 2014年辛星解读css第六节

    这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...

  9. 2014年辛星解读css第三节

    第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...

随机推荐

  1. macOS Sierra 10.12.4 (16E195) - Clover [ 20170403 ]

    原文:https://user.qzone.qq.com/753313822/blog/1424460141?_t_=0.48652242555134495 建议使用 1920 * 1080 屏幕分辨 ...

  2. java timer timertask mark

    其实就Timer来讲就是一个调度器,而TimerTask呢只是一个实现了run方法的一个类,而具体的TimerTask需要由你自己来实现,例如这样: 1 2 3 4 5 6 Timer timer = ...

  3. C#中关于用户名和密码的验证问题。

    本次练习的目的是使用LinQ to XML,正则表达式,明天在这个基础上练习使用序列化和反序列化,继续加点儿小功能. 首先,这是一个窗体程序,设计如下: 存放用户名和密码的XML如下: 实现的代码如下 ...

  4. RTX——第18章 内存管理

    以下内容转载自安富莱电子: http://forum.armfly.com/forum.php 内存管理介绍在 ANSI C 中,可以用 malloc()和 free()2 个函数动态的分配内存和释放 ...

  5. hdu2609（最小表示法）

    题意:有n个环形字符串,一个环形字符串移动会形成不能的字符串,我们把它们看作同一串字符串,求有多少个不同的字符串....... 思路:用最小表示发将一个环形串的最小字典序找出来,然后让这个环形串按照这 ...

  6. 【C++程序员学 python】python 之helloworld

    我学习C语言之后才学的C++,所以这里写一个简单的helloworld程序. #coding:utf-8 def main(): print "hello world" if __ ...

  7. .Net应该学什么怎么学（四）

    八.ASP.Net    ASP.Net是.Net中用来开发动态Web应用程序的技术,ASP.Net主要分ASP.Net WebForm(以后简称WebForm)和ASP.Net MVC两种技术,大部 ...

  8. 常见Java工具——jps

    简介 最常用的一个. 与Linux中的查看Java进程命令功能相同: ps -ef | grep java jps与这个命令的区别在于,jps仅仅过滤出Java本身的进程以及运行的引导类,就是引导ma ...

  9. 轻量级ORM框架Dapper应用六：Dapper支持存储过程

    在Entity Framework中讲解了EF如何支持存储过程,同样,Dapper也支持存储过程,只需要在Query()方法的CommandType中标记使用的是存储过程就可以了.在Users表上面创 ...

  10. 让PHP7达到最高性能的几个Tips

    PHP7 已经发布了,作为PHP十年来最大的版本升级,最大的性能升级,PHP7在多放的测试中都表现出很明显的性能提升,然而,为了让它能发挥出最大的性能,我还是有几件事想提醒下. PHP7 VS PHP ...