浅谈javascript基础之客户端事件驱动


Posted in Javascript onJune 10, 2016

我们知道,面向对象发展起来后,“一夜之间”,几乎所有的语言都能基于对象了,JavaScript也是基于对象的语言。用户在浏览器上的行为称作“事件”,之后引发的一系列动作,比如弹窗啦,改变浏览器大小啦,验证啦,balabala,都叫做“事件驱动”。当然,这次我主要介绍几个常常发生的事件。

ps:对于js脚本的支持以浏览器而定!!!有的低版本的浏览器可能不支持!!!

1.单击事件(onClick)

啥叫单击事件呢?当用户单击鼠标按钮是,就会产生单击事件。同时onclick指定的事件处理程序将会被调用。通常应用在button(按钮对象)、checkbox(复选框)、radio(单选按钮)、reset buttons(重置按钮)、submit buttons(提交按钮)上。

放大招:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之单击事件</title>

</head>
<body>
<form>
  <script language="JavaScript">
    function aclick(){
      alert("你刚才单击了按钮");
    }
  </script>
  <input type="button" value="按钮" onclick= "aclick()" />
</form>

</body>
</html>

效果如下图:

浅谈javascript基础之客户端事件驱动

2.更改事件(onChange)

一旦用户更改表单的值时,就会触发onchange事件。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

效果如下图 :

浅谈javascript基础之客户端事件驱动

3.选中事件(onSelect)

当页面中的元素被选中时,就会触发onselect事件。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之更改事件</title>
  <script language="JavaScript">
    function check() {
      alert("文本框的值发生了变化");
    }
  </script>
</head>
<body>
<form>
  <input type="text" value="这是一个文本框" name="name" onchange="check()"/>
</form>
</body>
</html>

效果如下图:

浅谈javascript基础之客户端事件驱动

4.加载事件(onLoad)

加载事件是在刚刚打开网页时,触发的事件。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之加载事件</title>
  <script language="JavaScript">
    function check(){
      alert("莫急莫急,小D正在骑马来的路上,O(∩_∩)O哈哈~");
    }
  </script>
</head>
<body onload="check()">
</body>
</html>

效果如下图:

浅谈javascript基础之客户端事件驱动

5.卸载前事件(beforeunload)

确切说,称为“离开页面前事件”比较恰当,当你单击当前标签页的关闭按钮时会触发此事件。

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>js基础之卸载前事件</title>
  <script language="JavaScript">
    function check1(){
      alert("你真的要离我而去呢????...");
    }
  </script>
</head>
<body onbeforeunload= "check1()">
<h1>这是用来验证卸载前事件的页面</h1>
</body>
</html>

效果如下图:

浅谈javascript基础之客户端事件驱动

以上这篇浅谈javascript基础之客户端事件驱动就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Global对象
Aug 13 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
解析jquery中的ajax缓存问题
Dec 19 Javascript
基于jQuery的Web上传插件Uploadify使用示例
May 19 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
AngularJS中使用three.js的实例详解
Jul 21 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
html2canvas属性和使用方法以及如何使用html2canvas将HTML内容写入Canvas生成图片
Jan 12 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 #Javascript
老生常谈JavaScript数组的用法
Jun 10 #Javascript
jquery输入数字随机抽奖特效的简单实现代码
Jun 10 #Javascript
jQuery学习心得总结(必看篇)
Jun 10 #Javascript
修改js confirm alert 提示框文字的简单实例
Jun 10 #Javascript
由简入繁实现Jquery树状结构的方法(推荐)
Jun 10 #Javascript
3kb jQuery代码搞定各种树形选择的实现方法
Jun 10 #Javascript
You might like
一个php作的文本留言本的例子(六)
2006/10/09 PHP
PHP获取php,mysql,apche的版本信息示例代码
2014/01/16 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
2014/06/05 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
php 开发中加密的几种方法总结
2017/03/22 PHP
浅谈PHP表单提交(POST&amp;GET&amp;URL编/解码)
2017/04/03 PHP
yii2 上传图片的示例代码
2018/11/02 PHP
Laravel推荐使用的十个辅助函数
2019/05/10 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
javascript实现跨域的方法汇总
2015/06/25 Javascript
JavaScript图像延迟加载库Echo.js
2016/04/05 Javascript
JS表单提交验证、input(type=number) 去三角 刷新验证码
2017/06/21 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
2018/07/02 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
详解Python中的__init__和__new__
2014/03/12 Python
python发送邮件功能实现代码
2016/07/15 Python
详细介绍Python的鸭子类型
2016/09/12 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
python 循环数据赋值实例
2019/12/02 Python
django正续或者倒序查库实例
2020/05/19 Python
Django中使用Json返回数据的实现方法
2020/06/03 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
python 制作网站小说下载器
2021/02/20 Python
一款纯css3实现的鼠标悬停动画按钮
2014/12/29 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
用友笔试题目
2016/10/25 面试题
教育专业自荐书范文
2013/12/17 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
初中英语演讲稿
2014/04/29 职场文书
详解JS WebSocket断开原因和心跳机制
2021/05/07 Javascript
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js