一、鼠標事件
1、單擊事件
box.onclick
2、雙擊事件(雙擊時也會觸發單擊)
box.ondblonclick
3、鼠標右鍵
box.oncontextmenu=function(){
console.log('右鍵事件');
//取消鼠標的默認事件
return false;
}
4、按下|移動|抬起|鼠標懸浮|鼠標移開|鼠標右鍵
onmousedown 鼠標按下
onmousemove 鼠標移動
onmouseup 鼠標抬起
onmouseover 鼠標懸浮
onmouserout 鼠標移開(從父集移至子集，觸發out事件，緊接着觸發子集的over事件，並可以冒泡給父集(觸發父集的over))
oncontextmenu 鼠標右鍵
onmouseenter 鼠標懸浮()
onmouseleave 鼠標移開(leave默認子集是父集的一部分，所以從子集移到父集不會觸發,enter事件也不會觸發)
enter:父集enter 子集enter (不支持冒泡)
over:子集over 父集over(想當於子集冒泡給父集) (支持冒泡)
總結： 將父集和自己分開考慮盒子的懸浮離開事件，用over | out組合；
將子集納入父集的考慮當中，只考慮父集的相應懸浮離開事件，采用 enter | leave組合；
單獨考慮一個盒子的懸浮離開事件，都可以使用
二、js的盒模型
1、應用
<style>
.box{
width:100px;
height:100px;
background:red;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box')
var width=getComputedStyle(box,null).width;
console.log(width)
//轉化成數字類型
console.log(+(width.slice(0,3)))
</script>
==>100px
2、數字字符轉換
var a="1213124"
//轉化成整型
a=+a//如果待單位會轉化成NaN
a=parseInt(a)
//字符的切割
a.substr(0,3)==>123 //從0往后取3個單位
a.slice(0,2)==>12 //從0取到2，前取后不取
3、獲取padding
<style>
.box{
width:100px;
height:100px;
background:red;
padding:20px;
position:absolute;
}
body{
position:relative;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box')
var width=getComputedStyle(box,null).width;
console.log(width)
//轉化成數字類型
console.log(+(width.slice(0,3)))
var clientW=box.clientWidth
//獲得padding和width的總和
console.log(box.clientWidth)
//獲得盒子的總高度(padding+height)
console.log(box.clientHeight)
//padding+border+width
console.log(box.offsetWidth)
//padding+height+border
console.log(box.offsetHeight)
//匹配絕對定位的方向實現(獲取與定位父集的距離)left top
console.log(box.offsetTop)
console.log(box.offsetLeft)
</script>
三、鼠標事件的拖拽案例
1.v1版本
<style>
.box{
width:100px;
height:100px;
background:red;
border: 10px solid black;
position:absolute;
}
</style>
<div class='box'></div>
<script>
var box=document.querySelector('.box');
box.onmousedown=function(){
console.log('按下');
box.onmousemove=function(ev){
console.log('移動');
var x=ev.clientX;
var y=ev.clientY;
box.style.left=x-10+'px';
box.style.top=y-10+'px';
}
};
box.onmouseup=function(){
console.log('取消移動');
box.onmousemove=null;
}
</script>
2、鼠標拖拽事件v2版本
<style>
.box{
width: 100px;
height: 100px;
border: 10px solid red;
background: black;
position:absolute;
top: 0;
left: 0;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
box.onmousedown=function (fa) {
console.log('按下');
var dX=fa.clientX-box.offsetLeft;
var dY=fa.clientY-box.offsetTop;
//將移動鼠標捕捉改成文檔，是為了鼠標就算脫離box也不會停止移動
document.onmousemove=function (ev) {
console.log('移動');
var x=ev.clientX;
var y=ev.clientY;
box.style.left=x-dX+'px';
box.style.top=y-dY+'px';
}
};
box.onmouseup=function () {
console.log('移開');
//對鼠標移動事件刪除
document.onmousemove=null;
}
</script>
四、鍵盤事件
1、鍵盤按下事件(鍵盤按下會一直觸發事件)
<style>
.box{
width:100px;
height:100px;
background:red;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
document.onkeydown=function(ev){
// console.log(ev.keyCode);
console.log(ev.which)
}
</script>
2、鍵盤按下移動盒模型案例
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top:0;
left:0;
}
</style>
<div class="box"></div>
<script>
var box=document.querySelector('.box');
document.onkeydown=function(ev){
console.log(ev.keyCode);
switch (ev.keyCode){
case 37:box.style.left=box.offsetLeft-10+'px';break;
case 38:box.style.top=box.offsetTop-10+'px';break;
case 39:box.style.left=box.offsetLeft+10+'px';break;
case 40:box.style.top=box.offsetTop+10+'px';break;
}
}
</script>
四、javascript其他事件
1、onload(文檔加載事件)
<script>
//將script標簽寫在標簽前面使用
window.onload=function(){
var box=document.querySelector('.box')
console.log(box)
}
</script>
<div class='box'></div>
2、onscroll事件
<script>
//將script標簽寫在標簽前面使用
window.onload=function(){
var box=document.querySelector('.box')
console.log(box)
}
window.onscroll=function(){
console.log(window.scrollY);
}
</script>
<div class='box'></div>
<br>*100
3、盒子顯影與鼠標滾動事件的案例
1)滾動一直觸發事件
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top: 0;
left: 0;
}
.btn{
width: 50px;
height: 50px;
background: red;
display:none;
position: fixed;
top: 200px;
right: 100px;
}
</style>
<div class="box"></div>
<script>
//將script標簽寫在標簽前面使用
window.onload=function(){
var box=document.querySelector('.box');
console.log(box);
}
window.onscroll=function(){
var btn=document.querySelector('.btn');
console.log(window.scrollY);
console.log("cc");
if (window.scrollY>700){
console.log("bb");
btn.style.display='block';
btn.style.background="black"
}
if (window.scrollY<=700){
btn.style.display='none';
}
}
</script>
<div class='box'></div>
<div class="btn"></div>
2）只觸發一次
<style>
.box{
width:100px;
height:100px;
background:red;
position:absolute;
top: 0;
left: 0;
}
.btn{
width: 50px;
height: 50px;
background: red;
display:none;
position: fixed;
top: 200px;
right: 100px;
}
</style>
<div class="box"></div>
<script>
//將script標簽寫在標簽前面使用
window.onload=function(){
var box=document.querySelector('.box');
console.log(box);
}
var isshow=false;
window.onscroll=function(){
var btn=document.querySelector('.btn');
console.log(window.scrollY);
// console.log("cc");
if (window.scrollY>700){
if (!isshow){
console.log("bb");
btn.style.display='none';
btn.style.background="black";
isshow=true;
}
}else {
if (isshow){
btn.style.display="block";
isshow=false
}
}
}