前端之JS事件events

事件（events)
- 常用事件
- 绑定事件的方式
- - 函数绑定 -- 推荐使用
  - 绑定匿名函数
  - 行内绑定 -- 不要用
事件对象
- 阻止默认行为
- 事件冒泡及捕获
事件委托
页面绑定回车键

事件（events)

个人理解: 元素绑定事件, 触发行为.

事件: 绑定某种行为, 当行为触发时, 运行指定的代码(函数).

事件是在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作（列如：运行一些代码）的机制，

每个可用的事件都会有一个事件处理器，也就是事件触发时会运行的代码块.也叫事件监听器. 严格地来说这块代码既监听也处理事件。监听器留意事件是否发生，然后处理器就是对事件发生做出的回应。

常用事件

按钮置于焦点或解除焦点:
btn.onfocus
btn.onblur

按钮双击:
btn.ondblclick

键盘按钮按下并松开, 按下, 松开:
window.onkeypress, window.onkeydown, window.onkeyup

绑定事件的方式

函数绑定 – 推荐使用

绑定, 接触:
addEventListener() 和removeEventListener()

<body><button>Change background color</button>
</body><script>const btn = document.querySelector('button');function random(number) {return Math.floor(Math.random() * (number + 1));}function bgChange() {const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;}// 为元素的点击事件绑定行为btn.addEventListener('click', bgChange);
</script>

removeEventListener()移除事件监听器。例如:

    btn.removeEventListener('click', bgChange);

在大型的、复杂的项目中非常有用

绑定匿名函数

eg: 随机背景色

<body><button>Change background color</button>
</body>
<script>const btn = document.querySelector('button');function random(number) {return Math.floor(Math.random() * (number + 1));}btn.onclick = function() {const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;}
</script>

这功能好漂亮, 有意思.

行内绑定 – 不要用

<body><button onclick="bgChange()">Change background color</button>
</body>
<script>function random(number) {return Math.floor(Math.random() * (number + 1));}function bgChange() {const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';document.body.style.backgroundColor = rndCol;}
</script>

这样会产生代码的相互污染, 不利于后期修改.

事件对象

函数内部的指定名称的参数.
它被自动传递给事件处理函数，以提供额外的功能和信息。

使用时, 可以直接绑定爸爸(父)元素
网页实例(写法看着好舒服)

事件对象 e 的target属性始终是事件刚刚发生的元素的引用。

阻止默认行为

e.preventDefault();

<form><div><label for="fname">First name: </label><input id="fname" type="text"></div><div><label for="lname">Last name: </label><input id="lname" type="text"></div><div><input id="submit" type="submit"></div>
</form>
<p></p>

const form = document.querySelector('form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const submit = document.getElementById('submit');
const para = document.querySelector('p');form.onsubmit = function(e) {if (fname.value === '' || lname.value === '') {e.preventDefault();para.textContent = 'You need to fill in both names!';}
}

非常弱的表单验证

事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么。
冒泡: 从子元素到根元素 – stopPropagation()的函数,阻止冒泡
捕获: 从根元素到子元素

事件委托

冒泡还允许我们利用事件委托——这个概念依赖于这样一个事实,如果你想要在大量子元素中单击任何一个都可以运行一段代码，您可以将事件监听器设置在其父节点上，而不是每个子节点单独设置事件监听器。

一个很好的例子是一系列列表项，如果你想让每个列表项被点击时弹出一条信息，您可以将click单击事件监听器设置在父元素

上，这样事件就会从列表项冒泡到其父元素
- 上。

页面绑定回车键

window.addEventListener('keydown', event => {if (event.keyCode === 13) show();
})

网页实例
牛刀小试 – 图库

前端之JS事件events相关推荐

前端面试 - JS总结（1） - 基础 (数据类型, 事件与函数, 原型链)
你不走出舒适圈,又怎么知道自己多坚强?! 前端面试 - JS总结(1) - 基础 (数据类型, 事件与函数, 原型链) 前端面试 - JS总结(2) - ES6 (let, 箭头函数, this) 前 ...
前端(四)移动端js事件、bootstrap-学习笔记整理
移动端js事件移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: touchstart: //手指放到屏幕上时触发 touchmov ...
前端：JS/28/CSS DOM动态样式（style对象，style 对象属性与CSS属性的转换），Event DOM，事件对象简介（DOM和IE中的Event对象），实例：点出满天小星星
CSS DOM动态样式使用JS操作CSS中的各个属性: JS只能操作或修改行内样式,如:imgObjstyle.border = "1px solid red"; 对于类样式,通 ...
面向面试题的前端学习-js篇（自用，持续完善中）
前言:初心是记录面试题,慢慢由每个知识点引伸出去,逐渐查缺补漏,构建出更完善的前端知识系统. 题目来源:牛客网 gitnub 目录 HTTP协议 get请求传参长度的误区补充get和post请求在缓 ...
前端学习--js.2
写一个通用的事件侦听器函数 markyun.Event = { //页面加载完成后 readyEvent :function(fn) { if(fn==null) { fn=document; } v ...
如何构建自定义 Node.js 事件发射器
事件是具有软件或硬件意义的动作. 它们是由于用户活动(例如鼠标单击或击键)或直接来自系统(例如错误或通知)而发出的. JavaScript 语言使我们能够通过在事件处理程序中运行代码来响应事件. 由于 ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
好程序员web前端分享JS引擎的执行机制
好程序员web前端分享JS引擎的执行机制,请先着重牢记两点!JS是单线程语言. JS的EventLoop是JS的执行机制.深入了解JS的执行,就等于深入了解JS里的eventloop. 1.灵魂三问: ...

前端之JS事件events

前端之JS事件events

事件（events)

常用事件

绑定事件的方式

函数绑定 – 推荐使用

绑定匿名函数

行内绑定 – 不要用

事件对象

阻止默认行为

事件冒泡及捕获

事件委托

页面绑定回车键

前端之JS事件events相关推荐

最新文章

热门文章