JavaScript小技能：事件

2022-08-22 13:10:58 浏览数 (1)

引言

事件能为网页添加真实的交互能力，它可以捕捉浏览器操作并运行相关代码做为响应。

I 预备知识

1.1 箭头函数

代码语言：javascript复制
const add = (num1, num2) => num1   num2;
//`匿名函数`: 因为它没有名字，匿名函数还有另一种我们称之为`箭头函数`的写法，箭头函数使用` () => `代替 `function ()`：

1.2 事件模型

JavaScript 在不同环境下使用不同的事件模型：不同的编程环境下的事件机制是不同的，比如JavaScript 网页上的事件机制不同于在其他环境中的事件机制。（Node.js 的事件模型、浏览器插件WebExtensions技术的事件模型）

1.3 事件冒泡及捕获

当一个事件发生在具有父元素的元素上时，浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。

在现代浏览器中，默认情况下，所有事件处理程序都在冒泡阶段进行注册。

  1. 捕获阶段：浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则运行它。然后，它移动到中单击元素的下一个祖先元素，并执行相同的操作，依此类推，直到到达实际点击的元素。
  2. 冒泡阶段:浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它。然后它移动到下一个直接的祖先元素，并做同样的事情，直到它到达元素。

事件委托: 如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，并让子节点上发生的事件冒泡到父节点上，而不是每个子节点单独设置事件监听器。(利用了冒泡的特性)

1.4 事件对象

事件处理函数的event、evt、e参数称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息。

  1. 通过事件对象获得事件源
代码语言：javascript复制
function bgChange(e) {
  const rndCol = 'rgb('   random(255)   ','   random(255)   ','   random(255)   ')';
  e.target.style.backgroundColor = rndCol;
  console.log(e);
      //获得事件源    var resurce = e.target;
    //事件发生的横坐标
    var x = e.clientX;
    //事件发生的纵坐标
    var y = e.clientY;
    alert(x);
    alert(y);
}

btn.addEventListener('click', bgChange);

大多数事件处理器的事件对象都有可用的标准属性和函数（方法），一些更高级的处理程序会添加一些专业属性，这些属性包含它们需要运行的额外数据。例如，媒体记录器 API 有一个dataavailable事件，它会在录制一些音频或视频时触发，并且可以用来做一些事情 (例如保存它，或者回放)。

  1. 通过标准事件对象的 stopPropagation()函数来修复事件冒泡问题

当在事件对象上调用该函数时，它只会让当前事件处理程序运行，但事件不会在冒泡链上进一步扩大，因此将不会有更多事件处理器被运行 (不会向上冒泡)。

代码语言：javascript复制
video.onclick = function(e) {
  e.stopPropagation();
  video.play();
};

1.5 阻止默认行为

用preventDefault()函数来阻止元素的默认行为

代码语言：javascript复制
const form = document.querySelector('form');
form.onsubmit = function(e) {
  if (fname.value === '' || lname.value === '') {
    e.preventDefault();//停止表单提交
    para.textContent = 'You need to fill in both names!';
  }
}

II 事件

2.1 事件的三要素

事件源/ 事件/ 监听器。

侦听事件发生的结构称为事件监听器（Event Listener），响应事件触发而运行的代码块被称为事件处理器（Event Handler）。

2.2 事件触发机制

  1. 以事件处理程序属性形式关联事件处理器
代码语言：javascript复制
//onclick、onmouseover
document.querySelector('html').onclick = function() {
    alert('别戳我，我怕疼。');
}
  1. 通过DOM Level 2 Events 函数 addEventListener()关联事件处理器

（只支持到 Internet Explorer 9） 可以在一个元素上多次调用addEventListener('click', function() { ... })，并可在第二个参数中指定不同的函数。 对于事件处理程序属性来说，这是不可能的，因为后面任何设置的属性都会尝试覆盖较早的属性。

代码语言：javascript复制
// 
document.querySelector('html').addEventListener('click', () => {
  alert('别戳我，我怕疼。');
});

//有一个相对应的方法，removeEventListener()，这个方法移除事件监听器。
const btn = document.querySelector('button');
btn.removeEventListener('click', bgChange);

2.3 监听属性

JavaScript的事件以属性形式onclick、onmouseover关联事件侦听器代码

事件监听属性

描述

onmouseover

鼠标移入事件

onmouseout

鼠标移出事件

onclick

鼠标单击事件

ondblClick

鼠标双击事件

onmousemove

鼠标的移动事件

onblur

鼠标失去焦点事件

onfocus

鼠标获得焦点事件

onmousedown

鼠标按下事件

onmouseup

鼠标弹起事件

onload

页面载入完成事件

onsubmit

表单提交事件 : 函数返回true表单提交 onsubmit=" return Function"

onchange

失去焦点并且值发生改变事件

onkeyup

键盘弹起事件

onkeydown

键盘按下事件

onscroll

滚动条滚动

onresize

窗口变大变小

onmove

窗口移动

onmousemove

在鼠标指针移到指定的对象时发生

注：网络事件不是 JavaScript 语言的核心——它们被定义成内置于浏览器的 JavaScript APIs。

代码语言：javascript复制
//在鼠标指针移到指定的元素后执行Javascript代码：
<div onmousemove="myFunction()">鼠标指针移动到这。</div>

select下拉列表的特性

  1. select对象默认存在一个用来存放option对象的数组
  2. select对象.options 获得option数组对象
  3. select对象.selectedIndex 获得当前访问的option对象在数组中的位置
  4. select对象.options.length=0;清空数组。
javascript jquery 编程算法 api

0 人点赞