zoukankan      html  css  js  c++  java
  • 2014年辛星解读Javascript之DOM之事件及其绑定

         我们通过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的时候触发,后者则是我们松开的时候触发。

  • 相关阅读:
    python count函数
    kubenetes服务发现
    k8s网络
    k8s创建pod流程
    openstack创建虚拟流程、各组件介绍
    生产者消费者问题
    Date类和Calendar类
    Timer定时器
    Java中的克隆
    注解
  • 原文地址:https://www.cnblogs.com/blfbuaa/p/6718120.html
Copyright © 2011-2022 走看看