JavaScript----第七章

1. 事件

A. 鼠标事件

1. click => 点击

2. dblclick = 双击

3. contextmenu => 右键事件

4. mouseup => 鼠标抬起事件

5. mousedown => 鼠标按下事件

6. mousemove => 鼠标移动事件

7. mouseenter => 鼠标移入事件

8. mouseleave => 鼠标移出事件

9. mouseover => 鼠标移入事件

10. mouseout => 鼠标移出事件

比如

var box = document.querySelector(".box")
//鼠标点击事件 => click
box.onclick = function(){
    console.log("鼠标点击事件 => click");
}
​
//鼠标双击事件 => dblclick
box.ondblclick = function(){
    console.log("鼠标双击事件 => dblclick");
}
​
//鼠标右键事件 => contextmenu
box.oncontextmenu = function(){
    console.log("鼠标右键事件 => contextmenu");
}
​
//鼠标抬起事件 => mouseup
box.onmouseup = function(){
    console.log("鼠标抬起事件 => mouseup");
}
​
//鼠标按下事件 => mousedown
box.onmousedown = function(){
    console.log("鼠标按下事件 => mousedown");
}
​
//鼠标移动事件 => mousemove
box.onmousemove = function(){
    console.log("鼠标移动事件 => mousemove");
}
​
//鼠标移入事件 => mouseenter
box.onmouseenter = function(){
    console.log("鼠标移入事件 => mouseenter");
}
​
//鼠标移出事件 => mouseleave
box.onmouseleave = function(){
    console.log("鼠标移出事件 => onmouseleave");
}
​
//鼠标移入事件 => mouseover
box.onmouseover = function(){
    console.log("鼠标移入事件 => mouseover");
}
​
//鼠标移出事件 => mouseout
box.onmouseout = function(){
    console.log("鼠标移出事件 => mouseout");
}

B. 触摸事件

1. touchstart => 开始触摸

2. touchmove => 触摸中

3. touchend => 触摸结束

比如

var box = document.querySelector(".box")
//开始触摸 => touchstart
box.ontouchstart = function(){
    console.log("开始触摸 => touchstart");
}
//触摸中 => touchmove
box.ontouchmove = function(){
    console.log("触摸中 => touchmove");
}
//触摸结束 => touchend
box.ontouchend = function(){
    console.log("触摸结束 => touchend");
}

C. 键盘事件

1. keyup => 键盘抬起

2. keydown => 键盘按下(识别功能键)

3. keypress => 键盘按下(不可以识别功能)

比如

var inp = document.querySelector("input")
// 键盘抬起事件
inp.onkeyup = function(){
    console.log(this.value);
}
​
// 键盘按下事件,可以识别功能键
inp.onkeydown = function(){
    console.log(this.value);
}
​
// 键盘按下事件,不可以识别功能键
inp.onkeypress = function(){
    console.log(this.value);
}

D. 表单事件

1. submit => 提交事件

2. reset => 重置事件

3. input => 输入事件

4. change => 改变事件

5. focus => 获取焦点事件

6. blur => 失去焦点事件

比如

var form = document.querySelector("form")
// 提交事件 => submit
form.onsubmit = function(){
    alert("您提交了")
}
//重置事件 => reset
form.onreset = function(){
    alert("您重置了")
}
//获取焦点 focus
var username = document.getElementById("username")
username.onfocus = function(){
    console.log("获取到了焦点");
}
//失去焦点 blur
username.onblur = function(){
    console.log("失去焦点");
}
//输入事件 => input
username.oninput = function(){
    console.log(this.value);
}
//改变事件 => change
//触发的条件有两个
    // 内容改变
    // 失去焦点
username.onchange = function(){
    console.log("change",this.value);
}

E. 其他事件

1. selectstart => 选中事件

2. visibilitychange 事件

比如

//选中事件 => selectstart
document.onselectstart = function(){
    alert("不让你选中")
}
​
//标签页的切换事件
document.onvisibilitychange = function(){
    // console.log("页面切换过去了");
    // document.visibilityState => hidden => 隐藏
    // document.visibilityState => visible => 显示
    // console.log(document.visibilityState);
    if(document.visibilityState == 'hidden'){
        console.log("页面切换过去了");
    }else{
        console.log("页面切换回来了");
    }
}

