Loading...
墨滴

CYF

2021/04/21  阅读:47  主题:默认主题

DOM之事件

img

什么是事件

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

事件有三要素:

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

针对事件三要素,有对应的执行事件的三个步骤:

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

1、鼠标事件

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

注意:onclickonfocus的区别:

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

语法:

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

2、键盘事件

img
img

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

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

栗子:

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

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

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

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

3、注册事件

img
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:事件类型,如:clickmouseover注意:不需要带 on
  • listener:事件处理函数,事件发挥时,会掉调用该监听函数
  • useCapture:可选参数,是一个布尔值,默认为false

useCapturefalse:在捕获阶段调用该监听函数

useCapturetrue:在冒泡阶段调用该监听函数

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

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

2、attachEvent 事件监听方式

eventTarget.attachEvent(eventNameWithon, callback);

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

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

4、删除事件

img
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() 阻止冒泡 标准

thise.target 都是指绑定的事件对象,那它们有什么区别呢?

  • e.target:获取触发事件的对象(元素)
  • thisthis返回的是绑定事件的对象(元素)
<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
序号 鼠标事件对象 说明
1 e.clientX 返回鼠标相对于浏览器窗口可视化的X坐标
2 e.clientY 返回鼠标相对于浏览器窗口可视化的Y坐标
3 e.pageX 返回鼠标相对于文档页面的X坐标 IE9+支持
4 e.pageY 返回鼠标相对于文档页面的Y坐标 IE9+支持
5 e.screenX 返回鼠标相对于电脑屏幕的X坐标
6 e.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:相对文档顶部和左边坐标

CYF

2021/04/21  阅读:47  主题:默认主题

作者介绍

CYF