- 技术
- 绑定事件(弹框)
弹框
<script>
var btn = document.querySelector("button");
btn.onclick = function() {
var zhezhao = document.createElement("div");
zhezhao.className = "zhezhao";
zhezhao.innerHTML = '<div class="alert"><div class="header"><span class="title">温馨提示</span><span class="close">x</span></div><div class="main">是否在页面添加1个蓝色的div？</div><div class="btnList"><div class="btn" id="btnYes">确定</div><div class="btn" id="btnNo">取消</div></div></div>';
var body = document.querySelector("body");
body.appendChild(zhezhao);
var closeAlert = document.querySelector(".close");
closeAlert.onclick = function() {
body.removeChild(zhezhao);
}
var btnYes = document.getElementById("btnYes");
btnYes.onclick = function () {
body.removeChild(zhezhao);
var divBlue = document.createElement("div");
divBlue.className = "divBlue";
body.appendChild(divBlue);
}
var btnNo = document.getElementById("btnNo");
btnNo.onclick = function() {
body.removeChild(zhezhao);
}
}
</script>
绑定事件对象两种方法: 1.获取要触发事件的对象, 2 直接在html里面绑定事件和方法
浏览器在事件函数调用的时候,都会默认传入一个事件对象,该对象包含了此次事件的详细信息
<script>
var btn = document.querySelector("button")
console.log([btn])
btn.onclick = function(event){
console.log(event)
var d1 = document.querySelector("#d1")
if(d1.style.backgroundColor=="pink"){
d1.style.backgroundColor = "aqua";
}else{
d1.style.backgroundColor = "pink";
}
}
</script>
事件
属性当以下情况发生时，出现此事件
onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面
Processed:
0.009, SQL:
9
