js事件(上)

js事件

概述：

事件是一个异步机制。他相当于一个 执行者执行 -- 观察者观察 --- 处理函数执行 这个流程称为事件。

事件的声明书写方式

1.内联模式(在标签内部

<!-- 内联模式就是在onclick书写中设置对应的代码 -->
<button onclick="alert('你好')">点我</button>
<button onclick="fn(1)">点我</button>
<script>
    function fn(arg){
        alert('我是函数执行'+arg);
    }
</script>

2.脚本模式(在script中)

//脚本模式的写法 事件名 执行对象 处理函数
var btn = document.getElementsByTagName('button')[2]
//执行对象.on+事件名 = 处理函数
btn.onclick = function(){
    console.log('你好');
}
function handler(){
    console.log('处理函数执行了');
}
btn.onclick = handler

内联模式和脚本模式的区别

• 内联模式需要手动调用  脚本模式的处理函数会自动调用
• 内联模式的函数调用this指向window  脚本模式函数调用指向当前调用者

 

事件名的分类

鼠标事件（鼠标触发的 mouse）

• click 点击事件
• dblclick 双击事件
• mousedown按下
• mouseup 弹起
• mouseenter 移入
• mouseleave 移出
• mouseover移入
• mouseout移出
• mousemove移动
• contextmenu右键点击

注意事项

• click和对应mousedown和mouseup的执行顺序 （mousedown -- mouseup -- click）

• mouseenter(mouseleave)和mouseover(mouseout)的区别 （mouseenter 子元素不会触发 mouseover子元素会触发）

键盘事件 （键盘触发的 key）

keydown 键盘按下

keyup弹起

keypress 字符串按下(功能键除外)

注意事项

• 执行顺序 keydown - keypress - keyup

• keypress 一定会触发 keydown

 

HTML事件 （HTML中自带的一些事件（只能用于专门HTML））

window的事件

•  加载事件 load
• 卸载 事件unload
• 关闭窗口事件 onclose
• 打印之前调用的事件(onbeforeprint)
• 卸载之前调用的事件(onbeforeunload)
• 滚动栏变化的事件(onscroll)

表单的事件

• submit 表单提交事件

• reset 表单重置事件

• select 内容被选中（只针对于输入框和文本域）

• change 表单的value值发生变化

• input 可输入的表单标签里面进行输入

• blur 失去焦点

• focus 获取焦点

event 事件源对象

概述

event 被称为事件源对象，他是一个全局的内置对象（属于window），他里面包含了一些关于事件执行的相关的属性。

处理函数中Arguments

处理函数也是一个函数，函数就具备一个arguments的属性。argments是一个伪数组。那么就可以知道对应的处理函数里面也拥有arguments

event的常用属性

鼠标坐标的相关属性

• screenX 表示鼠标离屏幕的X距离

• screenY 表示鼠标离屏幕的Y距离

• pageX 表示当前的鼠标离页面的X距离（包含卷起部分）

• pageY 表示当前的鼠标离页面的Y距离（包含卷起部分）

• clientX 表示鼠标离页面可视区的X距离

• clientY 表示鼠标离页面可视区的Y距离

• offsetX 表示鼠标离父元素偏移的X距离

• offsetY 表示鼠标离父元素偏移的Y距离

按钮辅助的相关属性

• ctrlKey 是否按下了ctrl键

• altKey 是否按下了alt键

• shiftKey 是否按下shift键

事件委托机制（事件代理）

概述：将对应的事件委托给对应的父元素，然后通过对应的e.target获取实际的触发元素进行操作。

示例

//事件委托的写法
//获取需要加事件的父元素
var ul = document.querySelector('ul')
//给ul添加事件
//给父元素添加事件
//在内部判断触发元素 e.target
//对应执行操作
ul.onclick = function (e) {
    e = e || window.event
    //判断当前触发元素是否为li
    if (e.target.tagName == 'LI') {
        //排他思想
        //把所有的li的class清除
        for (var item of this.children) {
            item.className = ''
        }
        e.target.className = 'active'
    }
}

事件委托的运用场景

在一个父元素里面有多个子元素要添加相同的事件的时候