JS学习总结（14）—

JS事件

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。事件发生时执行的函数类型是事件处理程序。

处理事件

onclick

1.单击指定的按钮时，事件触发，显示一个提醒弹出窗口。

    <button onclick="event()">点击处理事件</button><script>function enent() {alert("收到!");}</script>

-2. 给元素绑定事件监听

   <p id="demo">现在的时间</p><p id="date"></p><script>var x = document.getElementById("demo");x.onclick = function () {document.getElementById("date").innerHTML = new Date();}</script>

onload

当用户进入或离开页面时，触发 onload 和 onunload 事件。window.onload 事件可以用于在整个页面加载之后运行代码。

    <h1>onload效果</h1><script>window.onload = function () {alert("整个页面已经加载完成");}</script>

onchange

onchange 事件主要用于文本框。当文本框内的文本发生变化并且焦点从元素中丢失时，调用事件处理程序。

<input type="text" id="name" onchange="change()">
<script>
function change() {var x = document.getElementById("name");x.value= x.value.toUpperCase(); // 转成大写
}
</script>

事件监听

addEventListener() 方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。可以向一个元素添加许多事件处理程序。还可以将许多同一类型的事件处理程序添加到一个元素，即两个“点击”事件。
element.addEventListener(event, function [, useCapture]);

第一个参数是事件的类型（如“click”或“mouseover”）。
第二个参数是事件发生时要调用的函数。
第三个参数是一个布尔值，指定是否使用事件冒泡或事件捕获。此参数是可选的，将在下一课中进行说明。
可以使用removeEventListener删除事件监听。

以下创建一个事件处理程序，在执行后会自动删除。

<script>
var btn = document.getElementById("demo");
btn.addEventListener("click", myFunction);function myFunction() {alert(Math.random());btn.removeEventListener("click", myFunction);
}
</script>

JS学习总结（14）——Events事件相关推荐

node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
迷你MVVM框架 avalonjs 学习教程14、事件绑定
之前的章节许多示例代码也或多或少地展示了如何使用ms-click来绑定事件了.能直接在模板上绑定是事件,这也是静态模板与动态绑定的一大区别.ms-click不是简单的onclick的别名,它在内部屏蔽 ...
Ext JS学习第十六天事件机制event（一）
此文用来记录学习笔记: 休息了好几天,从今天开始继续保持更新,鞭策自己学习今天我们来说一说什么是事件,对于事件,相信你一定不陌生, 基本事件是什么?就类似于click.keypress.focus. ...
day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件.js的BOM.js的DOM ================================================================ ...
Vue.js 学习笔记十自定义按键事件
<div id="divApp"><input type="text" v-on:keyup=& ...
Vue.js 学习笔记五常用的事件修饰符
介绍几个常用的事件修饰符直接上代码 <div id="divApp"><div class="divColor" v-on:click=&q ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
千锋Node.js学习笔记
千锋Node.js学习笔记文章目录千锋Node.js学习笔记写在前面 1. 认识Node.js 2. NVM 3. NPM 4. NRM 5. NPX 6. 模块/包与CommonJS 7. 常 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
backbone.js学习笔记
backbone.js学习笔记之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还 ...

JS学习总结（14）——Events事件