DOM之事件

蝼蚁之行
779 阅读6分钟

什么是事件

网页中每一个元素都可以产生触发js事件，如：我们可以在用户点击某个按钮时产生一个事件，然后去执行

事件有三要素：

  1. 事件源：对哪个标签进行操作，按钮、输出框还是文本
  2. 事件类型：单击、双击还是按下空格
  3. 事件处理程序：要执行什么操作 或者 输出什么

针对事件三要素，有对应的执行事件的三个步骤：

  1. 获取事件
  2. 注册事件（绑定事件）
  3. 添加事件处理程序

1、鼠标事件

img
序号鼠标事件触发条件
1onclick鼠标点击左键触发
2onmouseover鼠标经过触发
3onmouseout鼠标离开触发
4onfocus获取鼠标焦点时触发
5onblur失去鼠标焦点时触发
6onmousemove鼠标移动时触发
7onmouseup鼠标离开时触发
8onmousedown鼠标按下时触发

注意：onclick 和 onfocus的区别：

  • onclick：只有鼠标点击了才会触发事件处理程序
  • onfocus：只要获取焦点，就是我们可以鼠标点击的方式获取焦点、也可以使用tab按键来获取焦点

语法：

<button>勇气</button>

let btn = document.querySelector('button')
btn.onfocus = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}

2、键盘事件

img

事件除了使用鼠标触发，还可以使用键盘触发

序号键盘事件触发条件
1onkeyup某个键盘按键被松开时触发
2onkeydown某个键盘按键被按下时触发
3onkeypress某个键盘按键被按下时触发，但是它不识别功能键，比如 ctrl、shift 箭头等

栗子：

// 按键松开时触发
document.onkeyup = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}

// 按键按下时触发
document.onkeydown = function() {
    alert('爱真的需要勇气')
}

// 功能键除外
document.onkeypress = function() {
    alert('去相信会在一起')
}

三个事件的识别顺序：keydown => keypress => keyup

3、注册事件

img

给元素添加事件，称为 注册事件 或 绑定事件

注册事件有两种方式：

  1. 传统方式
  2. 方法监听方式

3.1 传统方式

直接给元素绑定相关事件

  • <button onclick='alert("hi~")'><button>
  • btn.onclick = function() { alert("hi~") }

特点：注册事件的唯一性

同一个元素同一个事件只能设置一个处理函数，最后注册的处理函数会覆盖前面注册的处理事件

let btn = document.querySelector('button')
btn.onclick = function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
}
// 点击执行该语句
btn.onclick = function() {
    alert('爱真的需要勇气')
}

3.2 方法监听方式

  • addEventListener() ：是一个方法（IE9之前不支持）
  • attachEvent()： 可用于替换addEventListener()（少用）

特点：同一个元素同一个事件可以添加多个监听器

按照注册顺序依次执行

1、addEventListener() 监听方式

eventTarget.addEventListener(type, listener[, useCapture])

addEventListener() 方法将指定的监听器注册到 eventTarget (目标对象) 上，当该对象触发指定事件时，就会执行事件处理函数

  • type：事件类型，如：click、mouseover ，注意：不需要带 on
  • listener：事件处理函数，事件发挥时，会掉调用该监听函数
  • useCapture：可选参数，是一个布尔值，默认为false

useCapture 为false：在捕获阶段调用该监听函数

useCapture 为true：在冒泡阶段调用该监听函数

// 点击按钮先后执行两个语句
btn.addEventListener('click', function() {
    alert('爱真的需要勇气')
})

btn.addEventListener('click', function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
})

2、attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithon, callback);

attachEvent() 方法将指定的监听器注册到 eventTarget （目标对象）上，当该对象触发指定的事件时，指定的回调函数就会被执行

  • eventNameWithon：事件类型，比如 onclick 、onmouseover，注意：这里要带 on
  • callback ：事件处理函数
btn.attachEvent('onclick', function() {
    alert('人潮拥挤我能感觉你 放在我手心里')
})
  • IE11已不支持该方法

