利用javaScript处理常用事件详解
JS事件指再浏览器窗体或者HTML元素上发生的，乐意触发JS代码块运行的行为，下面，我们一起来看看相关事件。
1.窗体事件
例如 onload事件：当页面完全加载完成之后（包括图像，js文件，css文件等）该事件就会被触发。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<script>
window.onload=function(){
var mydiv = document.getElementById("mydiv");
alert("页面加载完成，mydiv的内容是："+mydiv.innerText);
}
</script>
</head>
<body>
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
对此还有：
resize事件：当调整浏览器的窗口到一个新的宽度或者高度时，就会触发resize事件。
scroll事件：文档或者浏览器窗口被滚动期间会触发scroll事件。
焦点事件：指元素对焦点的获得与失去，如文本框选中或者取消选中。
2.鼠标事件
例如当鼠标单击左键，会发生onclick事件：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style>
html,body{
width: 100%;
height: 100%;
}
</style>
<script>
function mouseclick(){
alert('页面被单击');
}
</script>
</head>
<body onclick="mouseclick()">
<div id='mydiv'>我是花狗，花狗的花，花狗的狗。</div>
</body>
</html>
注意：将html和body 的样式表都设置为width: 100%，height: 100%，否则onclick无效。
3.键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>花狗在线</title>
<style>
html,body{
background-color: aquamarine;
width: 100%;
height: 100%;
}
</style>
<script>
function keydown(event){
if(event.keyCode==37){
alert(event.keyCode +'你按下了左键');
}
if(event.keyCode==38){
alert(event.keyCode +'你按下了上键');
}
if(event.keyCode==39){
alert(event.keyCode +'你按下了右键');
}
if(event.keyCode==40){
alert(event.keyCode +'你按下了下键');
}
}
</script>
</head>
<body onkeydown="keydown(event)">
</body>
</html>
4.常用事件方法（包括窗口事件，鼠标事件，键盘事件，文本事件）
| 方法 | 描述 |
| onabort | 图像加载被中断 |
| onblur | 元素失去焦点 |
| onchange | 用户改变域的内容 |
| onclick | 鼠标单击某个对象 |
| ondblclick | 鼠标双击某个对象 |
| onerror | 当加载文档或者图像时发生某个错误 |
| onfocus | 元素获得焦点 |
| onkeydown | 某个键盘的键被按下 |
| onkeypress | 某个键盘的键被按下或者按 |
| onkeyup | 某个键盘的键被松开 |
| onload | 某个页面或者图像被完成加载 |
| onmousedown | 某个鼠标按键被按下 |
| onmousemove | 鼠标被移动 |
| onmouseout | 鼠标从某元素移开 |
| onmouseover | 鼠标被移到某元素之上 |
| onmouseup | 某个鼠标按键被松开 |
| onreset | 重置按钮被单击 |
| onresize | 窗口或者框架被调整尺寸 |
| onselect | 文本被选定 |
| onsubmit | 提交按钮被单击 |
| onunload | 用户退出页面 |
5.事件冒泡和事件捕捉
事件发生就会产生事件流，当一个HTML元素产生一个事件时，该事件会在元素节点和根节点之间按特定的顺序转播，类似于递和归。事件触发方式如下：addEventListener(“click”,“doSomething”,“ture”); 若第三个参数时ture是事件捕捉，若为false，则为事件冒泡，默认是冒泡。
捕捉型事件传播：
冒泡型事件传播
到此这篇关于利用javaScript处理常用事件详解的文章就介绍到这了,更多相关js处理常用事件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
JS事件绑定的常用方式实例总结
本文实例讲述了JS事件绑定的常用方式.分享给大家供大家参考,具体如下: 常用的事件绑定的几种方式有三种: 直接在 dom 元素上进行绑定. 用 on 绑定. 用 addEventListener.attachEvent 绑定. 一.直接在 dom 元素上进行绑定 <input id="btn1" type="button" onclick="test();" /> 二.用 on 绑定 兼容性:在IE,FF,Chrome,Safari,
-
js事件触发操作实例分析
本文实例讲述了js事件触发操作.分享给大家供大家参考,具体如下: click包含了(mousedown,mouseup)叫做MouseEvents: keydown,keypress,keyup之流叫做UIEvents; focus,load,scroll,submit之流叫做HtmlEvents. MutationEvents,突变事件,往往用于对DOM对象的事件监听. DOMNodeRemoved:当Node被删除时 DOMAttrModified:元素的属性发生改变时 我们来学一学事件触发
-
javascript 处理事件绑定的一些兼容写法
绑定事件 复制代码 代码如下: var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() { obj["e"
-
JS事件循环机制event loop宏任务微任务原理解析
首先看一段代码 async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2') 正确的打印顺序应该是:正常1,f2 ,正常2,f1,定时器 为什么会出现这样打印顺序呢 首先javascript是一门单线程语言,在最新的
-
Node.js事件的正确使用方法
前言 事件驱动的编程变得流行之前,在程序内部进行通信的标准方法非常简单:如果一个组件想要向另外一个发送消息,只是显式地调用了那个组件上的方法.但是在 react 中用的却是事件驱动而不是调用. 事件的好处 这种方法能够使组件更加分离.在我们继续写程序时,会识别整个过程中的事件,在正确的时间触发它们,并为每个事件附加一个或多个事件监听器,这使得功能扩展变得更加容易.我们可以为特定事件添加更多的 listener,而不必修改现有的侦听器或触发事件的应用程序部分.我们所谈论的是观察者模式. 设计一个事
-
JS事件流与事件处理程序实例分析
本文实例讲述了JS事件流与事件处理程序.分享给大家供大家参考,具体如下: 1.事件流:从页面中接收事件的顺序 1.1 IE :事件冒泡流 1.2 Netscape :事件捕获 1.3 DOM事件流 :事件捕获阶段--事件目标阶段--事件冒泡阶段 DOM2级事件规定 :捕获阶段不会涉及目标事件. 2.事件处理程序 事件 :用户或者浏览器自身执行的 某种动作 事件处理程序 :响应某个事件的 函数 . 2.1 HTML事件处理程序 用一个与该事件处理程序同名的HTML特性来指定. 2.1.1包含要执行
-
js事件on动态绑定数据,绑定多个事件的方法
一.on('clcik')与$('').clcik()方法的区别: on('clcik'):事件委托机制 // 在body元素上绑定click事件处理函数handler,如果这个click事件是由其后代的P元素触发的,就执行handler $(document.body).on("click", "p", handler); 事件委托机制就是,我们不为每个P元素直接绑定click事件处理函数,而是委托给其某个公共的祖辈元素(此处示例中为document.body),
-
js事件机制----捕获与冒泡机制实例分析
本文实例讲述了js事件机制----捕获与冒泡机制.分享给大家供大家参考,具体如下: 先从事件绑定机制说起, 事件绑定机制通过绑定方法addEventListener()实现, 语法格式如下: element.addEventListener(event, function, useCapture) 参数值 参数 描述 event 必须.字符串,指定事件名. 注意: 不要使用 "on" 前缀. 例如,使用 "click" ,而不是使用 "onclick&qu
-
利用javaScript处理常用事件详解
JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件 例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o
-
JavaScript之BOM构成和常用事件详解
目录 一.BOM 2.BOM的构成 二.window对象的常用事件 1.窗口加载事件 2.调整窗口大小事件 总结 一.BOM 1.什么是BOM? BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window. BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性. BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览
-
JavaScript的DOM事件详解
目录 1.事件对象 2.事件流 3.事件委托 4.综合案例 总结 1.事件对象 [获取事件对象] 什么是事件对象:是个对象,这个对象里有事件触发时的相关信息. 事件对象的语法 元素.addEventListener('click',function(e){}) [事件对象常用属性] type:获取当前的事件类型 clientX/clientY:获取光标相对于浏览器可见窗口左上角的位置 offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置 key:用户按下的键盘的值 [案例]:
-
javaScript实现滚动条事件详解
本文实例为大家分享了js实现滚动条事件的具体代码,供大家参考,具体内容如下 代码: <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <
-
JavaScript onblur与onfocus事件详解
html页面中,诸如按钮.文本框等可视元素都具有拥有和失去焦点的事件,这些事件在响应鼠标或键盘动作时都可激发预设的操作.本文以文本框获得和失去焦点为例简单讲解onfocus和onblur的应用. 一. onfocus(获得焦点事件) 当一个文本框获得焦点时,它里面的文本就像"好123"网站上的百度搜索输入框那样全部被自动选中,这样的操作可以利用onfocus来实现. 以下的文本框,当鼠标指针移过去时,里面的文字全部被选中: 请输入网址 这是怎么做的呢?看以下代码及解释:
-
javascript数据代理与事件详解分析
目录 数据代理与事件 回顾Object.defineProperty方法 何为数据代理 Vue中的数据代理 事件的基本使用 事件的修饰符 键盘事件 数据代理与事件 星光不负赶路人,满身花香蝶自来 回顾Object.defineProperty方法 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>回顾Object.defineproperty方法<
-
C#Button窗体常用属性及事件详解
1.常用属性 Name:名称: BackColor:设置控件背景颜色: Enabled:是否可用: FlayStyle:控件样式: Image:设置控件图像: ImageAlign:图像对齐方式: ImageList:图像ImageList索引值: Location:坐标: Size:大小: Tabindex:控件顺序索引: Text:文本: TextAlign:文本对齐方式: Visible:控件是否可见: 2.控件事件: Click:单击事件: 知识点扩充: 在真实的C#开发场景中,我们对于
-
redis配置文件中常用配置详解
此次安装的版本为: 5.0.3 [root@localhost local]# redis-server --version Redis server v=5.0.3 sha=00000000:0 malloc=jemalloc-5.1.0 bits=64 build=afabdecde61000c3 打开redis.cof NETWORK # 指定 redis 只接收来自于该IP地址的请求,如果不进行设置,那么将处理所有请求 bind 127.0.0.1 #是否开启保护模式,默认开启.要是配置
-
微信小程序 获取手机号 JavaScript解密示例代码详解
当我们在开发微信小程序中,有一个常用的功能,就是获取用户的手机号,然后一键登入小程序,那么手机号如何获取呢?请认真看完本文,保证可以获取到用户的手机号. 刚开始开发微信小程序的时候,想着实现手机验证码登入,后来查阅资料得知,发给用户的短信是要自己付费的.后来想想,微信获取用户的手机号一样可以保证手机号码的真实性,因为手机号既然可以绑定微信,那么肯定是被严格核验过的,然后就开始了获取手机号之旅,网上教程有很多,但不知什么原因,都是会少一些内容,有的只有前端代码,没有后端:有的后端代码是PHP,不是
-
JavaScript动画函数封装详解
目录 一.动画函数原理 二.动画函数简单封装 三. 动画函数给不同元素记录不同定时器 四.缓动效果原理 五. 动画函数在多个目标值之间移动 六.动画函数添加回调函数 一.动画函数原理 核心原理:通过定时器setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 注意此元素需要添加定位,才能使用element.style.left 如下所示: 给定一个盒子,让其慢慢移动到300px的位置. 代