2. 事件的绑定与解绑

A. DOM0的事件绑定

只能绑定一个相同的事件,如果绑定多个相同的事件,那么后面的会覆盖掉前面的事件

语法

btn.onclick = function(){
    console.log("随便");
}

比如

var btn = document.querySelector("button")
btn.onclick = function(){
    console.log("随便");
}
//DOM0就是后面的会覆盖掉前面的
btn.onclick = function(){
    console.log("随便");
}

B. DOM2事件的绑定

可以同时绑定多个相同的事件,并且触发的时候,多个函数会同时执行

语法

//事件类型没有on
btn.addEventListener("事件类型","触发事件的函数")

比如

var btn = document.querySelector("button")
//DOM2的绑定方式 => btn.addEventListener("事件类型","事件函数")
btn.addEventListener("click",function(){
    console.log("外面下着雨,页是算算不容易");
})
​
//再次绑定一个相同click事件
btn.addEventListener("click",function(){
    console.log("留在家里的衣服,有空再来拿回去");
})

C. DOM0 的解绑

语法

btn.onclick = null

比如

/* 
    DOM0 的绑定 => 事件源.on事件类型 = 函数
    DOM0 的解绑 => 事件源.on事件类型 = null;
*/
//DOM0事件解绑
var btn = document.querySelector("button")
//点击btn的时候,使用DOM0绑定fn这个函数
btn.onclick = fn
​
var btn2 = document.querySelector("button:nth-child(2)")
btn2.onclick = function(){
    //解绑第一个按钮
    btn.onclick = null;
}
​
// 函数
function fn(){
    console.log(this);
}

D. DOM2 的解绑

语法

// 绑定 => btn.addEventListener("事件类型",函数)
​
// 解绑 => btn.removeEventListener("事件类型",函数)

比如

<button>绑定</button>
<button>解绑</button>
<script>
    var btn1 = document.querySelector("button")
    var btn2 = document.querySelector("button:nth-child(2)")
​
    function fn1(){
        console.log("蓝色妖姬你🤟");
    }
    function fn2(){
        console.log("非要在渣男身上找存在");
    }
    //DOM2的绑定
    btn1.addEventListener("click", fn1)
    btn1.addEventListener("click", fn2)
​
    //解绑
    btn2.addEventListener("click", function () {
        //解绑
        btn1.removeEventListener("click", fn2)
    })
</script>

3. 事件对象

事件对象就是当我们触发某一个事件的时候,浏览器会有一个盒子将我们本次触发事件的关键信息给记录下来 -> 事件对象

A. event => 事件对象

语法

//函数的第一个参数
btn.onclick = function(event){
    console.log(event);
}

B. target => 目标对象

比如

 btn.addEventListener("click",function(event){
    // console.log(event);
    //target => 目标 
    // event.target => 触发事件的目标对象
    console.log(event.target);
})

简写

var btn = document.querySelector("button")
//event => 可以简写成e
btn.onclick = function(e){
    console.log(e.target);
}

C. keycode => 键码

我们的键盘上面的每一个按键都对应着一个键码,可以通过事件对象的keycode

比如

var inp = document.querySelector("input")
/* 
    keydown => 可以识别功能,但是不区别大小写
    keypress => 不可以识别功能,但是可以区别大小写
*/
inp.onkeydown = function(e){//
    //获取事件对象的键码
    console.log(e.keyCode);
}
​
inp.onkeypress = function(e){
    console.log(e.keyCode);
}

回顾

1. 事件类型

• 鼠标事件

  • click

  • dblclick

  • contextmenu

  • mouseup

  • mousedown

  • mousemove

  • mouseenter

  • mouseleave

  • mouseover

  • mouseout

• 键盘事件

  • keyup

  • keydown

  • keypress

• 触摸事件

  • touchstart

  • touchmove

  • touchend

• 表单事件

  • input

  • change

  • submit

  • reset

  • focus

  • blur

• 其他事件

  • selectstart

  • visibilitychange

1. 事件绑定

• 绑定

  • dom0 => 事件源.on类型 = 触发事件执行的函数

  • dom2 => 事件源.addEventListener("事件类型",触发事件执行的函数)

