事件 --------可以在触发浏览器的行为

1.窗口事件(失去焦点事件以及获得焦点事件)：

/*  当窗口失去焦点时 */window.onblur = function () {console.log('窗口失去了焦点！');}/*  当窗口获得焦点时 */window.onfocus = function () {console.log('窗口获得了焦点！');}/* 窗口加载完成后*/window.onload =function () {console.log("窗口加载完成！")}/*  窗口大小改变时 事件 */window.onresize = function () {console.log("窗口大小正在发送改变");}

窗口获得焦点

鼠标在窗口内

窗口失去焦点

鼠标在窗口外

窗口加载成功

一打开页面显示

窗口大小改变

可以看到我缩小了页面

var userCode = document.getElementById("userCode");/*  获得焦点时 改变背景色 */userCode.onfocus = function () {this.style.backgroundColor = 'green';}/*  失去焦点时 改变背景色 */userCode.onblur = function () {this.style.backgroundColor = 'red';}

获得焦点焦点变绿色

失去焦点变红色

2.表单提交事件

    var myForm = document.getElementById("myForm");/* 为表单绑定提交事件 */myForm.onsubmit = function () {let userCode = document.getElementById("userCode").value;let userPwd = document.getElementById("userPwd").value;var reg = /^[A-Za-z0-9]{6,12}$/;console.log("触发了表单的提交事件！");if (userCode == '') {alert("账号不能为空");} else if (userCode.length < 6 || userCode.length > 12) {alert("账号长度错误");} else if (!reg.test(userCode)) {alert("账号只能为字母与数字!");} else if (userPwd == '') {alert("密码不能为空");} else if (userPwd.length < 6 || userPwd.length > 12) {alert("密码长度错误");} else if (!reg.test(userPwd)) {alert("密码只能为字母与数字!");} else {return true;}// return true:可以提交  false 不能提交return false;}

3.键盘事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0px;padding: 0px;}.divStyle {width: 100px;height: 100px;background: red;position: absolute;}</style>
</head>
<body>
<div id="box" class="divStyle"></div><script>/!*  键盘按下事件 *!/window.onkeydown = function (event) {/!* 解决兼容问题 *!/event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode == 13) {console.log('按下了回车');}}/* onkeyup： 当松开按键时 触发 */window.onkeyup = function (event) {event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode == 13) {console.log('按下了回车');}}/* 键盘 按下并松开时*/window.onkeypress = function (event) {event = event || window.event;console.log("键盘按下了" + event.keyCode);if (event.keyCode == 13) {console.log('按下了回车');}}var box = document.getElementById("box");document.onkeydown = function (event) {event  = event ||window.event;switch (event.keyCode) {case 37:box.style.left = box.offsetLeft - 10+'px';break;case 39:box.style.left = box.offsetLeft + 10+'px';break;case 38:box.style.top = box.offsetTop - 10+'px';break;case 40:box.style.top = box.offsetTop + 10+'px';break;}}
</script></body>
</html>

键盘摁下时

键盘松开时

4.鼠标事件（单机，双击，按钮摁下，按钮运行时）

 window.onclick = function () {console.log("鼠标单击事件");}window.ondblclick = function () {console.log("鼠标双击事件");}window.onmousedown = function () {console.log("当鼠标按钮按下运行时");}window.onmouseup = function () {console.log("当鼠标按钮运行时");}

4.2鼠标移入移出事件以及鼠标滚轮运行事件

    /* onmouseover 当鼠标移入时  不能阻止冒泡  */function divMouseover() {console.log("当鼠标进入了当前的DIV");}/* onmouseout : 当鼠标移出时  不能阻止冒泡*/function divMouseout() {console.log("当鼠标移出了当前的DIV");}document.getElementById("box").onscroll = function () {console.log("当滚动元素的滚动条运行时");}/* 当鼠标的滚轮运行时 */window.onmousewheel=function (){console.log("当鼠标的滚轮运行时");}

[JavaScript]事件相关推荐

javascript事件列表解说
javascript事件列表解说事件浏览器支持解说一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown ...
javascript --- 事件托付
javascript 之事件托付长处:1.提高性能(仅仅须要对父级进行操作,子节点相同会拥有其相关属性和方法) 2.对于新加入的事件.也让其拥有父级事件的属性 <!doctype html& ...
【探讨】javascript事件机制底层实现原理
前言又到了扯淡时间了,我最近在思考javascript事件机制底层的实现,但是暂时没有勇气去看chrome源码,所以今天我来猜测一把我们今天来猜一猜,探讨探讨,javascript底层事件机制是如 ...
javaScript事件（二）事件处理程序
一.事件二.事件流以上内容见:javaScript事件(一)事件流三.事件处理程序前面提到,事件是用户或浏览器自身执行的某种动作,如click,load和mouseover都是事件的名字.响应 ...
onpaste事件不生效_从实际开发中来看JavaScript事件循环的使用场景
前言: 本文是介绍结合DOM事件流和JavaScript事件循环解决一个工作中的实际问题的过程,很多东西不只是面试的时候才会用得到文中涉及到的代码demo地址:drag-and-eventloop ...
javascript 事件对象
btn.onclick = function (event) {// event 就是事件对象var e = event || window.event; // window.event是兼容低版本I ...
JavaScript事件详解-jQuery的事件实现（三）
正文本文所涉及到的jQuery版本是3.1.1,可以在压缩包中找到event模块.该篇算是阅读笔记,jQuery代码太长.... Dean Edward的addEvent.js 相对于zepto的e ...
JavaScript 事件入门知识
JavaScript事件是由访问Web页面的用户引起的一系列操作; 例如:用户点击;当用户执行某些操作的时候,再去执行一系列代码; 一事件介绍事件一般是用于浏览器和用户操作进行交互;最早是IE和N ...
JavaScript事件绑定
本文介绍一些JavaScript事件绑定的常用方法及其优缺点,同时在最后展示一个由 Dean Edwards 写的一个比较完美的事件绑定方案. 传统方式 element.onclick = funct ...
我理解的javascript事件循环(一)
javascript事件循环分为2种:一种是浏览器端事件循环,一种是node端事件循环. 此文只是捋一捋我对浏览器端事件循环的理解. 前言我们都知道 JavaScript 是一门单线程语言,这意味着 ...

[JavaScript]事件

事件 --------可以在触发浏览器的行为

1.窗口事件(失去焦点事件以及获得焦点事件)：

2.表单提交事件

3.键盘事件

4.鼠标事件（单机，双击，按钮摁下，按钮运行时）

4.2鼠标移入移出事件以及鼠标滚轮运行事件

[JavaScript]事件相关推荐

最新文章

热门文章