JS事件

Posted WUWANLEI

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS事件相关的知识，希望对你有一定的参考价值。

JS事件

一、初始事件

// js事件: 页面标签在满足某种条件下可以完成指定功能的这种过程, 成之为事件
// 某种条件: 如鼠标点击标签: 点击事件 | 鼠标双击标签: 双击事件 | 键盘按下: 键盘按下事件
// 指定功能: 就是开发者根据实际需求完整相应的功能实现

// 钩子函数: 就是满足某种条件被系统回调的函数(完成指定功能)
// 点击事件: 明确激活钩子的条件 = 激活钩子后改处理什么逻辑, 完成指定功能(函数)

// 获取页面标签是前提
var div = document.querySelector(‘.div‘);
// 钩子条件: 双击 = 指定功能(自身背景颜色变红)
div.ondblclick = function () {
    this.style.backgroundColor = ‘red‘;
}

二、事件的两种绑定方式

1、on事件绑定方式

document.onclick = function() {
    console.log("文档点击");
}
// on事件只能绑定一个方法，重复绑定保留最后一次绑定的方法
document.onclick = function() {
    console.log("文档点击");
}
// 事件的移除
document.onclick = null;

2、非on事件绑定方式

document.addEventListener(‘click‘, function() {
     console.log("点击1");
})
document.addEventListener(‘click‘, function() {
     console.log("点击2");
})
// 非on事件可以同时绑定多个方法，被绑定的方法依次被执行
// addEventListener第三个参数(true|false)决定冒泡的方式
function fn () {}
document.addEventListener(‘click‘, fn);
// 事件的移除
document.removeEventListener(‘click‘, fn);

三、事件参数event

  • 存放事件信息的回调参数

四、事件的冒泡与默认事件

  • 事件的冒泡：父子都具有点击事件，不处理的话，点击子级也会出发父级的点击事件

<body id="body">
    <div id="sup">
        <div id="sub"></div>
    </div>
</body>
?
<script>
sub.onclick = function (ev) {
    // 方式一
    ev.stopPropagation();
    console.log("sub click");
}
sup.onclick = function (ev) {
    // 方式二
    ev.cancelBubble = true;
    console.log("sup click");
}
body.onclick = function (ev) {
    console.log("body click");
}
</script>

  • 默认事件：取消默认的事件动作，如鼠标右键菜单

<body id="body">
    <div id="sup">
        <div id="sub"></div>
    </div>
</body>
?
<script>
sub.oncontextmenu = function (ev) {
    // 方式一
    ev.preventDefault();
    console.log("sub menu click");
}
sup.oncontextmenu = function (ev) {
    console.log("sup menu click");
    // 方式二
    return false;
}
body.oncontextmenu = function (ev) {
    console.log("body menu click");
}
</script>

五、鼠标事件

  • 鼠标事件

  onclick：鼠标点击
  ondblclick：鼠标双击
  onmousedown：鼠标按下
  onmousemove：鼠标移动
  onmouseup：鼠标抬起
  onmouseover：鼠标悬浮
  onmouseout：鼠标移开
  oncontextmenu：鼠标右键

  • 事件参数ev

  ev.clientX：点击点X坐标
  ev.clientY：点击点Y坐标

六、键盘事件

  • 键盘事件

  onkeydown：键盘按下
  onkeyup：键盘抬起

  • 事件参数ev

  ev.keyCode：按键编号
  ev.altKey：alt特殊按键
  ev.ctrlKey：ctrl特殊按键
  ev.shiftKey：shift特殊按键

七、表单事件

  onfocus：获取焦点
  onblur：失去焦点
  onselect：文本被选中
  oninput：值改变
  onchange：值改变，且需要在失去焦点后才能触发
  onsubmit：表单默认提交事件

八、文档事件

  • 文档事件由window调用

  onload：页面加载成功
  onbeforeunload：页面退出或刷新警告，需要设置回调函数返回值，返回值随意

九、图片事件 

  onerror：图片加载失败

十、页面事件 

  onscroll：页面滚动
  onresize：页面尺寸调整

  window.scrollY：页面下滚距离

 

以上是关于JS事件的主要内容，如果未能解决你的问题，请参考以下文章

js 温故而知新 webkitTransitionEnd 监听Transition动画结束事件

原生js禁止页面滚动

谷歌浏览器调试jsp 引入代码片段，如何调试代码片段中的js

Android 事件分发事件分发源码分析 ( Activity 中各层级的事件传递 | Activity -＞ PhoneWindow -＞ DecorView -＞ ViewGroup )(代码片段

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程