0
点赞
收藏
分享

微信扫一扫

JavaScript小技能:事件


引言

JavaScript小技能:事件_事件对象

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

I 预备知识

1.1 箭头函数

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

1.2 事件模型

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

1.3 事件冒泡及捕获

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

JavaScript小技能:事件_前端_02

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

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

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

1.4 事件对象

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

  1. 通过事件对象获得事件源

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()​​函数来修复事件冒泡问题

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

video.onclick = function(e) {
e.stopPropagation();
video.play();
};

1.5 阻止默认行为

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

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. 以事件处理程序属性形式关联事件处理器

//onclick、onmouseover
document.querySelector('html').onclick = function() {
alert('别戳我,我怕疼。');
}

  1. 通过DOM Level 2 Events 函数​​addEventListener()​​关联事件处理器

(只支持到 Internet Explorer 9)

可以在一个元素上多次调用​​addEventListener('click', function() { ... })​​,并可在第二个参数中指定不同的函数。

对于事件处理程序属性来说,这是不可能的,因为后面任何设置的属性都会尝试覆盖较早的属性。

// 
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表单提交​​ notallow=" return Function"​

onchange

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

onkeyup

键盘弹起事件

onkeydown

键盘按下事件

onscroll

滚动条滚动

onresize

窗口变大变小

onmove

窗口移动

onmousemove

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

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

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

see also

公众号:iOS逆向

select下拉列表的特性

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

相关推荐

0 条评论