浅谈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 学习技巧
Feb 17 Javascript
js实现一个省市区三级联动选择框代码分享
Mar 06 Javascript
jQuery实现 注册时选择阅读条款 左右移动
Apr 11 Javascript
关于extjs4如何获取grid修改后的数据的问题
Aug 07 Javascript
JS选项卡动态替换banner图片路径的方法
May 11 Javascript
Java Mybatis框架入门基础教程
Sep 21 Javascript
13个PHP函数超实用
Oct 21 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
微信小程序 MD5加密登录密码详解及实例代码
Jan 12 Javascript
JavaScript实现瀑布流图片效果
Jun 30 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
第十三节 对象串行化 [13]
2006/10/09 PHP
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
php+curl 发送图片处理代码分享
2015/07/09 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
PHP实现的CURL非阻塞调用类
2018/07/26 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
laravel5.6中的外键约束示例
2019/10/23 PHP
PhpStorm2020 + phpstudyV8 +XDebug的教程详解
2020/09/17 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
iframe中使用jquery进行查找的方法【案例分析】
2016/06/17 Javascript
基于jQuery实现表格的查看修改删除
2016/08/01 Javascript
JS字符串长度判断,超出进行自动截取的实例(支持中文)
2017/03/06 Javascript
Nodejs进阶:express+session实现简易登录身份认证
2017/04/24 NodeJs
JavaScript解决浮点数计算不准确问题的方法分析
2018/07/09 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
ant-design-vue 快速避坑指南(推荐)
2020/01/21 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
2020/06/05 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
python实现删除文件与目录的方法
2014/11/10 Python
Python中max函数用法实例分析
2015/07/17 Python
Python函数中的函数(闭包)用法实例
2016/03/15 Python
python+opencv实现的简单人脸识别代码示例
2017/11/14 Python
学习python中matplotlib绘图设置坐标轴刻度、文本
2018/02/07 Python
详解python中的线程
2018/02/10 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python urllib爬虫模块使用解析
2019/09/05 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
如何让python的运行速度得到提升
2020/07/08 Python
同志主要表现材料
2014/08/21 职场文书
重点工程汇报材料
2014/08/27 职场文书
个人自查自纠材料
2014/10/14 职场文书
青岛市的收音机研制与生产
2022/04/07 无线电