JavaScript中DOM事件

DOM事件

什么是事件？
事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。主要有HTML事件和DOM事件。

HTML事件：直接在HTML元素标签内添加事件，执行脚本。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.btn{width:140px;height:30px;line-height: 30px;background:#00f;color:#fff;font-size:14px;text-align:center;border-radius:5px;cursor:pointer;margin-top:30px;}</style>
</head>
<body><input type="button" value="弹 出" onclick="alert('我是按钮')"><!--鼠标划过按钮时调用mouseoverFn的函数--><div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div><div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div><script>function mouseoverFn(btn,bgColor){// 鼠标划过按钮时，按钮的背景变为红色btn.style.background=bgColor;}function mouseoutFn(btn,bgColor){btn.style.background=bgColor;}</script>
</body>
</html>

这里获取变色按钮，可以不需要通过定位ID获取。这里用this。

 <div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>

我这个事件绑定在什么元素上，这里的this就代表谁。

DOM0级事件
1．通过DOM获取HTML元素
2.（获取HTML元素）.事件=执行脚本
语法:ele.事件=执行脚本
功能:在DOM对象上绑定事件
说明︰执行脚本可以是一个匿名函数，也可以是一个函数的调用。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.lock{width:140px;height:30px;line-height: 30px;background:#00f;color:#fff;font-size:14px;text-align:center;border-radius:5px;cursor:pointer;margin-top:30px;}.unlock{width:140px;height:30px;line-height: 30px;background:#666;color:#ccc;font-size:14px;text-align:center;border-radius:5px;cursor:pointer;margin-top:30px;}</style>
</head>
<body><div class="lock" id="btn">锁定</div><script>// 获取按钮var btn=document.getElementById("btn");function clickBtn(){console.log(this);//测试this是不是像之前说的一样alert("我是按钮");}// 点击按钮调用clickBtn这个函数btn.onclick=clickBtn;//btn.οnclick=clickBtn();假如我这样写不点击也会调用，知道原理吗// 给按钮绑定事件,this是对该DOM元素的引用btn.onclick=function(){// 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色if(this.className=="lock"){this.className="unlock";this.innerHTML="解锁";}else{this.className="lock";this.innerHTML="锁定";}/*第2种：其实一样if(this.innerHTML=="锁定"){this.className="unlock";this.innerHTML="解锁";}else{this.className="lock";this.innerHTML="锁定";}
*/}</script>
</body>
</html>

不建议使用HTML事件原因:
1.多元素绑定相同事件时，效率低。
2.不建议在HTML元素中写JavaScript代码。

注意：js代码放的顺序不同，可能会出现报错，比如出现在定义之前。
是一行一行解释的。
此时可以加一个onload事件，页面全部加载时才执行。此时js放在任何处都可以执行了。

 window.onload=function(){// 获取boxvar box=document.getElementById("box");var clicked=function(){alert('我被点击了');}box.onclick=clicked;}

onfocus事件，获取焦点时触发
onblur事件，失去焦点时触发

<head><meta charset="UTF-8"><title>Document</title><style>.box{padding:50px;}.left,.tip{float:left;}.left{margin-right:10px;}.tip{display:none;font-size:14px;}</style><script>window.onload=function(){// 获取文本框和提示框var phone=document.getElementById("phone"),tip=document.getElementById("tip");// 给文本框绑定激活的事件phone.onfocus=function(){// 让tip显示出来tip.style.display='block';}// 给文本框绑定失去焦点的事件phone.onblur=function(){// 获取文本框的值,value用于获取表单元素的值var phoneVal=this.value;// 判断手机号码是否是11位的数字// 如果输入正确，则显示对号图标，否则显示错号图标if(phoneVal.length==11 && isNaN(phoneVal)==false){tip.innerHTML='<img src="img/right.png">';}else{tip.innerHTML='<img src="img/error.png">';}}}</script>
</head>
<body><div class="box"><div class="left"><input type="text" id="phone" placeholder="请输入手机号码"></div><div class="tip" id="tip">请输入有效的手机号码</div></div>
</body>

onchange事件：域的内容改变时发生改变
做个改变网页背景颜色的小栗子

<head><meta charset="UTF-8"><title>Document</title><script>// 页面加载window.onload=init;// 初始化function init(){// 获取下拉菜单var menu=document.getElementById("menu");// 给菜单绑定change事件,一般作用域select或checkbox或radiomenu.onchange=function(){// 获取当前选中的值//var bgcolor=this.value;var bgcolor=menu.options[menu.selectedIndex].value;// 如果bgcolor为空，则下面的脚本将不执行// if(bgcolor=="")return;// 设置body的背景色// 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色if(bgcolor==""){document.body.style.background="#fff";}else{document.body.style.background=bgcolor;}}}</script>
</head>
<body><div class="box">请选择您喜欢的背景色：<select name="" id="menu"><option value="">请选择</option><option value="#f00">红色</option><option value="#0f0">绿色</option><option value="#00f">蓝色</option><option value="#ff0">黄色</option><option value="#ccc">灰色</option></select></div>
</body>

onsubmit事件不是加在按钮上，而是表单上。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>body{height:2000px;}.box{width:200px;height:200px;background:#f00;overflow:auto;}</style>
</head>
<body><div class="box" id="box"><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p><p>拖动</p></div><script>var box=document.getElementById("box");// 绑定按下的事件box.onmousedown=function(){console.log("我被按下了");}// 绑定移动的事件box.onmousemove=function(){console.log("我被移动了");}// 绑定松开的事件box.onmouseup=function(){console.log("我被松开了");}// 绑定点击的事件box.onclick=function(){console.log("我被点击了");}// 浏览器窗口尺寸发生改变时window.onresize=function(){console.log("我的尺寸被改变了");}// 拖动滚动条window.onscroll=function(){console.log("我被拖动了");}box.onscroll=function(){console.log("我是DIV的滚动条");}</script>
</body>
</html>

event代表事件的状态，如触发event对象的元素，鼠标的位置及状态等。

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>.text span{font-weight:bold;color:#f00;}em{font-style:normal;}b{font-weight:normal;}</style>
</head>
<body><div><p class="text"><b id="showcount">您还可以输入</b><span id="totalbox"><em id="count">30</em>/30</span></p><div class="input"><textarea name="" id="text" cols="70" rows="4"></textarea></div></div><script>// 获取文本框及其他元素var text=document.getElementById("text");var total=30;var count=document.getElementById("count");var showcount=document.getElementById("showcount");var totalbox=document.getElementById("totalbox");// 绑定键盘事件document.onkeyup=function(){// 获取文本框值的长度var len=text.value.length;// 计算可输入的剩余字符var allow=total-len;var overflow=len-total;// 如果allow小于0if(allow<0){showcount.innerHTML="您已超出"+overflow;totalbox.innerHTML='';}else{showcount.innerHTML='您还可以输入';totalbox.innerHTML='<em id="count">'+allow+'</em>/30';}}</script>
</body>
</html>

NEXT:
接下来学浏览器对象模型BOM，提供了Window，Location,History,Screen,Navigator等对象，他们的方法和属性可以对浏览器窗口进行访问和操作，使js有能力与浏览器对话。

每日一词：
trigger/arouse 替换cause

JavaScript中DOM事件相关推荐

JavaScript学习笔记06【高级——JavaScript中的事件】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
JavaScript中DOM操作
Web前端基础修炼 HTML基本标签详解与运行截图 CSS基本操作详解及截图演示 JavaScript基础(ECMAScript) JavaScript中DOM操作 JavaScript中BOM操作 ...
JavaScript中DOM对象的详解
*** JavaScript中DOM对象的详解*** DOM对象:Document Object Model,文档对象模型.也称为document(文档对象),是HTML页面当前窗体的内容,是连接JS ...
day29—JavaScript中DOM的基础知识应用
转行学开发,代码100天--2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...
【前端学习】前端学习第十五天：JavaScript中的事件模型
在各种浏览器中存在三种事件模型:原始事件模型.DOM事件模型和IE事件模型: 一.原始事件模型: 原始事件模型被所有浏览器支持: 在原始事件模型中.事件一旦发生就直接调用事件处理函数,事件不会向别的对 ...
12.在JavaScript中的事件模型如何理解?
一.事件与事件流 javascript中的事件,可以理解就是在HTML文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件.鼠标事件.自定义事件等由于DOM是一个树结构,如果在 ...
前端技术学习第四讲：JavaScript中DOM和BOM
JavaScript中DOM和BOM 一.DOM和BOM DOM:文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与 ...
浅谈JavaScript中的事件
事件在javascript中是响应用户的一种基本操作,本文列举了两种javascript中的事件模型及其绑定的方式,希望能对你的学习带来一点帮助.这些都是非常基础的但或许其中有你所遗漏.(以下事件均针 ...
java基础66 JavaScript中的事件、localtion对象、screen对象（网页知识）
1.JavaScript中的事件注册 1.1.事件的注册方式方式1:直接在html元素上注册<body onLoad="ready()"></body > ...

JavaScript中DOM事件

DOM事件

JavaScript中DOM事件相关推荐

最新文章

热门文章