• 解绑

  • dom0 => 事件源.on事件类型 = null

  • dom2 => 事件源.removeEventListener("事件类型",触发事件执行的函数)

1. 事件对象

• e.target

• e.keyCode

知识点

1. 包装类

1. 数据类型分类

• 基本数据类型 => number,string,boolean,null,undefined

• 复杂数据类型 => Date,Function,Object,Array...

1. 包装类型

基本数据在使用的过程当中,可以将基本数据类型转换复杂数据类型,当我们去点的时候,那这个复杂数据类型(包装类)

• number => Number

• string => String

• boolean => Boolean

• null => 不能点,就是不能转换成包装类

• undefined => 不能点,就是不能转换成包装类

比如

//点语法是复杂数据类型的特点
//可以点
var num = 10.2132;
console.log(num.toFixed(2));
//可以点
var str = "helllongitud"
console.log(str.slice(1,2));
​
// null 和 undefined 不能进行点,就是不能转换成包装(复杂数据类型)
var aa = null;
console.log(aa.str);

2. 组合键

1. shift,alt,ctrl,meta

比如

inp.onkeydown = function(e){
    // console.group();
    // console.log("metaKey",e.metaKey);
    // console.log("altKey",e.altKey);
    // console.log("shiftKey",e.shiftKey);
    // console.log("ctrlKey",e.ctrlKey);
    // console.groupEnd()
​
    //表示按回车键 + alt键
    if(e.keyCode == 13 && e.altKey){
        console.log("按回车键 + alt键");
    }
​
    //表示按 / + shift键,按住shift不动,然后再 /
    if(e.keyCode == 191 && e.shiftKey){
        console.log("按 A + shift键");
    }
​
    //表示按 ctrl+c 键,先按住ctrl+c
    console.log(e.keyCode);
    if(e.keyCode == 67 && e.ctrlKey){
        console.log("按 ctrl+c 键");
    }
}

3.事件对象坐标

1. pageX,pageY => 参考是页面

2. offsetX,offsetY => 参考是盒子

3. clientX,clientY => 参考是浏览器

比如

box.onclick = function(e){
    //e.pageX,e.pageY => 参考物网页
    console.log("e.pageX,e.pageY",e.pageX,e.pageY);
​
    //e.offsetX,e.offsetY => 参考物盒子
    console.log("e.offsetX,e.offsetY",e.offsetX,e.offsetY);
​
    //e.clientX,e.clientY => 参考物浏览器
    console.log("e.clientX,e.clientY",e.clientX,e.clientY);
}

4. 回顾两大家族

1. offset

• offsetWidth,offsetheight => 求盒子的内容+内边距+边框

• offsetTop,offsetLeft => 看父元素,如果父元素有定位,那么参考物是父元素,如果父元素没有定位,那么参考物浏览器的左上角

• offsetX,offsetY => 求坐标,参考物是当前所在的盒子

1. client

• clientWidth,clientHeight => 求盒子的内容+内边距

• clientTop,clientLeft => 求盒子的上边框和左边框

• clientX,clientY => 求坐标,参考物浏览器

1. page

• pageX,pageY => 求坐标,参考物页面

比如

<div></div>
<script>
    //获取点击的坐标,将点击的左边显示在div当中
    var box = document.querySelector("div")
    document.onclick = function(e){
        // pageX,offsetX,clientX
        var x = e.pageX;
        var y = e.pageY;
        box.innerHTML = `X轴坐标为${x},Y轴坐标为${y}`
    }
​
​
    //获取鼠标移动的坐标
    document.onmousemove = function(e){
        var x = e.offsetX;
        var y = e.offsetY
        box.innerHTML = `X轴坐标为${x},Y轴坐标为${y}`
    }
</script>

1. 案例: 中国就业网(盒子移动),盒子在页面飘起来

5. 事件的传播机制

A. 事件的传播机制

• 事件的捕获

• 事件源

• 事件的冒泡

比如

<ul>
    <li>我是事件源</li>
