首页 > 代码库 > JavaScript(二)-精简

JavaScript(二)-精简

十三 DOM(文档对象模型)

   1 作用 : 可访问javascript HTML文档的所有元素.

   2 功能: (1) 改变html输出流

           eg: <script>
                        document.write(Date());
                      </script>

     (2) 改变HTML内容

        eg: <p id="p1">Hello World!</p>
            <script>
            document.getElementById("p1").innerHTML="新文本!";
            </script>
            <p>以上段落通过脚本修改文本。</p>

     (3) 改变HTML属性

       eg:
      <img id="image" src="http://www.mamicode.com/smiley.gif" width="160" height="120">
      <script>
          document.getElementById("image").src="http://www.mamicode.com/landscape.jpg";
      </script>

      (4) 改变css样式

      <p id="p1">Hello World!</p>
      <p id="p2">Hello World!</p>
      <script>
      document.getElementById("p2").style.color="blue";
      document.getElementById("p2").style.fontFamily="Arial";
      document.getElementById("p2").style.fontSize="larger";
      </script>
      <p>以上段落通过脚本修改。</p>

    (5)使用的事件

   1 元素被点击

    eg:
          <h1 id="id1">我的标题 1</h1>
          <button type="button"
          onclick="document.getElementById(‘id1‘).style.color=‘red‘">
          点我!</button>

     2 如需向HTML元素分配事件,可以使用事件属性

    eg:
       <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
       <button onclick="displayDate()">点这里</button>
       <script>
       function displayDate(){
            document.getElementById("demo").innerHTML=Date();
       }
       </script>
       <p id="demo"></p>

     3 onload 和 onunload 事件

       用于在进入或离开页面时被触发,
       onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
     onload 和 onunload 事件可用于处理 cookie。

     eg:
            function mymessage(){
                alert("消息在 onl oad 事件触发后弹出。");
            }

            <body onl oad="mymessage()"></body>



   4 onchange事件 

     onchange事件常结合对输入字段的验证来输入,

           function myFunction(){
                  var x=document.getElementById("fname");
                  x.value=http://www.mamicode.com/x.value.toUpperCase();
           }

          输入你的名字: <input type="text" id="fname" onchange="myFunction()">

     5  onfocus事件(当输入字段获得焦点时,改变其背景色)

     eg:
             function myFunction(x){
                x.style.background="yellow";
             }

            输入你的名字:
             <input type="text" onfocus="myFunction(this)"> 
      

     6  onm ouseover 和 onmouseout 事件
 
         可用在用户的鼠标移至HTML元素上方或移出元素时触发的函数.

    eg:
          <style>
             div{
                 background-color:#D94A38;
                 width:120px;
                 height:20px;
                 padding:40px;
             }
          </style>
          <div onm ouseover="mOver(this)" onm ouseout="mOut(this)">Mouse Over Me</div>
            <script>
            function mOver(obj){
               obj.innerHTML="Thank You"
            }
            function mOut(obj){
               obj.innerHTML="Mouse Over Me"
            }
            </script>

    7  onm ousedown , onm ouseup, onclick 事件

       nmousedown, onm ouseup 以及 onclick 构成了鼠标点击事件的所有部分。
      首先当点击鼠标按钮时,会触发 onm ousedown 事件,当释放鼠标按钮时,会触发 onm ouseup 事件, 
      最后,当完成鼠标点击时,会触发 onclick 事件。

  十四 EventListener 方法 

    一 语法

        element.addEventListener(event,function,useCapture);

              1 第一个参数是事件的类型(如 "click"或 "mousedown").
              2  第二个参数是事件触发后调用的函数.
             3 第三个参数是布尔值用于描述事件是冒泡还是捕获(该参数可选) 

    二 事件冒泡或事件捕获

      事件传递的两种方式 : 冒泡 和 捕获

       
        

  三  addEventListener()方法 

