DOM编程+事件

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>

七、页面事件

• load加载
• resize窗口变化
• scroll滚动

八、时间代理

• 把事件注册到其共有的元素上，通过事件的冒泡机制，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>