第二章 JavaScript事件处理

最新推荐文章于 2023-09-19 22:20:17 发布
最新推荐文章于 2023-09-19 22:20:17 发布
阅读量430 收藏
点赞数
分类专栏： JavaScript 文章标签： 安博培训
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FangFeiXinLingamp/article/details/79353308
版权

1.JavaScript事件应用-按钮单击事件 


<html>
<head>
  <script type="text/javascript">
    function myclick(btn){
	alert(btn.value);
	}
	</script>
</head>
<body>
<form name="myform">
<input type="text" name="username" value="zhangsan"/>

<input type="button" name="btn1" value="btn1" οnclick="myclick(this)"/>
<input type="button" name="btn2" value="btn2" οnclick="myclick(this)"/>
</form>
</body>
</html>

运行效果:


2.JavaScript事件应用-文本框光标事件


<html>
<head>
<script type="text/javascript">
function myblur(){
 alert(document.getElementById("txt1").value);
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="txt1" οnblur="myblur()" name="username" value="zhangsan"/>
<input type="button" name="btn1" value="btn1" οnclick="myclick(this)"/>
<input type="button" name="btn2" value="btn2" οnclick="myclick(this)"/>
</form>
</body>
</html>

运行效果:

3JavaScript事件应用-下拉菜单change事件

<html>
<head>
<script type="text/javascript">
function mychange(){
var div1=document.getElementById("div1");
var str=document.getElementById("sel").value;
div1.innerHTML="<font color='red'>"+str+"</font>";
}
</script>
</head>
<body>
onchange事件实例
<form name="myform">
<select id="sel" οnchange="mychange()">
<option>红色</option>
<option>蓝色</option>
<option>绿色</option>
</select>
</form>
<div id="div1"></div>
</body>
</html>

运行效果:


4.IE和火狐兼容光标切换

<html>
<head>
<script type="text/javascript">
function mykey1(event){
  var tmpEvent = event;
  var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
  if(key == 13){
   document.getElementById("txt2").focus();
  }
}
function mykey2(event){
  var tmpEvent = event;
  var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
  if(key == 13){
   document.getElementById("txt3").focus();
  }
}
function mykey3(event){
  var tmpEvent = event;
  var key=tmpEvent.which?tmpEvent.which:tmpEvent.keyCode;
  if(key == 13){
   document.getElementById("txt1").focus();
  }
}
</script>
</head>
<body>
<form name="myform">
<input type="text" id="txt1" onkeypress = "mykey1(event)"/>
<input type="text" id="txt2" onkeypress = "mykey2(event)"/>
<input type="text" id="txt3" onkeypress = "mykey3(event)"/>
</form>

</body>
</html>

运行效果图:



问题总结:

1.onblur事件与onchange事件的区别:

onblur是在失去焦点的时候起作用，不管文本的值是否有改变
onchange是在失去焦点并且文本的值发生了改变的时候起作用，如果值没有改变则不起作用

2.什么是JavaScript事件？JavaScript如何处理事件？

JavaScript 脚本中的事件是指用户载入目标页面直到该页面被关闭期间浏览器的动作及该页面对用户操作的响应
JavaScript处理事件的过程分为两个步骤：
定义脚本可以处理的事件
提供将这些事件连接到用户提供的JavaScript代码的标准方法

3.JavaScript浏览器事件

onload : 浏览器载入文档事件 
onunload : 关闭该文档事件
onblur : 浏览器失去焦点事件
onfocus : 获得焦点事件


@computervip
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
第二章JavaScript操作BOM对象4
08-08
在本章"第二章JavaScript操作BOM对象4"中，我们将深入探讨JavaScript在网页中的引用方式、基本数据类型以及数组的定义与访问。这将帮助我们更好地理解和运用JavaScript这一强大的客户端脚本语言。 首先，让我们来看...
JavaScript 教程---菜鸟教程
yitong的博客
04-23 5542
js知识点总结
JavaScript速成课—事件处理
最新发布
小马哥的博客
09-19 232
注意：前面的addEventListener()函数一般的浏览都可以用，但有写IE8及其以下版本不能用，所有可以用attachEvent()函数，但这个函数太古老了，有些浏览器还真不支持addEvent()顾名思义，就是看是哪一个元素属性发生的事件，这个属性是target，在IE8以下以下不支持这个属性，可以用SRCElement属性获取事件源。JavaScript事件的event对象表示当前事件，event对象的属性包含了当前对象的状态，只在事件发生的过程中才有效。
js的事件处理
bbdRzzz的博客
11-16 772
js的事件处理
菜鸟笔记-JS自定义事件、自动触发事件、模拟用户操作（点击等）
xk_initial的博客
03-07 1334
在有些情况下，我们需要程序逻辑自动触发元素的事件，例如js提供了click()，form提供了reset(),submit()等方法！在jquery中提供了trigger()方法帮助我们自动触发事件。还有就是为了满足特定的需求，比如模块之间的通信，传递信息，提供了几种自定义事件的几种方式 自定义事件的方式： Event()构造函数，创建一个新的事件对象Event CustomEvent()创...
初学JavaScript第二章
10-30
6. **日期对象**：JavaScript中的Date对象用于处理日期和时间。需要注意，它不支持1970年1月1日以前的日期。可以使用构造函数创建日期对象，并通过getYear()、getMonth()、getDate()、getDay()、getTime()、getHours...
JavaScript Event学习第三章 早期的事件处理程序
10-29
在这一章我会谈到一些最古老的添加事件处理程序的方法，这些方法甚至被第二代浏览器所支持。
JavaScript DOM 学习第二章 编辑文本
10-29
JavaScript DOM（Document Object Model）是Web开发中...虽然它并不完美，但它是理解DOM操作和事件处理机制的一个好起点。对于实际的CMS系统，可能还需要考虑更多的细节，例如错误处理、用户输入验证和兼容性优化等。
JavaScript CSS修改学习第二章 样式
12-10
在第二章中，我们将重点关注如何使用JavaScript来获取元素的样式信息，尤其是那些无法通过`style`属性直接读取的样式。 首先，当需要获取元素的内联样式之外的样式时，可以使用`offsetSomething`系列属性，例如`...
Javascript的事件处理机制
03-01
事件(Event)是JavaScript应用跳动的心脏，也是把所有东西粘在一起的胶水。当我们与浏览器中Web页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是Web浏览器中发生的事情，比如说某个Web页面加载完成，或者是用户滚动窗口或改变窗口大小。通过使用JavaScript，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。在漫长的演变史，我们已经告别了内嵌式的事件处理方式（直接将事件处理器放在HTML元素之内来使用）。今天的事件，它已是DOM的重要组成部分，遗憾的是，IE继续保留它最早在IE4
JavaScript 事件处理
weixin_47906106的博客
12-26 799
事件处理 事件 发生在HTML元素上的事情，可以是用户行为，也可以是浏览器的行为 用户点击了某个HTML元素 用户将鼠标移动到某个HTML元素上 用户输入数据时光标离开 页面加载完成 事件源：时间触发的源头，即触发事件的元素，如按钮，输入框，超链接 事件对象：当一个事件发生时，这个事件相关的详细信息会被保存到一个对象中，称为event对象 事件监听：监听事件的发生，绑定事件函数，当事件触发后执行该事件函数，即回调函数 绑定事件 三种方式： 静态绑定，通过为标签的事件属性赋值 <input ty
通过经典案例教你学Javascript
04-14
通过案例，讲解Javascript的各种语法，API和使用方法。
JavaScript事件
weixin_34381687的博客
11-09 464
JavaScript事件处理的方式(三种) 作者：青青鸟 字体：[增加 减小] 类型：转载 时间：2016-04-26 我要评论 最近这段时间因为每天要修改网站，为网站做特效，所以看了很多的js接触事件，自己只会使用一小部分，有时用的时候也比较混乱，现在系统的整理了一下，特此分享到脚本之家平台供大家参考下 最近这段时间因为每天要修改网站，为网站做特效，所以看了...
JavaScript事件处理
lesileqin的博客
01-05 4660
文章目录一、事件与事件处理概述（一）JavaScript常用事件（二）事件的调用1、在HTML中调用2、在JavaScript中调用（三）事件对象二、表单相关事件（一）获得焦点与失去焦点事件（二）失去焦点内容改变事件（三）表单提交与重置事件三、鼠标和键盘事件（一）鼠标单击事件（二）鼠标按下和松开事件（三）鼠标移入和移出事件（四）鼠标移动事件（五）键盘事件四、页面事件（一）加载与卸载事件（二）页面大...
理解JavaScript中的事件处理
大巧不工
07-02 1533
什么是事件？事件(Event)是JavaScript应用跳动的心脏 ，也是把所有东西粘在一起的胶水。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。 通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。 今天的事件在漫长的演变史，我们已经告别了内嵌
JavaScript事件的处理
h294590501的专栏
05-29 1388
JavaScript事件的处理在网页中用户操作的时候会激活各种事件， 如按钮点击，鼠标移动，键盘按下等，这些都叫事件（Event）。 我们可以通过编写代码对这些事件进行处理， ​ 如：当用户点击一个删除按钮时，我们给用户一些在删除之前的提示等等。 设置事件的两种方式：方式一： 有名/命名函数 事件="函数名（）"；//里面的（）不能省略。。。 ​ 方式二： 无名/匿名函数 事件=function(...
JavaScript程序设计课件：第 5 章 事件和事件处理.ppt
06-18
处理事件的方式主要有两种：一是通过HTML属性，二是通过JavaScript属性。在HTML属性中，例如`('您单击了按钮!')">`，`onClick`就是事件处理器，当按钮被点击时，会弹出提示框显示消息。另一种方法是通过JavaScript...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值