</ul>
<script>
    //模拟事件的传播机制 => 模拟捕获的过程
    window.addEventListener("click",function(){console.log("window")},true)
    document.documentElement.addEventListener("click",function(){console.log("html");},true)
    document.body.addEventListener("click",function(){console.log("body");},true)
    document.querySelector("ul").addEventListener("click",function(){console.log("ul");},true)
    document.querySelector("li").addEventListener("click",function(){console.log("li");},true)
​
    //模拟事件的传播机制 => 模拟冒泡的过程
    window.addEventListener("click",function(){console.log("window")},false)
    document.documentElement.addEventListener("click",function(){console.log("html");},false)
    document.body.addEventListener("click",function(){console.log("body");},false)
    document.querySelector("ul").addEventListener("click",function(){console.log("ul");},false)
    document.querySelector("li").addEventListener("click",function(){console.log("li");},false)
</script>

B. 阻止事件的冒泡

1. e.stopPropagation()

比如

<div class="outer">
    <div class="content">
        <div class="inner"></div>
    </div>
</div>
<script>
    /* 
        阻止事件的冒泡 -> 使用事件对象 
            e.stopPropagation
    */
    //事件的冒泡
    var outer = document.querySelector(".outer")
    var content = document.querySelector(".content")
    var inner = document.querySelector(".inner")
​
    outer.onclick = function(){
        console.log("outer....");
    }
    content.onclick = function(e){
        console.log("content....");
        //阻止事件的冒泡
        e.stopPropagation();
    }
    inner.onclick = function(){
        console.log("inner....");
    }
</script>

C. 表单默认行为

1. 在提交事件当中编写 return false

2. 在表单当中编写 onsubmit="return false"

3. 在提交事件当中利用事件对象 e.preventDefault()

比如

<!-- 
    阻止默认行为 
        1. return false;
        2. e.preventDefault();
        3. 在表单当中写一个`onsubmit = "return false"`
    -->
<!-- <form action="http://web.chenfeng.online" οnsubmit="return false"> -->
<form action="http://web.chenfeng.online">
    <button type="submit">提交</button>        
</form>
<script>
    var form = document.querySelector("form")
    form.onsubmit = function(e){
        //阻止表单的默认行为
        // return false;
​
        //利用事件对象阻止默认行为
        e.preventDefault();
    }
</script>

D. mouseenter与mouseover的区别

比如

<style>
* {
    margin: 0;
    padding: 0;
}
​
.outer {
    margin: 100px;
    width: 300px;
    height: 300px;
    background-color: springgreen;
}
​
.content {
    width: 200px;
    height: 200px;
    background-color: skyblue;
}
​
.inner {
    width: 100px;
    height: 100px;
    background-color: pink;
}
</style>
<!-- 
    mouseenter => 当我们点击元素的时候,得到的是绑定事件的目标对象,会触发事件的捕获
    mouseover => 当我们点击元素的时候,得到是触发事件的目标对象,会触发事件的冒泡
-->
<div class="outer">
    <div class="content">
        <div class="inner">
​
        </div>
    </div>
</div>
<script>
    /*
        mouseover与mouseout 是一对
        mouseenter与mouseleave 是一对
    */
    var outer = document.querySelector(".outer")
    var content = document.querySelector(".content")
    var inner = document.querySelector(".inner")
    // outer.addEventListener("mouseenter",function(e){
    //     console.log(e.target);//得到的是绑定事件的目标对象
    // })
​
    // outer.addEventListener("mouseover",function(e){
    //     console.log(e.target);//得到的是触发事件的目标对象
    // })
​
    //触发事件的冒泡
    // outer.addEventListener("mouseover",function(){
    //     console.log("outer....");
    // })
    // content.addEventListener("mouseover",function(){
    //     console.log("content....");
    // })
    // inner.addEventListener("mouseover",function(){
    //     console.log("inner....");
    // })
​
    //触发事件的捕获
    outer.addEventListener("mouseenter",function(){
        console.log("outer....");
    })
    content.addEventListener("mouseenter",function(){
        console.log("content....");
    })
    inner.addEventListener("mouseenter",function(){
        console.log("inner....");
    })
</script>

E. 事件的委托(事件的委派)

1. 事件的委托的原理就是事件的冒泡

2. 作用: 减少事件的绑定(减少内存的占用),可以让子元素在添加的时候友好显示