1如何创建一个元素
2如何给元素设置属性
newDivreplaceChild(newElement, oldElement);```
parentNoderemoveChild(childNode);
<input type="button" value="点击" id="btn">
<script type="text/javascript">
var btn = documentgetElementById("btn");
btnonclick = function(){
alert("你点击了按钮");
}
</script>
<input type="button" value="点击" id="btn">
<script type="text/javascript">
var btn = documentgetElementById("btn");
btnonclick = function(){
alert(thisid); //输出“btn”
}
</script>
<html lang="zh" id="html" class="demo">
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
</head>
<body id="body" class="demo">
<div id="parent" class="demo">
<button id="child" class="demo">点击一下</button>
</div>
</body>
</html>
//取消事件冒泡
eventstopPropagation(); //DOM方法
eventcancleBubble = true; //IE的方法
btnonclick = null;
<input type="button" value="点击" id="btn">
<script type="text/javascript">
var btn = documentgetElementById("btn");
btnonclick = function(){
consoleinfo("event-one");
}
btnonclick = function(){
consoleinfo("event-two");
}
btnonclick = function(){
consoleinfo("event-three");
}
</script>
<input type="button" value="点击" id="btn">
<script type="text/javascript">
var btn = documentgetElementById("btn");
btnaddEventListener("click",function(){
alert(thisid);
},false);
</script>
<input type="button" value="点击" id="btn">
<script type="text/javascript">
var btn = documentgetElementById("btn");
btnaddEventListener("click",function(){
consoleinfo("event-one");
},false);
btnaddEventListener("click",function(){
consoleinfo("event-two");
},false);
btnaddEventListener("click",function(){
consoleinfo("event-three");
},false);
</script>
<html lang="zh" id="html" class="demo">
<head>
<meta charset="UTF-8">
<title>事件捕获</title>
</head>
<body id="body" class="demo">
<div id="parent" class="demo">
<button id="child" class="demo">点击一下</button>
</div>
<script type="text/javascript">
windowonload = function(){
var elements = documentquerySelectorAll("demo");
for(var i = 0 ; i < elementslength; i++){
elements[i]addEventListener("click",function(event){
var element = elements[i];
//获取事件
event = eventevent:windowevent;
//获取事件发生的目标
target = eventtargeteventtarget:eventsrcElement;
consoleinfo("事件源："+targetid+" , "+targettagName+", 事件对象："+thisid);
},true);
}
}
</script>
</body>
</html>
var btn = documentgetElementById("btn");
btnaddEventListener("click",function(){
consoleinfo(thisid);
},false);
btnremoveEventListener("click",function(){/ 函数在此处没有用 /},false);
var fn = function(){
consoleinfo(thisid);
}
var btn = documentgetElementById("btn");
btnaddEventListener("click",fn,false);
btnremoveEventListener("click",fn,false);
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JavaScript事件</title>
</head>
<body>
<button id="btn">点击一下</button>
</body>
</html>
<!DOCTYPE html>
<html class="demo">
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body class="demo">
<div id="container" class="demo">
<a href=">
以button的Click事件为例：
<button id="btn">click me</button>
function clickBtn() {
alert('click!');
}
1、直接在元素上绑定回调函数 <button id="btn" onclick="clickBtn()">click me</button>
2、JS获取DOM元素对象后，对onclick属性赋值，绑定事件： documentgetElementById('btn')onclick=clickBtn;
3、JS获取DOM对象后，调用对象的addEventListener函数绑定事件：documentgetElementById('btn')addEventListener('click',clickBtn);
现阶段主流浏览器兼容的绑定事件方式就这3种
以上就是关于Dom、事件全部的内容，包括:Dom、事件、vue获取当前点击元素的dom对象、Javascript事件绑定的几种方式等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）