作用: 1 用于指定元素添加事件句柄
           eg:
              <button id="myBtn">点我</button>
              document.getElementById("myBtn").addEventListener("click", function(){
              alert("Hello World!");
              });
     
    
    2 可以向一个元素添加多个事件句柄,也可以添加同类型的事件句柄,,且不会覆盖已存在的事件.
      例如 (1)(两个"click事件"同类型事件)

                <button id="myBtn">点我</button>
                var x = document.getElementById("myBtn");
                x.addEventListener("click", myFunction);
                x.addEventListener("click", someOtherFunction);
                function myFunction() {
                     alert ("Hello World!")
                }
                function someOtherFunction() {
                     alert ("函数已执行!")
                }

              (2) 向同个元素添加不同类型的事件

                <button id="myBtn">点我</button>
                <p id="demo"></p>
                var x = document.getElementById("myBtn");
                x.addEventListener("mouseover", myFunction);
                x.addEventListener("click", mySecondFunction);
                x.addEventListener("mouseout", myThirdFunction);
                function myFunction() {
                    document.getElementById("demo").innerHTML += "Moused over!<br>"
                  }
                function mySecondFunction() {
                    document.getElementById("demo").innerHTML += "Clicked!<br>"
                  }
                function myThirdFunction() {
                    document.getElementById("demo").innerHTML += "Moused out!<br>"
                  }

   3 removeEventListener() 方法来移除事件的监听.

      eg:

      <div>
        <p>点击按钮移除 DIV 的事件句柄。</p>
        <button onclick="removeHandler()" id="myBtn">点我</button>
      </div>
      <p id="demo"></p>

      <script>

      document.getElementById("myDIV").addEventListener("mousemove", myFunction);

      function myFunction() {
        document.getElementById("demo").innerHTML = Math.random();
      }

      function removeHandler() {
        document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
      }



   4 向任何 DOM 对象添加事件监听,不仅仅是 HTML 元素。
        如: window 对象,Html元素, Html文档.

     5 传递参数

     eg:  <button id="myBtn">点我</button>
            <p id="demo"></p>
            var p1 = 5;
            var p2 = 7;
            document.getElementById("myBtn").addEventListener("click", function(){
                myFunction(p1, p2);
            });
            function myFunction(a, b) {
                var result = a * b;
                document.getElementById("demo").innerHTML = result;
            }




  -->

  <!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title></title>
      <style>
          div{
              width: 300px;
              height: 300px;
              background-color: red;
              font-size: 30px;
              color:yellow;
          }
      </style>
      <script>

            function dian(){

               document.getElementById(‘aa‘).innerHTML="您被点击了";
               document.getElementById(‘aa‘).style.background="blue";

            }


            function fang(){

               var x = document.getElementById(‘aa‘).innerHTML="您被放开了";
               document.getElementById(‘aa‘).style.background="black";

            }


      </script>
      <style>
      div{
              /*background-color: coral;
              border: 1px solid;
              padding: 50px;*/
        }
      </style>
    </head>
    <body>
<!--
       <div id="aa" onm ousedown="dian()" onm ouseup="fang()">Thank You</div>

       <h1 onm ouseover="style.color=‘red‘"onmouseout="style.color=‘black‘">
           将鼠标移至文部上
       </h1> -->


       <p>实例演示了在添加不同事件监听时,冒泡与捕获的不同。</p>

      <div id="myDiv">
        <!-- 在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,
        即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。 -->
          <!-- <p id="myP">点击段落,我是冒泡。</p> -->
      </div><br>

      <div id="myDiv2">
        <!-- 在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,
        即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。 -->
          <!-- <p id="myP2">点击段落,我是捕获。 </p> -->
      </div>

      <script>
      // document.getElementById("myP").addEventListener("click", function() {
      //     alert("你点击了 P 元素!");
      // }, false);
      //
      // document.getElementById("myDiv").addEventListener("click", function() {
      //     alert(" 你点击了 DIV 元素 !");
      // }, false);
      //
      // document.getElementById("myP2").addEventListener("click", function() {
      //     alert("你点击了 P2 元素!");
      // }, true);
      //
      // document.getElementById("myDiv2").addEventListener("click", function() {
      //     alert("你点击了 DIV2 元素 !");
      // }, true);

      </script>

      <!--

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
              "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
          <title>DOM对象</title>
          <style>
              #div{
                  width: 200px;
                  height: 200px;
                  background-color: bisque;
              }
          </style>

          <script>
              function fn_a(){
                  document.write("hello world!");
              }
      //        变 HTML 元素的内容
              function fn_b(){
                  document.getElementById("hh").innerHTML="我是地球人";
              }
      //        改变 HTML 元素的属性
              function fn_c(){
                  document.getElementById("a").href="http://www.qq.com";
              }
      //        改变 HTML 元素的样式
              function fn_d(){
                  document.getElementById("div").style.backgroundColor="blue";
              }
      //        向 HTML 元素分配事件
              function fn_e(){
                  document.getElementById("div").onclick=function(){
                      document.getElementById("div").style.backgroundColor="red";
                  }
              }

          </script>
      </head>
      <body onl oad="fn_e()">
          <h1 id="hh">我是中国人</h1>
          <a href="http://baidu.com" id="a">搜我一下</a><br><br>
          <div id="div">我是div</div>
          <button onclick="fn_b()">改变文本内容</button><br><br>
          <button onclick="fn_c()">改变属性</button><br><br>
          <button onclick="fn_d()">改变css样式</button><br><br>
      </body>
      </html>
     -->

    </body>
  </html>

JavaScript(二)-精简