4、删除事件

img

1、传统删除方式

eventTarget.onclick = null;

栗子：

btn.onclick = function() {
    alert('爱真的需要勇气')
    // 删除事件，只能点击一次
    btn.onclick = null
}

2、方法监听删除方式

eventTarget.removeEventListener(type, listener[, useCapture]);

栗子：

btn.addEventListener('click', foo)

function foo() {
    alert('爱真的需要勇气')
    btn.removeEventListener('click', foo)
}

attachEvent 事件监听方式

eventTarget.detachEvent();

5、事件对象 e

官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态

简理理解：事件发生后，跟事件相关的一系列信息的集合都放到一个对象里面。这个对象就是事件对象 event

它有很多属性和方法，比如：

  • 是谁绑定了这个事件
  • 鼠标绑定事件的话，会得到鼠标的相关信息，如鼠标位置
  • 键盘绑定事件的话，会得到键盘的相关信息，如按了哪个键

5.1 事件对象使用方法

// event 就是事件对象
btn.onclick = function(event) {
    console.log(event);
}

btn.addEventListener('click', function(event) {
    console.log(event);
})
  • event 是个形参，js已经帮我们设定为事件对象，不需要传实参
  • event 事件对象我们可以写成 e（推荐）

5.2 事件对象常见属性和方法

img
事件对象属性方法描述说明
e.target返回触发事件的对象标准
e.srcElement返回触发事件的对象非标准 ie6~8使用
e.type返回事件的类型比如click mouseover 不带on
e.cancelBubble该属性阻止冒泡非标准 ie6~8使用
e.returnValue该属性阻止默认事件 （默认行为）非标准 ie6~8使用 比如不让链接跳转
e.preventDefault()该方法阻止默认事件（默认行为）标准 比如不让链接跳转
e.stopPropagation()阻止冒泡标准

this 和 e.target 都是指绑定的事件对象，那它们有什么区别呢？

  • e.target：获取触发事件的对象（元素）
  • this：this返回的是绑定事件的对象（元素）
<button>勇气</button>
<ul>
    <li>最好的我们</li>
</ul>

var btn = document.querySelector('button')
var ul = document.querySelector('ul')
// 两者返回相同的事件对象
btn.addEventListener('click', function(e) {
    console.log(e.target);  // <button>勇气</button>
    
    console.log(this);  // <button>勇气</button>
})

// 点击li，
ul.addEventListener('click', function(e) {
    console.log(e.target);  // <li>最好的我们</li>
    
    console.log(this);  // <ul>...</ul>
})

5.3 其它鼠标事件

1、禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，主要用于我们取消默认的上下文菜单

document.addEventListener('contextmenu', function(e) {
	e.preventDefault();
})
  • 当我们在页面上单击右键时，不会出现菜单让我们选择

2、禁止鼠标选中

selectstart 开始选中

<body>
    <div>我就要复制这段文字</div>
    <script>
        // selectstart  禁止选中文字
        document.addEventListener('selectstart', function(e) {
            e.preventDefault();
        })
    </script>
</body>
  • 无法复制文本

3、鼠标事件对象

img
序号鼠标事件对象说明
1e.clientX返回鼠标相对于浏览器窗口可视化的X坐标
2e.clientY返回鼠标相对于浏览器窗口可视化的Y坐标
3e.pageX返回鼠标相对于文档页面的X坐标 IE9+支持
4e.pageY返回鼠标相对于文档页面的Y坐标 IE9+支持
5e.screenX返回鼠标相对于电脑屏幕的X坐标
6e.screenY返回鼠标相对于电脑屏幕的Y坐标

栗子：

document.addEventListener('click', function(e) {
    console.log(e.clientX);
    console.log(e.clientY);

    console.log(e.pageX);
    console.log(e.pageY);
})
  • e.clientX：可视区域，与页面滚动无关
  • e.pageX：相对文档顶部和左边坐标
avatar
文章
阅读
粉丝