JS DOM事件学习
DOM查找方法：
document.getElementByID("id")
document.getElementsByTagName("tag") 返回一个对所有tag标签引用的集合
给元素设置样式：
ele.style.styleName=styleValue 设置ele元素的css样式。属性是减号连接的复合形式时必须要转换为驼峰形式。如font-size变为fontSize。使用tagname需要用循环for设置。
innerHTML：
返回ele元素开始和结束标签之间的HTML内容
ele.innerHTML=‘html’
className:
ele.className ="cls" 添加或获取类，替换元素本身的类。
获取和设置属性：
获取标签属性语法：
DOM对象.属性，如p.id。除class属性和自定义属性用getAttribute。
p.getAttribute("class")
设置属性：
ele.setAttribute（“attribute”，value）
删除属性：
ele.removeAttribute（“attribute”）
1.键盘事件
onkeydown，onkeyup，onkeypress
<!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小于0
if(allow<0){
showcount.innerHTML="您已超出"+overflow;
totalbox.innerHTML='';
}else{
showcount.innerHTML='您还可以输入';
totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
}
}
</script>
</body>
</html>
2.鼠标事件
onmouseover事件
<!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>
onclick事件
<!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(){
alert("我是按钮");
}
// 点击按钮调用clickBtn这个函数
btn.onclick=clickBtn;
// 给按钮绑定事件,this是对该DOM元素的引用
/*btn.onclick=function(){
// 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
if(this.className=="lock"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
if(this.innerHTML=="锁定"){
this.className="unlock";
this.innerHTML="解锁";
}else{
this.className="lock";
this.innerHTML="锁定";
}
}*/
</script>
</body>
</html>
onload事件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 页面加载时执行，unload页面卸载
window.onload=function(){
// 获取box
var box=document.getElementById("box");
var clicked=function(){
alert('我被点击了');
}
box.onclick=clicked;
}
</script>
</head>
<body>
<div id="box">这是一个DIV</div>
</body>
</html>
onblur，onfocus事件（判断手机号码是否符合规定）
<!doctype html>
<html lang="en">
<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>
</html>
onchange事件（更改背景颜色）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
// 页面加载
window.onload=init; // 初始化
function init(){
// 获取下拉菜单
var menu=document.getElementById("menu");
// 给菜单绑定change事件,一般作用域select或checkbox或radio
menu.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>
</html>
onmousedown，onmousemove，onmouseup，onclick，onresize，onscroll事件
<!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>
JS DOM事件学习的更多相关文章
- js的事件学习笔记
目录 0.参考 1.事件流 冒泡传播 事件捕获 2.事件绑定--onclick接口 onclick类的接口,只能注册一个同类事件 onclick类的接口,使用button.onclick = null ...
- 【总结整理】JavaScript的DOM事件学习（慕课网）
事件:在文档或者浏览器窗口中发生的一些,特定的交互瞬间 HTML和JavaScript的交互通过事件 来实现 比如:1.滚动条向下滑动,加载图片 2.图片轮播,鼠标由2-5页调换 本章内容1.理解事件 ...
- JS学习笔记（一）DOM事件和监听
将事件绑定到元素身上的三种方法: 1.HTML事件处理程序(不推荐使用) 1 <a onclick="hide()"> 2.传统的DOM事件处理程序 即在目标DOM事件 ...
- 《JS高程》事件学习笔记
事件:文档或浏览器窗口中发生的一些特定的交互瞬间,也即用户或浏览器自身执行的某种动作. -------------------------------------------------------- ...
- JavaScript学习总结【10】、DOM 事件
DOM 事件是 JS 中比较重要的一部分知识,所谓事件,简单理解就是用户对浏览器进行的一个操作.事件在 Web 前端领域有很重要的地位,很多重要的知识点都与事件有关,所以学好 JS 事件可以让我们在J ...
- js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- 漫谈js自定义事件、DOM/伪DOM自定义事件
一.说明.引言 我JS还是比较薄弱的,本文的内容属于边学边想边折腾的碎碎念,可能没什么条理,可能有表述不准确的地方,可能内容比较拗口生僻.如果您时间紧迫,或者JS造诣已深,至此您就可以点击右侧广告(木 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- 系统学习DOM事件机制
本文将从以下几个方面介绍DOM事件: 基本概念:DOM事件的级别 DOM事件模型,事件流 描述DOM事件捕获的具体流程 Event对象的常见应用 自定义事件 DOM事件的级别 //DOM0 eleme ...
随机推荐
- Nginx开启gzip压缩解决react打包文件过大
用create-react-app创建的react应用打包之后的build js有1M之多. 采用gzip打包传输,可以节约70%左右的带宽 nginx采用gzip打包方式 在nginx配置中添加如下 ...
- recurrent model for visual attention
paper url: https://papers.nips.cc/paper/5542-recurrent-models-of-visual-attention.pdf year: 2014 abs ...
- 题解-COCI-2015Norma
Problem SPOJ-NORMA2 & bzoj3745 题意概要:给定一个正整数序列 \(\{a_i\}\),求 \[\sum_{i=1}^n\sum_{j=i}^n(j-i+1)\mi ...
- 【codechef】FN/Fibonacci Number
题意 给出 c 和 P ,求最小的非负整数 n 使得 \(Fib(n)=c(mod~ P)\) 其中 P 是质数且 模 10 等于一个完全平方数(也就是说 P 的末位是个完全平方数,那么只能是 1 或 ...
- php中trait的使用
1.php中的trait是啥? 看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait是一种代 ...
- MySQL Server 的安装方法及简要步骤
闲扯两句: 小弟不才,由于缺乏明确的职业规划,初毕业的那两年从事的是网络管理工作,接触最多的是计算机硬件和网络设备. 近几年才开始转向DB行业,最初是自学,过程中走了不少弯路,后来参加的专职的DBA培 ...
- linux 相关（ 随时更新）
Linux笔记: 本地文件传到服务器上: scp -P8022 /文件路径 niehaidong@101.201.75.57:/tmp/ 从服务器上到本地 scp -P8022 niehaidong ...
- topological sort~~~~初学
今天讲了topological sort 问题: 判环:记录入队的点数,若<n则有环,可证: 算法:o(n):queue or stack,而不是o(n^2)枚举 #. 关系运算图(vijos ...
- mysql explain结果含义
在SQL语句前面加上EXPLAIN即可 各字段含义 id SELECT识别符.这是SELECT的查询序列号 select_type SELECT类型,可以为以下任何一种: SIMPLE:简单SELEC ...
- word2vec并行实现小记
word2vec能将文本中出现的词向量化,其原理建立在Mikolov的博士论文成果及其在谷歌的研究经验的基础上.与潜在语义分析(Latent Semantic Index, LSI).潜在狄立克雷分配 ...