JS的DOM0级和DOM2级-JS复习笔记

最新推荐文章于 2022-07-08 16:19:44 发布

苦逼水哥

最新推荐文章于 2022-07-08 16:19:44 发布

阅读量183

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/jy02562179/article/details/105378147

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JS的DOM0级和DOM2级区别

很久没有进行.net开发了，重新回来复习，每天的复习笔记总结一下。

下面展示一些 内联代码片。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM事件处理0级-2级事件处理</title>
    <link rel="stylesheet" href="../Funtion/style.css">

</head>
<body>

//例子内容
<button id="btn1">DOM0级</button>     //DOM0级测试按钮
<br/>
<br/>
<br/>
<br/>
<button id="btn2">DOM2级</button>    //DOM2级测试按钮
<br/>
<br/>
<br/>
<br/>
  <div id="div" >
      <button id="btn3">阻止冒泡</button>   //DOM阻止向上冒泡测试按钮
      <br/>
  </div>
<br/>
<br/>
<br/>
<br/>
<button id="btn4">老版本兼容</button>     //老版本测试按钮
<br/>
<br/>
<br/>
<br/>
<!--  DOM0级事件处理-->
<!--把一个函数赋值给一个事件处理程序属性-->
<!-- 重点： 0级事件只会输出一次-->
  <script>
      var btn1 =document.getElementById("btn1");
      btn1.onclick =  function () {alert("Hello DOM0级事件处理程序1")};
      btn1.onclick =  function () {alert("Hello DOM0级事件处理程序2")};
  </script>


<!--DOM2级事件处理-->
<!-- 重点： 二级 事件处理的好处就是可以多个输出-->
<!--addEventListener(事件名，事件处理函数，布尔值)-->
<!--true:事件捕获  false:事件冒泡 removeEventListener()：移除事件-->
<script>
    var btn2 =document.getElementById("btn2");

    btn2.addEventListener("click",demo1);
    btn2.addEventListener("click",demo2);
    btn2.addEventListener("click",demo3);

    function  demo1() {alert("DOM2级事件处理-demo1")}
    function  demo2() {alert("DOM2级事件处理-demo2")}
    function  demo3() {alert("DOM2级事件处理-demo3")}
    <!--  移除某个事件 移除事件2-->
    btn2.removeEventListener("click",demo2);

</script>

<!--  阻止向上冒泡  -->
<script>
    document.getElementById("btn3").addEventListener("click",showType);//添加一个点击事件
    document.getElementById("div").addEventListener("click",showType);//添加一个DIV点击事件
    function showType(event)
    {
        alert(event.type);
        alert(event.target);
        event.stopPropagation(); //阻止DIV向上冒泡 即使div添加了事件，阻止以后也不会冒泡
    };
</script>

<!-- IE事件处理程序- 老版本兼容 -->
<!--  老版本使用 attacEvent detachEvent -->
<script>
    var btn4 =document.getElementById("btn4");
    if(btn4.addEventListener) {
        btn4.addEventListener("click",demo4)
    }else
        if (btn4.attacEvent){
            btn4.attacEvent("click",demo5);
            // btn4.detach("click",demo5()); //移除事件
        }
    function  demo4() {alert("IE事件处理程序- 新版本-demo4")}
    function  demo5() {alert("IE事件处理程序- 老版本-demo5")}
</script>

</body>
</html>