JS-事件

事件基础

概念

事件就是指用户 和 界面之间 所交互的时候做出的一系列反应，比如点击，键盘输入，鼠标移动，滚轮等…

DOM中的事件，实际上就是指给元素设置一个事件的侦听器，因为事件在js中其实是一直存在的，这是使我们没有进行监听，或者做出后续反应，所以没有实际效果。

侦听器：监听我们做出的交互动作，监听到动作之后我们就能通过代码做出一定的响应。

例子：点击一个按钮输出一个hello

var btn = document.getElementById('btn')
btn.onclick = function(){
    consolo.log('hello')
}

上述代码中的 function，不需要手动调用，就是当侦听器侦听到点击事件的时候才调用这个function，

事件的三要素

1. 事件源：绑定事件的元素（标签）
2. 事件类型（动作）：比如、点击、鼠标移入、键盘按下…
3. 事件处理函数：事件触发后进行的额外操作

事件处理程序

• html 事件处理程序（非标准DOM0）

• DOM0级 事件处理程序

• DOM2级 事件处理程序

html事件处理程序

<!-- <button onclick="console.log('这个按钮被点击了')">按钮</button> -->
<button onclick="btnClick()">按钮</button>
<button id="btn" onclick="alert('被点击了')">按钮2</button>
<script>
    function btnClick(){
    console.log('这个按钮被点击了')
}
</script>

缺点：html和js代码没有分离，不方便后期维护。

取消事件(删除onclick属性)

var btn=document.getElementById("btn")
btn.removeAttribute("onclick")

DOM0级事件处理程序

<button id="btn" >按钮</button>

<script>
    var btn = document.getElementById('btn')
    btn.onclick = function(){
        console.log('按钮被点解了')
    }
</script>

优点：

1. js和html代码分离，方便维护
2. 兼容性好：ie也可以兼容

缺点：

1. 一个元素无法绑定多个事件

移除该点击事件：

btn.onclick = null

DOM2级事件处理程序

<button id="btn" >按钮</button>

<script>
    var btn = document.getElementById('btn')
//addEventListener（）添加事件监听器
    btn.addEventListener('click',function(){
        console.log('这个按钮被点击了')
    })
</script>

优点：

1. js和html代码分离，方便维护
2. 一个元素可以添加多个事件响应

缺点：

1. 兼容性不好 ie8及以下不兼容

取消点击事件

var btn = document.getElementById('btn')
function func(){
    console.log('1、这个按钮被点击了')
}
//绑定点击事件
btn.addEventListener('click',func)
//取消点击事件
btn.removeEventListener('click',func)

事件类型

鼠标事件

事件类型	说明
click	单击事件
dblclick	双击事件
mousedown	鼠标按下时触发
mouseup	鼠标松开时触发
mouseover	鼠标移入时触发
mouseout	鼠标移出时触发
mouseenter	鼠标移入时触发
mouseleave	鼠标移出时触发
mousemove	鼠标移动时
window.onscroll	滚动条事件

说明:

mouseover 和mouseout ：当我们事件添加到父节点身上时，除了父节点以外，子元素也会触发事件；

mouseenter 和mouseleave ：当我们事件添加到父节点身上时，就只有父节点才能触发该事件；

键盘事件

事件类型	说明
keydown	键盘按下时（按下时会一直触发）
keyup	键盘按键松开时
keypress	按住键盘时（按下时会一直触发）

表单事件

事件类型	说明
focus	input获取到焦点的时候
blur	input失去焦点的时候
change	input中的值最后发生改变后触发
input	输入框内容发生改变时

事件流

基本概念

概念：

当一个元素触发一个事件的时候，会产生一个事件对象，该事件对象会在元素本身与window对象之间流动的方向。

第一个阶段：事件捕获【netspace】

事件对象从最顶层window对象一层一层往里传递，直到元素本地

第二阶段：目标阶段 【到达元素】

第三阶段：事件的冒泡

事件对象从元素本身，一层一层外外面进行冒泡动作，直到window结束

事件的触发：

事件的产生【对某个元素做了一些操作】—事件对象就已经产生了

至于会不会触发一些动作，需要看元素的监听器

对元素绑定监听：

DOM0：事件冒泡

DOM2：addEventListener(“事件名”，函数，布尔类型的值); //第三个参数 是否在捕获阶段触发 默认是false

如果一个事件对象经过该元素的时候，该元素上有对应的监听器，同时监听器监听的事件类型刚好跟当前的事件类型匹配，触发监听函数。

事件对象的操作

事件对象

在页面上触发事件，事件对象就产生了。该事件对象包含了事件的所有信息。

事件对象的获取

方式一：事件监听函数触发的时候，浏览器会将该事件以第一个参数传递给监听函数

方式二：在监听函数中，通过window.event

// var e1 = null; //该函数中使用的事件对象
// if(e){
//     e1 = e;
// }else{
//     e1 = window.event;
// }
var e1 = e || event;

事件对象中常见的属性及其使用

preventDefault—值是一个方法：作用：阻止元素的默认行为

应用场景：

a 作为按钮使用

方式一： e1.preventDefault();

方式二：在a标签上href 值：javascript:void(0)

form表单中

    <!-- form表单默认行为  1.提交数据 2.跳转地址 action的地址
        以后使用form 主要使用 组件【单选框 多选框  文本....】
        提交--- ajax
        页面跳转--不希望发生
    -->
    <form action="http://www.baidu.com" method="get">
       用户名 <input type="text" name="uname" id="uname">
       <input type="submit" value="提交">
    </form>

    <script>
        document.querySelector("form").addEventListener("submit",function(){
            event.preventDefault();
           console.log("表单提交了");
        });

target

srcElement

作用：表示事件源

事件的委托：

将自身事件委托给其他元素【委托的元素必须有层级关系===事件的委托底层是基于事件的冒泡】

针对动态添加的元素【JS代码动态的渲染上去的元素】

直接绑定事件：直接在元素上绑定

 let stra = `<a href="javascript:void(0)" οnclick="getPageNum()">${i}</a>`;

事件的委托：将元素委托给在页面上存在的离他最近的祖先元素

document.querySelector(".nav").onclick = function(){
    //console.log("被点击了....");
    //获取被点击的元素的innerText 。此时事件是绑定给父元素的  但是由于冒泡 子元素会触发到父元素的事件
    if(event.target.nodeName=="A"){ //nodeName获取元素的名字  在进行委托时候 因为i事件绑定给父元素的，所有判断一下事件是在哪个元素触发的。
        console.log(event.target.innerText); //事件委托
    }
}