Web前端学习：章四 -- JavaScript初级（六-七）
157：浏览器技术的使用
浏览器大部分内容都是免费的，且可见的 ，可以看到代码及图片等
七：事件对象深入
158：添加事件监听
1、addEventListener - 事件绑定
=代表赋值，用onclick普通的事件写法，后面的点击事件会覆盖前面的事件
用addEventListener写法，可以有多个事件同时监听
第一个监听完了，点确定，执行第二个监听
2、写法：
addEventListener。能做到事件叠加，不会覆盖之前的事件
addEventListener('名称' , function(){} ， true/false)
名称：即事件类型名称，比如点击事件-click ， 不用加on
function：函数
turn：代表是在事件捕获情况下执行
false：代表是在事件冒泡情况下执行
（一般情况下，不写第三个参数，浏览器上有兼容问题 ； 默认为false）
3、不冲突
与普通的事件写法不冲突，可以看做，普通事件外多加了一个监听效果，触发时执行函数
点击确定后，执行监听事件，弹出2
159：移除事件监听
1、removeEventListener
removeEventListener：精准移除事件监听
addEventListener('名称' , 函数名称)；
‘名称’：代表事件类型名称，比如点击事件-click
函数名称：指的是function函数的命名，可以精准选择要移除的事件
160：键盘事件
1、onkeydown - 键盘按下
onkeydown是window下的，但有部分兼容问题，挂在document下能避免一些兼容问题
查看对象
通过keycode只能输入数字
return false：取消默认事件
2、onkeyup - 键盘抬起
161：事件委托/代理/委派
1、srcElement || target - 事件委托
一般情况下，在元素生成之前给元素加事件，一般是加不上的，因为找不到元素，undefined。
事件委托概念：
1、给予父级元素事件
2、父级元素可以找到子级事件源
3、通过事件源className、id、nodeName等判断
4、找到需要的事件源，给予js脚本进行控制
最大的好处：
可以控制未来即将生成的元素，即动态生成的元素
事件委托逻辑
1、生成一个最大级的，或者说父级的元素，把所有事件 给最大级的元素
2、最大级元素点击的时候，委托找一下子级有没有该元素，有执行，没有不执行
如：
最大的元素：HTML：document.documentElement
点击时进行判断，如果id = div，即执行，不是则不执行
（1）target - 当前触发事件的对象的名称
event.target，这里代表的是事件源
在div外的白色区域点击，显示当前触发事件的对象是html
点击粉色方形，显示触发事件的对象是div
（2）属性：NodeName - 元素标签的名称
点谁谁变红
（3）srcElement
target 在IE浏览器中不兼容，IE认为是undefined，
srcElement在低版本火狐中不兼容，undefined，在IE、谷歌、高版本火狐浏览器中都兼容
162：元素offsetLeft/Top距离详解
1、offsetLeft/Top
返回当前元素记录父级元素的偏移的像素值
（1）属性transform: translate() - 平移
平移不会计算在offsetLeft/Top中，因为它只是改变显示的位置，实际上它的元素div框架还是在原来的位置
163：元素offsetWidth/Height详解
1、offsetWidth/Height
返回当前元素的宽度和高度，包含边框和填充，不含边距
164：元素拖拽及原理详解
1、原理
控制元素的position: absolute;样式，控制该样式的left、top属性让div动起来。
（1）元素跟随
元素自动跟着鼠标走
（2）元素拖拽
点击元素进行拖动
165：事件委托版拖拽制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{padding: 0; margin: 0;}
div{
width: 100px; height: 100px; background: red;
position: absolute; left: 0px; top: 0px;
}
</style>
</head>
<body>
<div class="div1"></div>
<script type="text/javascript">
document.documentElement.onmousedown = function(e){
var ev = e || event;
var iTarget = ev.target || ev.srcElement;
if(iTarget.className == 'div1'){
iTarget.style.background = 'pink';
var l = ev.clientX - iTarget.offsetLeft;
var t = ev.clientY - iTarget.offsetTop;
document.onmousemove = function(e){
var ev = e || event;
var x = ev.clientX - l;
var y = ev.clientY - t;
if(x < 0) x = 0;
if(y < 0) y = 0;
if(x > innerWidth - iTarget.offsetWidth) x = innerWidth - iTarget.offsetWidth;
if(y > innerHeight - iTarget.offsetHeight) y = innerHeight - iTarget.offsetHeight;
iTarget.style.left = x + 'px';
iTarget.style.top = y + 'px';
};
document.onmouseup = function(){
iTarget.style.background = 'red';
this.onmousemove = this.onmouseup = null;
};
};
return false;
};
</script>
</body>
</html>