20180721- JavaScript-Dom事件-事件类型

最新推荐文章于 2022-07-18 19:41:37 发布
最新推荐文章于 2022-07-18 19:41:37 发布
阅读量176 收藏
点赞数 1
分类专栏： 笔记 JavaScript 文章标签： 课堂笔记 JavaScript DOM
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cutebright00/article/details/81148993
版权

事件类型

 

 

 

 

onblur

 

<!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>

 

 

 

 

打印台查看效果

<!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>

 

 

键盘事件与keyCode属性

<!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>

 

 

 

cutebright00
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript DOM 添加事件
01-19
因为对于支持DOM的浏览器来说，添加事件是用addEventListener()方法来给对象添加事件！ 而对于MSIE来说则是用attachEvent()来给对象添加事件！这就使得我们必须用一个容器来装载这两个不同浏览器上对事件的处理方式...
Javascript处理DOM元素事件实现代码
12-09
DOM元素都有一些标准事件，一般使用时只要使用onclick=function的方式就可以了，但是当需要为DOM元素添加多个事件，删除事件，或在用Javascript封装控件的时候，为封装的控件添加自定义事件的时候，onclick=function...
深入理解DOM事件类型系列第五篇——文本事件
weixin_33801856的博客
09-19 107
前面的话 　　如果DOM结构发生变化，触发的是变动事件；如果文本框中的文本发生变化，触发的是文本事件 　　HTML5为input控件新增了很多type属性，大大增加了input控件的应用场景。其中一个是type="range"的input控件，可以通过拖动游标改变value值，但并不是所有浏览器都可以实时显示，除了IE10+浏览器 &lt;input type="range" min="...
DOM事件类型总结大全
a115544的博客
06-15 177
unload:事件在用户退出页面时发生 　　　　window.onload = function(){ 　　　　　　return "页面关闭!"; 　　　　}; onblur:失去焦点发生变化 　　　　window.onblur = function(){ 　　　　　　inp.value = inp.value.toUppercase(); 　　　　}; onfocus:...
javaScript_DOM事件类型
hujiaoay的专栏
04-04 408
DOM事件有很多不同类型，例如，有鼠标事件，有键盘事件。接下来通过一个实例来讲解几个常见的鼠标事件： 登录面板拖拽： 首先，创建一个简单地页面，如下： HTML代码如下： 登录面板拖拽 #drag_div{ position:absolute; background-color: #eeeeee; left:500px; top: 200px;
dom事件类型
l_y_h___的博客
09-15 113
window.onload:用于在网页加载完毕后立刻执行的操作，即当HTML文档加载完毕后，立刻执行某个方法 window.unonload:在用户退出页面时发生 window.onresize:当浏览器窗口被调整到一个新的高度或者宽度时，会触发 window.onscroll:当用户滚动带滚动条的元素中的内容时,重复被激发 window.onload = function(){ var a1 = document.getElementById('a1'..
DOM事件类
zhw13260525048的博客
09-26 125
1、DOM事件的级别 DOM0：element.onclick=function(){} DOM1设定的时候没有设计跟事件相关的事件 DOM2：element.addEventListener('click',fuction(){},false) DOM3：element.addEventListener('keyup',fuction(){},false)  （事件类型增加了） 2、D...
谈谈我对JavaScript DOM事件的理解
01-19
什么是事件？ 事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的...DOM与事件是JavaScript最核心的组成部分之一，他们赋予了页面无限的想象空间，你根本无法离开他们，否则js将寸步难行。在我们平时
trigger-event:触发DOM事件的快捷方式
05-06
触发事件触发DOM事件的快捷方式。安装该实用程序旨在与Browserify配合使用（但应与CommonJS兼容的任何软件一起使用）。 您可以使用npm轻松安装它： npm install @fauntleroy/trigger-event用法默认情况下，当包含...
javascript-learning-path:javascript学习路径
03-15
:school: :school: :school: JavaScript学习路径 运行JavaScript 脚本标签 浏览器控制台 链接外部文件 宣言 范围 全球的 功能 堵塞 吊装 原始类型 复合类型 空值 功能 目的 数据结构 大批 放 地图 日期 类型转换 ...
DOM —— 事件类型
z_2532040197的博客
07-18 142
DOM中的事件的类型及使用
JavaScript之DOM事件类型
weixin_44827643的博客
06-25 340
本文主要通过实际案例来介绍JS中DOM绑定事件的类型。1.onmouseover和onmouseout:鼠标移入和移出事件，效果同CSS提供的hover类似。案例：下拉菜单的制作。
JS的DOM操作——事件类型
m0_59345890的博客
07-18 974
2、ondblclick鼠标双击事件触发条件鼠标第一次按下和第二次松开时鼠标指针在被选元素区域内部并且时间间隔不能太长。10、onwheel鼠标滚轴滚动事件触发条件鼠标滚轴滚动时鼠标指针在被选元素内部。1、onclick鼠标点击事件触发条件鼠标按下和松开时，鼠标指针在被选元素区域内部。3、onmousedown鼠标按下事件触发条件鼠标在被选元素内按下。4、onmouseup鼠标松开事件触发条件鼠标在被选元素内松开。...
Dom（七） 事件类型
Oliver尹的博客
08-17 307
事件类型 事件分类 首先我们在DOM上有一个Event类，这个类包含了：load，unload，error，select，abort等事件 然后，这些父类首先会衍生出子类UIEvent，包含了：resize，scroll等 再然后，由UIEvent衍生出了FouseEvent，包含了：blur，focus，focusin，focusout等 再接着，UIEvent还衍生出了InputEv...
事件类型
weixin_30379973的博客
08-16 119
事件类型有：UI（用户界面）事件，用户与页面上元素交互时触发 ；焦点事件：当元素获得或失去焦点时触发； 鼠标事件：当用户通过鼠标在页面上执行操作时触发；滚轮事件：当使用鼠标滚轮（或类似设备）时触发； 文本事件：当在文档中输入文本时触发； 键盘事件：当用户通过键盘在页面上执行操作时触发； 合成事件：当为IME（输入法编辑器）输入字符时触发； 变动事件：当底层DOM结构发生变化时触发； 一...
深入理解DOM事件类型系列第二篇——键盘事件
nicexibeidage的博客
12-14 792
前面的话 　　鼠标和键盘是电脑端主要的输入设备，上篇介绍了鼠标事件，本文将详细介绍键盘事件   类型 　　键盘事件用来描述键盘行为，主要有keydown、keypress、keyup三个事件 keydown 　　当用户按下键盘上的任意键时触发，如果按住不放的话，会重复触发该事件 div id="test" style="height: 30px;w
react-router-dom 4 路由监听
最新发布
09-02
```javascript import { history } from 'react-router-dom'; history.listen((location, action) => { console.log('路由变化：', location.pathname); console.log('操作类型：', action); }); ``` 在以上代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值