5. 事件绑定的三种形式
(1) 通过HTML元素进行绑定
<button onclick="fun()">点击</button>var fun = function(){}(2) 通过JS获取HTML元素进行绑定
var oBtn = document.querySelector('button');oBtn.onclick = function(){ } (3) 通过事件监听
语法：
元素.addEventListener(‘去掉on的事件’,回调函数,[是否捕捉]);
- 可选参数是否捕捉，默认是false 冒泡
- addEventListener() 支流高版本浏览器
当冒泡与捕捉同时存在时:先捕捉后冒泡
document.addEventListener('click',function(){ alert('document冒泡'); }) window.addEventListener('click', function(){ alert('window冒泡'); }) document.addEventListener('click',function(){ alert('document捕捉'); },true) window.addEventListener('click', function(){ alert('window捕捉'); },true)//后果：window捕捉-》document捕捉=》document冒泡=》window冒泡
事件监听的益处：
（1）能够为一个元素，屡次绑定雷同的事件(相似于代码的合并)
document.addEventListener("click",function(){ alert(1); }); document.addEventListener("click",function(){ alert(2); });//后果: 1->2(2) 程序员能够应用事件监听的形式 确定触发的过程是冒泡还是捕捉
document.addEventListener("click",function(){ alert("document"); },true); window.addEventListener("click",function(){ alert("window"); },true);//后果: window->document事件监听兼容:
IE的事件监听：元素.attachEvent("带on的事件",回调函数）
- 没有第三个参数
- 参数不省略on
- 默认冒泡
设计兼容函数(思考函数的性能，参数，返回值)
<script> function addEvent(obj,type,callBack){ if(obj.attachEvent){ obj.attachEvent("on"+type,callBack); }else{ obj.addEventListener(type,callBack); } } addEvent(document,"click",function(){ alert("1"); });</script>6. 事件委托
委托：让他人去做
事件委托：某个事件让其余元素来实现
例如：页面上有1000个li，为每一个li增加单击事件。
解决办法：应用委托只须要在li父级上加一次事件就能够。
<script> // 通过事件委托实现高亮 var oUl = document.querySelector('ul'); oUl.onclick = function(evt){ //委托中实在的元素不是this对象 // this.style.backgroundColor = 'pink';//谬误 // 如何取得真正的操作元素 var e = evt||event; var target = e.srcElement||e.target; // console.log(target.tagName);//'LI' if(target.tagName=='LI'){ target.style.backgroundColor='pink'; } }</script>//委托的实现办法：父级元素.事件 = function(){ //获取事件源 以后的操作元素 var target = e.srcElement||e.target; console.log(target.tagName);//'LI'}事件委托的益处
1) 通过父元素实现子元素的事件响应，从而大大提高效率
2) 能够为新增加的元素，提前绑定事件
<script> var oUl = document.querySelector('ul'); oUl.onmousemove = function(evt){ var e = evt|| event; var target = e.srcElement||e.target; if(target.tagName == 'LI'){ target.style.backgroundColor='pink'; } } oUl.onmouseout = function(evt){ var e = evt|| event; var target = e.srcElement||e.target; if(target.tagName == 'LI'){ target.style.backgroundColor=''; } } var oInput = document.querySelector('input'); var oBtn = document.querySelector('button'); oBtn.onclick = function(){ // 增加li元素 var oLi = document.createElement('li'); oLi.innerHTML = oInput.value; oUl.appendChild(oLi); oInput.value=''; }</script>7. 拖拽
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 400px; top: 400px; cursor: move; } </style> </head> <body> <div id="box"> </div> </body></html><script type="text/javascript"> // 某个鼠标按键被按下 onmousedown //某个鼠标按键被松开 onmouseup var oBox = document.querySelector('#box'); oBox.onmousedown = function(evt){ var e= evt||event; var offsetX = e.offsetX; var offsetY = e.offsetY; console.log('offset:' + offsetX,offsetY); document.onmousemove = function(evt){ var e = evt|| event; oBox.style.left= e.pageX - offsetX + 'px'; oBox.style.top = e.pageY - offsetY + 'px'; console.log('page:' + e.pageX,e.pageY); } } document.onmouseup = function(){ document.onmousemove = null; } </script>拖拽的边界问题？？：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 100px; height: 100px; background-color: pink; position: absolute; left: 400px; top: 400px; cursor: move; } </style> </head> <body> <div id="box"> </div> </body></html><script type="text/javascript"> // 某个鼠标按键被按下 onmousedown //某个鼠标按键被松开 onmouseup var oBox = document.querySelector('#box'); oBox.onmousedown = function(evt){ var e= evt||event; var offsetX = e.offsetX; var offsetY = e.offsetY; document.onmousemove = function(evt){ var e = evt|| event; // 判断规范 var left = e.pageX - offsetX; var top = e.pageY - offsetY; console.log(left); if(left<0){ left=0; } // window.innerWidth浏览器的可视宽度 var leftMax = window.innerWidth-oBox.offsetWidth; console.log('leftMax' + leftMax); if(left>leftMax){ left = leftMax; } if(top<0){ top=0; } // window.innerHeight浏览器的可视高度 var topMax = window.innerHeight-oBox.offsetHeight; if(top>topMax){ top = topMax; } oBox.style.left= left + 'px'; oBox.style.top = top + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; } </script>8. JSON对象
- json: 轻量级存储工具，是一种跨平台的数据交互格局
- 作用： 存储数据
json对象定义:
var obj = {"key1":value1,..."keyN":valueN};
阐明:严格的json对象 键必须用双引号引起来； json的值能够是任意类型的
json 操作 赋值和取值
- 取值：json.键
- 遍历取值 for in
JSON对象->JSON字符串 :必须是严格模式的字符串和对象
- JSON.stringify(json对象)
var json = {"name":"老王","age":"18"};var str = JSON.stringify(json);console.log(str,typeof str);//stringJSON字符串-> JSON对象
- JSON.parse(json字符串)
var str1 = '{"name":"老王","age":"18"}';var json1 = JSON.parse(str1);console.log(json1,typeof json1);