创建元素

最新推荐文章于 2022-10-06 15:11:43 发布

weixin_44740410

最新推荐文章于 2022-10-06 15:11:43 发布

阅读量147

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44740410/article/details/88917858

本文介绍DOM元素的创建方法，包括document.write、innerHTML属性及createElement方法，并探讨不同事件绑定方式及其解绑方法。此外，还讨论了事件冒泡现象及其阻止策略。

创建元素的三种方式:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--第一种创建方式:document.write("<p>文本</p>")-->
<button id="btn">动态创建h1标签</button>
<!--第二种创建方式:父元素.innerHTML=<p>文本</p>-->
<button id="btn1">动态创建p标签</button>
<div id="dv">

</div>
<script src="comen.js"></script>
<script>
    //第一种方式: document.write("<p>文本</p>")
    my$("btn").onclick=function(){
        document.write("<h1>这是创建的标题标签</h1>")
    }
    //使用第一种方式创建元素,缺点创建好了元素会把之前页面中所有的内容给替换掉了
    //第二种创建方式:父元素.innerHTML=<p>文本</p>
    my$("btn1").onclick=function () {
        my$("dv").innerHTML="<p>这是动态创建的p标签</p>"
    }

</script>

</body>
</html>性能问题:
innerHTML方法由于会对字符串进行解析，需要避免在循环内多次使用。 
可以借助字符串或数组的方式进行替换，再设置给innerHTML
优化后与document.createElement性能相近

绑定和解绑事件

用什么方式绑定事件，就用对应的方式解绑事件
1.使用addEventListener绑定事件
绑定事件；
对象.addEventListener("不加on的事件类型",命名函数的名字,false);
解绑事件：
对象.removeEventListener("不加on的事件类型",命名函数的名字,false);
2.使用attachEvent绑定事件
绑定事件
对象.attachEvent("加on的事件类型",命名函数的名字)
解绑事件：
对象.detachEvent("加on的事件类型",命名函数的名字)
3.使用on事件
绑定事件
对象.on事件类型=事件处理函数
解绑事件：
对象.on事件类型=null；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="显示事件" id="btn">
<input type="button" value="解绑事件" id="btn1">
<script src="comen.js"></script>
<script>
  /*  my$("btn").addEventListener("click",f1,false);
    my$("btn").addEventListener("click",f2,false);
    function f1(){
        console.log("我爱学习")
    }
    function f2(){
        console.log("学习使我快乐")
    }
    my$("btn1").οnclick=function () {
        my$("btn").removeEventListener("click",f1,false);
    }*/

  my$("btn").οnclick=function () {
      console.log("天气真好!")
  }
  my$("btn1").οnclick=function () {
     my$("btn").οnclick=null;
  }


</script>
</body>
</html>

为元素添加解绑的兼容代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" value="显示事件" id="btn">
<input type="button" value="解绑事件" id="btn1">
<script src="comen.js"></script>
<script>
    function addEventListener(element,type,fn) {
        // if (element,addEventListener)
        //浏览器判断是不是支持addEventListener
        //如果不支持,再判断支不支持attachEvent
        //如果都不支持,on事件
        if (element,addEventListener) {
            element.addEventListener(type,fn,false);
        }else if (element,attachEvent){
            element.attachEvent('on'+type,fn);
        } else{
            element['on'+type]=fn;
        }
    }

    addEventListener(my$("btn"),"click",f1);
    addEventListener(my$("btn"),"click",f2);
    function f1() {
        console.log("下雨了")
    }
    function f2() {
        console.log("天晴了")
    }
    function removeEventListener(ele,type,fn) {
        if (ele,removeEventListener) {
            ele.removeEventListener(type,fn,false);
        }else if (ele.detachEvent) {
            ele.detachEvent('on'+type,fn);
        }else {
            ele['on'+type]=null;
        }
    }
    my$("btn1").οnclick=function () {
        removeEventListener(my$("btn"),"click",f1);
    }
</script>
</body>
</html>

元素的相关方法

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv {
width: 300px;
height: 400px;
border: 1px solid #000;
}
</style>
</head>
<body>
<input type="button" value="显示效果" id="btn">
<input type="button" value="往前追加元素" id="btn1">
<input type="button" value="替换第一个元素" id="btn2">
<input type="button" value="删除第一个元素" id="btn3">
<input type="button" value="删除所有元素" id="btn4">

my$("btn3").onclick = function () {
// console.log(my$("dv").firstElementChild);//null
if (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
}

my$("btn4").onclick = function () {
while (my$("dv").firstElementChild) {
my$("dv").removeChild(my$("dv").firstElementChild);
}
}

</script>
</body>
</html>

冒泡事件

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#dv1 {
width: 400px;
height: 400px;
background-color: green;
}

#dv2 {
width: 300px;
height: 300px;
background-color: gray;
}

#dv3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>

<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>

</body>
</html>

事件的阶段：
1.捕获阶段:由外到内
2.目标阶段：选择的那个
3.冒泡阶段：由内到外
e.eventPhase:查看事件触发时显示的阶段
1===捕获阶段
2===目标阶段
3===冒泡阶段
addEventListener（事件的类型，事件处理函数，控制事件阶段的）；第三个参数为false：冒泡，如果为true：捕获
阻止事件冒泡：
①e.stopPropgation-----e是事件参数对象，是火狐特有的-----谷歌火狐支持，ie8不支持
②window.event.cancelBubble---window.event是事件参数对象，是ie特有的，ie不支持e，----谷歌ie支持，火狐不支持

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<
<style>
#dv1 {
width: 400px;
height: 400px;
background-color: green;
}

#dv2 {
width: 300px;
height: 300px;
background-color: gray;
}

#dv3 {
width: 200px;
height: 200px;
background-color: yellowgreen;
}
</style>
</head>
<body>

<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>

var objs = [my$("dv1"), my$("dv2"), my$("dv3")];
for (var i = 0; i < objs.length; i++) {
objs[i].addEventListener("click", function (e) {
console.log(this.id+"============="+e.eventPhase);
}, true);
}