共计 4453 个字符，预计需要花费 12 分钟才能阅读完成。
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);//string -
JSON 字符串 -> JSON 对象
- JSON.parse(json 字符串)
var str1 = '{"name":" 老王 ","age":"18"}'; var json1 = JSON.parse(str1); console.log(json1,typeof json1);
正文完
发表至： javascript
2021-01-12
