DOM编程
一、元素的宽与高
- clicenWidth:内容+padding(工具条宽)
- offsetWidth:内容+padding+边框
- scrollWidth:没有滚动条同clientWidth内容+padding-工具条+滚动距离
- clientHeight;offsetHeight;scrollHeight
console.log("content+padding",myp.clientHeight);
console.log("content+padding+border",myp.offsetHeight);
console.log("content+padding+滚动距离",myp.scrollHeight);
console.log("clientWidth:内容+padding-工具条",myp.clientWidth);
console.log("offsetWidth:内容+padding+边框",myp.offsetWidth);
console.log("scrollWidth:nr+padding-工具条+滚动距离",myp.scrollWidth);
二、元素与父元素的距离
- offsetLeft 与相对父元素的左偏移值
- offsetTop 与相对父元素的垂直偏移值
- offsetParent 相对父元素元素的父辈元素有position非static值
<div class="content">
<div class="parent">
<div class="son">son</div>
</div>
</div>
<script type="text/javascript">
var p = document.querySelector(".parent");
var s = p.querySelector(".son");
console.log("offsetTop",s.offsetTop);
console.log("offsetLeft",s.offsetLeft);
var Bounding = s.getBoundingClientRect();
console.log(Bounding);
</script>
三、获取元素的css
- 行内样式:elem.style.样式名获取/设置行内样式
- document.defaultView.getComputedStyle(elem,null).样式名获取计算好的样式值
<p class="myp">我是一个段落</p>
<script type="text/javascript">
var myp = document.querySelector(".myp");
var h = document.defaultView.getComputedStyle(myp,null).height;
alert(h);
</script>
四、元素的滚动距离
- elem.scrollTop
- elem.scrollLeft
- document.documentElement.scrollTop
- document.body.scrollTop
事件
一、事件绑定与解绑
绑定:
- btn.onclick = function(){}
- btn.addEventListener(type,funName)
解绑:
- btn.onclick = null
- btn.removeEventListener(type,funName)
- 匿名函数不能解绑
<h1>事件的绑定与解绑</h1>
<button class="btn1">按钮1</button>
<button class="btn2">按钮2</button>
<button class="btn3">解绑say</button>
<script type="text/javascript">
//给btn2注册两个单击事件
function say(){
alert(this.innerText);
}
function doit(){
alert("鹤忧");
}
var btn2 = document.querySelector(".btn2");
btn2.addEventListener("click",say);
btn2.addEventListener("click",doit);
//单击解绑
var btn3 = document.querySelector(".btn3");
btn3.onclick = function(){
btn2.removeEventListener("click",say);
}
//给按钮1添加事件
var btn1 = document.querySelector(".btn1")
btn1.onclick = function(){
alert("我被点击了,最后一次")
btn1.onclick = null;
}
</script>
二、事件对象
- 事件源对象:event.target
- 相对于事件源偏移文字:event.offsetX ;event.offsetY
- 相对于页面偏移位置:event.pageX ; event.pageY
<h1>事件对象</h1>
<div id="block">
block
</div>
<button type="button" class="btn">按钮</button>
<script type="text/javascript">
var block = document.getElementById("block");
var btn = document.querySelector(".btn");
//函数会默认传入一个event的事件对象
function test(event){
console.log(event)
console.log("事件源对象:",event.target)
console.log("事件的位置:",event.offsetX,event.offsetY)
}
block.addEventListener("click",test);
btn.addEventListener("click",test);
</script>
三、事件传递
- 冒泡:最具体元素最先捕捉到事件,传递给最不具体的元素(document)
- 捕获:最不具体的元素先捕获到事件,传递给最具体的元素
- 默认都是冒泡,使用捕获:
elem.addEventlistener(事件类型,响应函数,是否为捕获)
elem.addEventListener("click",doit,true) - 阻止事件传递:event.stopPropagation()
- 阻止默认事件event.preventDefault()
<div class="container">
<div class="parent">
<div class="son">
son
<a href="http://www.baidu.com">百度</a>
</div>
</div>
</div>
<script type="text/javascript">
var son = document.querySelector(".son");
var parent = document.querySelector(".parent");
var container = document.querySelector(".container");
var a = document.querySelector("a");
a.addEventListener("click",function(e){
e.stopPropagation();//阻止事件冒泡
e.preventDefault();//阻止默认事件
alert("中奖了");
})
son.addEventListener("click",function(){
alert("son被点击了")
},true)
parent.addEventListener("click",function(){
alert("parent被点击了")
},true)
container.addEventListener("click",function(){
alert("container被点击了")
},true)
//addEventListener(事件类型,相应的函数,是否使用捕获)
//捕获:事件最不具体的元素捕捉事件,传递给具体的元素
</script>
四、键盘事件
- keypress 按下弹起
- keyup 键盘弹起
- keydown 键盘按下
- event.keyCode键盘对应数字编码
- event.key键盘的名称
五、鼠标事件
- mouseover 鼠标移入
- mouseout 鼠标移出
- mousedown 鼠标按下
- mouseup 鼠标弹起
- mousemove 鼠标移动
- click 单击
- dblclick双击
六、表单事件
- change 值发生变化
- input 正在输入
- focus 获取焦点
- blur 失去焦点
<h1>input事件</h1>
<p v-text="myp"></p>
<input type="text" id="myp" plaecholder="请输入" />
<h1 v-text="myp"></h1>
<script type="text/javascript">
var myp = document.getElementById("myp");
//给input添加input事件(正在输入)
myp.addEventListener("input",function(){
console.log(myp.value);
//获取到v-text等于myp元素
var list = document.querySelectorAll("body *[v-text=myp]")
//遍历list设置值
list.forEach(item=>{
//把元素的文本和myp的值绑定在一起
item.innerText = myp.value;
})
})
</script>
七、页面事件
八、时间代理
- 把事件注册到其共有的元素上,通过事件的冒泡机制,event.target实现目标
- 简洁,方便,不要滥用
<div class="container">
<p>我是第一条默认留言</p>
<p>我是第二条留言</p>
</div>
<input type="text" placeholder="请留言" id="inp">
<script type="text/javascript">
var inp = document.getElementById("inp");
var container = document.querySelector(".container");
container.addEventListener("click",function(event){
alert(event.target.innerText);
})
//inp添加键盘事件keyup,如果是回车键
inp.addEventListener("keyup",function(event){
console.log(event,event.keyCode,event.key);
//如果是enter键
if(event.keyCode==13){
//创建个p
var p = document.createElement("p");
//设置文本
p.innerText = inp.value;
//插入到container
container.appendChild(p);
//请求inpt
inp.value = '';
}
})
</script>