本文介绍了三种创建HTML元素的方法：使用document.write(), innerHTML属性以及document.createElement()。此外还讲解了事件处理，包括添加、移除事件监听器的兼容性写法，并探讨了事件冒泡现象及其解决方案。
创建元素的三种方式
document.write()
document.write('新设置的内容<p>标签也可以生成</p>');
<script>
function my$(id) {
return document.getElementById(id)
}
my$("btn").onclick=function () {
document.write("<h1>这是h1标签</h1>")
}
</script>
innerHTML
var box = document.getElementById('box');
box.innerHTML = '新内容<p>新标签</p>';
<button id="btn">在div中动态创建列表</button>
<div id="dv"></div>
<script src="common.js"></script>
<script>
var hero = ['杨过','郭靖','虚竹','段誉','乔峰'];
my$("btn").onclick = function () {
var str= "<ul type='square'>"
for (var i = 0; i < hero.length; i++) {
str += " <li>" + hero[i] + "</li>";
}
str += "</ul>";
my$("dv").innerHTML = str;
}
</script>
document.createElement()
var div = document.createElement('div');
document.body.appendChild(div);
<button id="btn">创建p标签</button>
<div id="dv">
<h1>h1标签</h1>
</div>
<script src="common.js"></script>
<script>
my$("btn").onclick=function () {
var pObj = document.createElement("p");
my$("dv").appendChild(pObj);
pObj.innerText="这是通过createElement方法创建的p标签";
pObj.className="cls";
}
</script>
鼠标移入移出
// 鼠标移入
function mouseoverHandle() {
this.style.background = "#f60";
}
// 鼠标移出
function mouseoutHandle() {
this.style.background = "";
}
往后追加元素
appendChild()
在第一个元素前面添加元素
insertBefore(新的元素，第一个元素)：把新的元素添加到第一个元素前面
替换元素
replaceChild(新的元素，要替换的元素);
为元素绑定多个事件
addEventListener("事件的类型",事件处理函数，false)----谷歌，火狐支持，ie11支持，ie8不支持
事件类型：不带on
my$("btn").addEventListener("click",function(){
console.log("小明真帅！")
},false);
my$("btn").addEventListener("click",function(){
console.log("班长真好！")
},false);
解绑
<body>
<input type="button" value="显示内容" id="btn">
<input type="button" value="解绑事件" id="btn1">
<script src="common.js"></script>
<script>
//===========================================================================
// //绑定事件：addEventListener("不加on的事件类型",function(){},false)====谷歌，火狐，ie11支持，ie8不支持
// //解绑事件：removeEventListener("不加on的事件类型",function(){},false);
// 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);
// }
//==========================================================================
// //绑定事件：attachEvent("加on的事件类型"，事件处理函数);=====谷歌，火狐，ie11不支持，ie8支持
// //解绑事件：detachEvent("加on的事件类型"，事件处理函数);
// // function(){console.log("1111")}
// // function(){console.log("2222")}
// my$("btn").attachEvent("onclick",f1);
// my$("btn").attachEvent("onclick",f2);
//
// function f1(){
// console.log("小明真坏！");
// }
// function f2(){
// console.log("小白真白！");
// }
//
// //点击btn1，解绑btn的第一个事件
// my$("btn1").οnclick=function(){
// my$("btn").detachEvent("onclick",f1);
// }
//============================================
//绑定事件：on事件类型=function(){}
//解绑事件：on事件类型=null；
my$("btn").onclick = function () {
console.log("小明真好！");
}
my$("btn1").onclick = function () {
my$("btn").onclick = null;
}
/*
*
* 总结：用什么方式绑定事件，就用对应的方式解绑事件
*
* 1.使用addEventListener绑定事件
* 绑定事件；
* 对象.addEventListener("不加on的事件类型",命名函数的名字,false);
* 解绑事件：
* 对象.removeEventListener("不加on的事件类型",命名函数的名字,false);
*
* 2.使用attachEvent绑定事件
* 绑定事件
* 对象.attachEvent("加on的事件类型",命名函数的名字)
* 解绑事件：
* 对象.detachEvent("加on的事件类型",命名函数的名字)
*
* 3.使用on事件
* 绑定事件
* 对象.on事件类型=事件处理函数
* 解绑事件：
* 对象.on事件类型=null；
*
*
*
*
* */
</script>
为元素添加解绑的兼容代码
<input type="button" value="显示内容" id="btn">
<input type="button" value="解绑事件" id="btn1">
<script src="common.js"></script>
<script>
/**
* 为任意元素绑定任意事件的兼容代码
* @param element 元素
* @param type 事件类型
* @param fn 事件处理函数
*/
function addEventListener(element, type, fn) {
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) {
//removeEventListener detachEvent on事件=null
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>
事件冒泡
<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>
<!--#dv1>#dv2>#dv3-->
<div id="dv1">
<div id="dv2">
<div id="dv3"></div>
</div>
</div>
<script src="common.js"></script>
<script>
/*
* 事件冒泡：多个元素嵌套关系，这些元素都注册了相同的事件，那么，如果我们触发了最里面的元素的事件，外面的元素的事件也会自动触发，这种行为就叫事件冒泡
*
*
* */
//点击dv1，显示id
my$("dv1").onclick = function () {
console.log(my$("dv1").id);
};
//点击dv2，显示id
my$("dv2").onclick = function () {
console.log(my$("dv2").id);
};
//点击dv3，显示id
my$("dv3").onclick = function (e) {
//e:事件参数对象
console.log(e);
console.log(my$("dv3").id);
e.stopPropagation();//阻止事件冒泡 火狐特有的，谷歌和火狐支持，ie不支持
// console.log(window.event.cancelBubble);
// window.event.cancelBubble=true;//阻止事件冒泡，ie特有的，谷歌和ie支持，火狐也支持
}
//阻止事件冒泡：
</script>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
