H5W3
当前位置:H5W3 > JavaScript > 正文

【JS】day12 事件监听/事件委托/拖拽/JSON对象

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. 拖拽(考点)

拖拽思路: onmousedown onmousemove onmouseup

(1).首先为需要拖拽的对象添加一个onmousedown事件

记录:鼠标点击某个对象时的内部偏移量

e.offsetX e.offsetY

(2).鼠标在文档上移动

要想让操作的元素动起来,该元素必须有定位

移动的过程,实际上改变,元素的left和top

(3).停止移动,需要触发onmouseup鼠标抬起时,取消移动

document.onmousemove = null;

<!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;
// 判断标准
//e.pageX是鼠标的位置,所以鼠标位置再向左移动offsetX的距离,
//来判断oBox左边是否到达边界
var left = e.pageX - offsetX;
var top = e.pageY - offsetY;
//console.log(left);
//(1) 左边界
if(left<0){
left=0;
}
//(3) 最大的宽
// window.innerWidth浏览器的可视宽度
var leftMax = window.innerWidth-oBox.offsetWidth;
console.log('leftMax' + leftMax);
if(left>leftMax){
left = leftMax;
}
//(2)上边界
if(top<0){
top=0;
}
//(4)最大的高
// 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);

本文地址:H5W3 » 【JS】day12 事件监听/事件委托/拖拽/JSON对象

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址