第十二节 JS事件高级应用
事件绑定：
IE方式：（仅适用于IE9及以下，其他的比如FF、Chrome、IE11都不适用）
attachEvent（事件名称， 函数）：绑定事件处理函数
detachEvent（事件名称， 函数）：接触绑定
DOM方式：（FF、Chrome、IE11都适用）
addEventListener（事件名称， 函数， 捕获）
removeEventListener（事件名称， 函数， 捕获）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script>
function myAddEvent(obj, ev, fn) {
if (obj.attachEvent) {
obj.attachEvent('on'+ev, fn);
} else {
obj.addEventListener(ev, fn, false);
}
} window.onload = function () {
var oBtn = document.getElementById('btn1'); // oBtn.onclick = function () {
// alert('我会不会被替换？');
// };
// oBtn.onclick = function () {
// alert('你当然被替换了！');
// };
//上述两个点击事件，只会执行后面的一个，道理其实跟变量的赋值一样，第二次的赋值会把第一次的赋值覆盖掉，
//但是如果我们不想让他们相互覆盖，而是两次都执行怎么解决呢？这时候就需要用到事件绑定：如下 //attachEvent(事件名称, 函数) 但是该方法只适用于IE9及以下的版本，IE11、FF和Chrom都不适用
// oBtn.attachEvent(onclick, function () {
// alert('我会不会被替换？');
// });
// oBtn.attachEvent(onclick, function () {
// alert('你不会被替换了！');
// });
//FF和Chrome我们有如下方法：addEventListener(事件名称, 函数, 捕获)
// oBtn.addEventListener("click", function () { //注意是“click”，而非“onclick”
// alert('我会不会被替换？');
// }, false);
// oBtn.addEventListener("click", function () { //注意是“click”，而非“onclick”
// alert('你不会被替换了！');
// }, false); //解决兼容问题
// if (oBtn.attachEvent) {
// oBtn.attachEvent(onclick, function () {
// alert('我会不会被替换？');
// });
// oBtn.attachEvent(onclick, function () {
// alert('你不会被替换了！');
// });
// } else {
// oBtn.addEventListener("click", function () { //注意是“click”，而非“onclick”
// alert('我会不会被替换？');
// }, false);
// oBtn.addEventListener("click", function () { //注意是“click”，而非“onclick”
// alert('你不会被替换了！');
// }, false);
// }
//把上述代码封装起来
myAddEvent(oBtn, 'click', function () {
alert('我会不会被替换？');
});
myAddEvent(oBtn, 'click', function () {
alert('你不会被替换了！');
});
};
</script>
</head>
<body>
<button id="btn1">按钮</button>
</body>
</html>
何时使用事件绑定
绑定事件和this
绑定匿名函数，会无法删除
高级拖拽-1
复习拖拽原理：
距离不变
三件事件：down、move、up
限制范围：
对位置进行判断：
例1：不能拖出窗口的div（上一节的拖拽）
例2：不能拖出指定对象的div，加上磁性吸附
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
#div2{
width: 400px;
height: 300px;
background: #cccccc;
position: relative;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
var to = oEvent.clientY-disY; var ri = oDiv2.offsetWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var bo = oDiv2.offsetHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度 // if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
// le = 0;
// } else if (le > ri) {
// le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
// }
//
// if(to<0) {
// to = 0; //让窗口从上边出不去
// } else if (to > bo){
// to = bo; //让窗口从下边出不去
// } //磁性吸附，就是把上述语句改一下就好了
if (le<20){ //如果left<20时，直接让其等于0，即直接吸附在左边框上
le = 0;
} else if (le > ri-20) {
le = ri; //当div.left 大于 div2的右边框-20px时，即div2离右边框小于20像素的时候，直接吸附在右边框
} if(to<20) {
to = 0; //如果top<20时，直接让其等于0，即直接吸附在上边框
} else if (to > bo-20){
to = bo; //当div.top 大于 div2的底边框-20时，即div2离底边框小于20像素的时候，直接吸附在下边框
} oDiv.style.left = le+'px';
oDiv.style.top = to+'px'; }; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="div2"><div id="div1"></div></div>
</body>
</html>
高级拖拽-2：
图片拖拽：阻止默认事件
文字选中：
阻止默认事件
IE下拖动有问题：问题是当我拖动时，会相应“选中”鼠标所掠过的某些文本，甚至包括被拖动窗口中的文本，这时候我们需要用到事件捕获（事件捕获其实就是，把整个网页上空白的东西，全都集中在某一个控件中）来解决该问题，但是好多浏览器（除了IE）不支持“setCapture()”，如下在IE浏览器下正常运行：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕获</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1'); oBtn.onclick = function () {
alert("a");
};
oBtn.setCapture();
};
</script>
</head>
<body>
<button id="btn1">按钮</button>
</body>
</html>
再如，我们上节讲到拖拽，用document来替换oDiv对象，因为div控件太小，鼠标快速移动时，容易脱离div，此时如果我们使用“事件捕获”而不用document替换oDiv对象，可以达到同样的效果，同时网页中的字体也不会被选中，同样需要注意的是，下属代码只在IE浏览器下起作用，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; oDiv.onmousemove = function (ev) {
var oEvent = ev||event; oDiv.style.left = oEvent.clientX-disX+'px';
oDiv.style.top = oEvent.clientY-disY+'px';
}; oDiv.onmouseup = function () {
oDiv.onmousemove = null;
oDiv.onmouseup = null;
};
oDiv.setCapter();
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
但是上述语句又存在一个小问题，是我们想选中网页中字体的时候也选不中了，怎么解？其实我们只需加一行代码“oDiv.releaseCapture();”，加在“鼠标抬起事件中”，如下：
oDiv.onmouseup = function () {
oDiv.onmousemove = null;
oDiv.onmouseup = null;
oDiv.releaseCapture();
};
oDiv.setCapter();
再提醒一次，setCapture()只适用于IE浏览器，其他浏览器可能不支持，下面我们解决兼容问题，并把相同代码合并：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽</title>
<style>
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; //我们仍然用if...else...语句解决兼容问题
if (oDiv.setCapture){ //IE浏览器
oDiv.onmousemove =mouseMove; oDiv.onmouseup = mouseUp;
oDiv.setCapter();
} else { //Chrome、FF等浏览器
document.onmousemove = mouseMove; document.onmouseup = mouseUp;
}
//由于上述代码有很多相似之处，我们做一下代码合并：
function mouseMove(ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
var to = oEvent.clientY-disY; var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度 if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} if(to<0) {
to = 0; //让窗口从上边出不去
} else if (to > bo){
to = bo; //让窗口从下边出不去
} oDiv.style.left = le+'px';
oDiv.style.top = to+'px';
}; //再次封装
function mouseUp() {
document.onmousemove = null;
document.onmouseup = null; if (oDiv.releaseCapture) {
oDiv.releaseCapture();
}
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
}; </script>
</head>
<body>
我就是想放点文字做测试用，没有别的！我就是想放点文字做测试用，没有别的！<br/>
我就是想放点文字做测试用，没有别的！我就是想放点文字做测试用，没有别的！
<div id="div1">我就是想放点文字做测试用，没有别的！</div>
</body>
</html>
与DOM配合
带框的拖拽：其实就是“被拖拽控件”的轮廓（一个黑线边框）先被拖拽走，当鼠标左键抬起，被拖拽控件再瞬间移动到“框”内，并与之重合，“框”消失。
保留原有位置的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>拖拽-带框</title>
<style>
#div1{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
.box{
border: 1px dashed black; /*dashed表示虚线框*/
position: absolute;
}
</style>
<script>
window.onload = function () {
var oDiv = document.getElementById('div1'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
disY = oEvent.clientY - oDiv.offsetTop; //带框的拖动，首先当鼠标按下，创建一个div
var oBox = document.createElement('div'); oBox.className = 'box';
oBox.style.width = oDiv.offsetWidth-2+"px";
oBox.style.height = oDiv.offsetHeight-2+"px"; oBox.style.left = oDiv.offsetLeft+'px';
oBox.style.top = oDiv.offsetTop+'px'; document.body.appendChild(oBox); //把创建的“框”添加到<body>标签内 document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
var to = oEvent.clientY-disY; var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度 if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} if(to<0) {
to = 0; //让窗口从上边出不去
} else if (to > bo){
to = bo; //让窗口从下边出不去
} // oDiv.style.left = le+'px';
// oDiv.style.top = to+'px';
//现在我们把先移动的div，换成“框”先移动
oBox.style.left = le+'px';
oBox.style.top = to+'px';
}; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null; //让div瞬间移动到框内，并与之重合
oDiv.style.left = oBox.offsetLeft+'px';
oDiv.style.top = oBox.offsetTop+'px'; document.body.removeChild(oBox); //去掉所有创建的“框”
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
自定义滚动条
拖拽：
只有横向拖拽（左右方向的滚动条）：所以我们可以把与纵坐标相关的东西全部去掉即可；当然如果是上下方向的滚动条，我们只需把与横坐标相关的东西去掉即可
限制范围——范围的大小
计算比例——当前值/最大值
控制其他对象：
例1：控制物体的大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条-控制物体大小</title>
<style>
#parent{
width: 600px;
height: 20px;
background: #cccccc;
position: relative;
margin: 10px auto; /*上下 左右*/
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 0px;
height: 0px;
background: green;
}
</style>
<script>
window.onload = function () {
var oParent = document.getElementById('parent');
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
// var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
// disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
// var to = oEvent.clientY-disY; // var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var ri = oParent.offsetWidth-oDiv.offsetWidth;
// var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
// var bo = oParent.offsetHeight-oDiv.offsetHeight; if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} // if(to<0) {
// to = 0; //让窗口从上边出不去
// } else if (to > bo){
// to = bo; //让窗口从下边出不去
// }
oDiv.style.left = le+'px';
// oDiv.style.top = to+'px'; //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
// document.title = le/580;
var scale = le/ri; //ri表示父级的宽 减去 本身的宽 oDiv2.style.width = 400*scale+'px'; //用滚动条控制div2的宽高，也即控制div2的显示大小
oDiv2.style.height = 400*scale+'px'; }; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>
例2：控制物体的透明度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条-控制物体透明度</title>
<style>
#parent{
width: 600px;
height: 20px;
background: #cccccc;
position: relative;
margin: 10px auto; /*上下 左右*/
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 400px;
height: 400px;
background: green;
filter: alpha(opacity:0);
opacity: 0;
}
</style>
<script>
window.onload = function () {
var oParent = document.getElementById('parent');
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
// var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
// disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
// var to = oEvent.clientY-disY; // var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var ri = oParent.offsetWidth-oDiv.offsetWidth;
// var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
// var bo = oParent.offsetHeight-oDiv.offsetHeight; if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} // if(to<0) {
// to = 0; //让窗口从上边出不去
// } else if (to > bo){
// to = bo; //让窗口从下边出不去
// }
oDiv.style.left = le+'px';
// oDiv.style.top = to+'px'; //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
// document.title = le/580;
var scale = le/ri; //ri表示父级的宽 减去 本身的宽 // oDiv2.style.width = 400*scale+'px'; //用滚动条控制div2的宽高，也即控制div2的显示大小
// oDiv2.style.height = 400*scale+'px'; //通过获取滚动条的比例，来控制物体透明度
oDiv2.style.filter = 'alpha(opacity:'+scale*100+')';
oDiv2.style.opacity = scale;
}; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2"></div>
</body>
</html>
例3：控制文字滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义滚动条-控制文字滚动</title>
<style>
#parent{
width: 600px;
height: 20px;
background: #cccccc;
position: relative;
margin: 10px auto; /*上下 左右*/
}
#div1{
width: 20px;
height: 20px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 400px;
height: 300px;
border: 1px solid black;
overflow: hidden;
position: relative;
}
#div3{
position: absolute;
left: 0;
top: 0;
padding: 5px;
}
</style>
<script>
window.onload = function () {
var oParent = document.getElementById('parent');
var oDiv = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3'); var disX = 0; //记录横向距离，鼠标的横坐标减去div的横坐标
// var disY = 0; //记录纵向距离，鼠标的纵坐标减去div的纵坐标 oDiv.onmousedown = function (ev) {
var oEvent = ev||event; disX = oEvent.clientX - oDiv.offsetLeft;
// disY = oEvent.clientY - oDiv.offsetTop; document.onmousemove = function (ev) {
var oEvent = ev||event; var le = oEvent.clientX-disX;
// var to = oEvent.clientY-disY; // var ri = document.documentElement.clientWidth - oDiv.offsetWidth; //页面可视区的宽度 减去 窗口宽度
var ri = oParent.offsetWidth-oDiv.offsetWidth;
// var bo = document.documentElement.clientHeight - oDiv.offsetHeight; //页面可视区的高度 减去 窗口高度
// var bo = oParent.offsetHeight-oDiv.offsetHeight; if (le<0){ //如果left<0时，直接让其等于0，即让窗口从左边出不去
le = 0;
} else if (le > ri) {
le = ri; //页面可视区的宽度 减去 窗口宽度，即让窗口从右边出不去
} // if(to<0) {
// to = 0; //让窗口从上边出不去
// } else if (to > bo){
// to = bo; //让窗口从下边出不去
// }
oDiv.style.left = le+'px';
// oDiv.style.top = to+'px'; //让滚动条拥有一个比例：我们可以用比例做一些额外的事情（比如控制需要滑动的内容等）
// document.title = le/580;
var scale = le/ri; //ri表示父级的宽 减去 本身的宽 //通过获取滚动条的比例，来控制物体透明度
// oDiv2.style.width = 400*scale+'px'; //用滚动条控制div2的宽高，也即控制div2的显示大小
// oDiv2.style.height = 400*scale+'px'; //通过获取滚动条的比例，来控制div3的top值，以使字体上下滚动
oDiv3.style.top = -scale*(oDiv3.offsetHeight-oDiv2.offsetHeight)+'px';
}; document.onmouseup = function () {
document.onmousemove = null;
document.onmouseup = null;
}; return false; //屏蔽掉FF中的bug（此处bug也相当于一个默认事件）
};
};
</script>
</head>
<body>
<div id="parent">
<div id="div1"></div>
</div>
<div id="div2">
<div id="div3">
【优美语句】 人生，有起落。学会挥袖从容，暖笑无殇。人生，既要淡，又要有味。不甘心就不要放弃，看不过去就起来改变。
要么就证明自己的能力，要么就闭嘴接受现实。所有好走的路都是下坡，失败是可以接受的，但是没有试图奋斗过的失败是没有借
口的零分。<br/><br/>
【优美语句】 人说，秋，是薄凉，是沉寂。我说，秋，是明净，是含蓄，是敛藏在岁月风骨里的美丽，所有的风过雨落都在自己
清宁的心里。秋，像个素净温婉的女子，着一袭素色而明丽的衣裳，让秋云飘逸在月前，听秋雨滴落在窗边，惊扰多少寒凉而善感
的梦，枕得秋情不忍眠。<br/><br/>
【优美语句】 走在人生的路上，在我心里，装饰一条蜿蜒的路，因为我要走上千百遍;在我心里，浇灌着最美的花一朵，因为我要
种下一路芬芳;在我心里，飘着一缕醉人的清风，我要撒下生命的意义;在我心里，剪一习流淌的时光，只为我一生优雅的老去。
<br/><br/>
【优美语句】 三月的清晨夜的容颜将要散去，于似醒非睡中，被一阵阵清脆的声音叫醒了，睁开睡眼惺忪的眸，目光慢慢移到墙角
空调孔的地方。不知何时，卧室这个不起眼的地方就被这几只不请自来的朋友安了家。嘴角扬起浅浅的笑容，然后继续闭上眼睛，聆
听鸟儿的声音。<br/><br/>
【优美语句】 岁月沉积着忧伤，一笺墨香，卷写离殇，一纸情长，却再也写不出你许诺的地老天荒，如果可以，请许我一段时光，
我依然守候着你说过的那些地久天长，我愿用一生的凝望，换你一个回眸，我愿用一生的守候，换你一刻温柔。<br/><br/>
【优美语句】 常常错过，慢慢遗忘，不是每一次路遇的风景都是此生唯一。缘来缘去缘如水，生命如过客匆匆，皆因心境的有所不
同。真心珍惜这短暂的一生吧!别为缘分的匆忙而感叹，莫为生活中的忙碌而纠结，更不必为了羡慕别人的所谓幸福生活而自寻烦恼。
<br/><br/>
【优美语句】 梅的美是独一无二的美，它的美在于它的气质，它的那种寂寞中的自足，那种凌寒独自开的孤傲。梅属乔木，枝干有
枯焦感，虬曲苍劲，看似老气横秋，清淡素雅的梅花开在这样的枝上，却愈显冰玉之姿，有一种让人屏息的美。<br/><br/>
【优美语句】 从一方天堂，到一处烟火，从一朵花开，到一片叶落，历经大半个年头，只为那触目惊心的一眸，然而，梅犹自不肯
怜悯，依然执执念念，我行我素。许是冬还不够寒，风还不够烈，许是在等待那一场风花雪月的交融，雪，犹自高高的挂在半空，游
荡，无视这一切。<br/><br/>
【优美语句】 一个人对你的好，并不是立刻就能看到的。因为汹涌而至的爱，来得快去的也快。而真正对你好的人，往往是细水长
流。你可能会怪他没有付出真心，但在一天天过日子里，却能感觉到他对你无所不在的关心。好的感情，不是一下子就把你感动晕，
而是细水长流的把你宠坏。<br/><br/>
【优美语句】 春天，紫气东来，万物复苏，惊蛰的大地，催生了树叶懵懂稚嫩的生命;温婉的春雨，滋养着树叶柔弱纤细的叶脉;和
煦的东风，染绿了树叶浅浅的容颜;明媚的阳光，带给树叶充满生机的期待。春天，万木青翠，郁郁葱葱，那是千万片树叶的装扮。
<br/><br/>
【优美语句】 人间最美是真情，自然最美是花开，时光最美是苍凉;人生如行旅，值得与否，在于各自的修行。爱情，淡然相守，
简简单单，不需要太多的浮华雕饰;轻轻松松，不需要太多的负担牵绊;就这样，不言不语，彼此知轻重，你浓我浓，落落清欢，携
爱情奔赴一场终老。<br/><br/>
【优美语句】 那一夜，坐着缓慢行驶的轿车，走过，曾经最美好的画面，细数曾经你给我的感动，一个挺拔的身影，一张帅气的娃
娃脸，牵着我的手，漫步在星空下，灯光洒落，身后印下相依快乐的你我……我已将它埋入心底，谢谢你，希望你要的幸福她可以给你。
<br/><br/>
【优美语句】 不勾勒，细雨串起的珠帘，点缀过绝世的芬芳。不晕染，兰桡划过的涟漪，千里柔波荡漾。蝶儿翻飞的旧梦，就留给
定格了的那些时光。纵，岁月褪去了一袭嫣然，却洗不去素韵清扬。不言超然出尘，不是孤芳自赏。只留一把风骨，与宁静相守，与
彼岸相望。<br/><br/>
【优美语句】 倚风，眷眸，流年安暖相随。花醉心，树摇曳，春语清心。一茶一酒一清词，听风观雨，煮一壶素淡安闲，与时光轻
柔对语。窗前，心动于怀，心念如花儿如徐徐春风，荡漾成了一片流云，嫣然了心。看花落花开又一春，哪种花都是于千年前入了古
人的词入了诗，被后人来吟诵，寄情于心。
</div>
</div>
</body>
</html>
第十二节 JS事件高级应用的更多相关文章
- JS事件高级
1. 注册事件(绑定事件) 1.1注册事件概述 1.2 addEventListener 事件监听方式 1.3 attachEvent 事件监听方式 1.4 注册事件兼容性解决方案 2. 删除事件(解 ...
- javascript高级程序设计---js事件思维导图
绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象
- JS的Touch事件们,触屏时的js事件
丫的,终于找到了JS在平板电脑上的事件!!! iphone.ipod Touch.ipad触屏时的js事件 1.Touch事件简介 pc上的web页面鼠标会产生onmousedown.on ...
- js事件流机制冒泡和捕获
JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 事件流 从页面中接收事件的顺序称为事件流. IE --> 事件冒泡流 Netsc ...
- dynamic-css 动态 CSS 库，使得你可以借助 MVVM 模式动态生成和更新 css，从 js 事件和 css 选择器的苦海中脱离出来
dynamic-css 使得你可以借助 MVVM 模式动态生成和更新 css,从而将本插件到来之前,打散.嵌套在 js 中的修改样式的代码剥离出来.比如你要做元素跟随鼠标移动,或者根据滚动条位置的变化 ...
- 什么是JS事件冒泡？
什么是JS事件冒泡?: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理 程序或者事件返回true,那么 ...
- js事件技巧方法整合
window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveT ...
- js事件浅析
js中关于DOM的操作很多,因此js事件机制也就尤为重要. 事件绑定形式: 一. 内联形式 耦合度高,不利于维护 <button onclick="alert('你点击了这个按钮'); ...
- js 事件大全
Js事件大全一般事件 事件 浏览器支持 描述onClick IE3|N2|O3 鼠标点击事件,多用在某个对象控制的范围内的鼠标点击onDblClick IE4|N4|O 鼠标双击事件onMouseDo ...
随机推荐
- flex 左边固定宽度，右边自适应
<div id="flex"> <div id="left">我在边,定宽</div> <div id="r ...
- 需要优化代码的leetcode
1 关于验证字符串的问题: 2
- Linux Shell 用法
目录 Shell test 命令 数值测试 字符串测试 文件测试 函数返回值 Shell test 命令 Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测 ...
- python基础的学习
今日内容 1.常见操作系 1.win win7 win10 window serrer 2.linux centons 图像界面差 upuntu 个人开发(图形化较好) redhat 企业 3.mac ...
- go 学习第一个hello world 遇到的问题
mac:Go安装和配置+GoLand安装和使用之完整教程 https://blog.csdn.net/zxy_666/article/details/80182688 前言作为一个go语言程序员,觉得 ...
- 完美脱离Windows!! Linux发行版第一系统 Manjaro 开箱教程 :)
没兴趣? 来几张图敌敌畏(kai kai wei) !! 0x00 预览(zhuangbi) 0x01 引言(feihua) 当我们想用ssh工具时,不像telnet那样是系统自带的软件,需要额外安装 ...
- Copy & XCopy
1):copy不能在有子目录存在的文件中拷贝文件的同时重命名此文件名(注:这里C:为根目录,bat为子目录),而xcopy能,不过会出现提示,当然你可以加参数而不使它提示. C:\>copy c ...
- Scala集合Map
在scala中Map分为可变长(mutable)和不可变长(immutable) /** * 不可变长map 长度一旦初始化,就不能在进行更改 */ // 通过箭头的方式创建map val map = ...
- ESP8266开发笔记
自1999年MIT的Kevin Ash-ton教授首次提出物联网(IoT)的概念至今已经有20年了.放眼现在国内外的物联网市场,真可谓是百家争鸣,方兴未艾,无数家软硬件公司在这里舞浪弄潮,逐鹿其中,上 ...
- python-迭代器与可迭代对象
迭代器与可迭代对象 简述 迭代是数据处理的基石.扫描内存中放不下的数据集时,我们要找到一种惰性获取数据项的方式,即按需一次获取一个数据项.这就是迭代器模式 迭代器 迭代器是这样一个对象,实现了无参数_ ...