form 内 onclick事件_小有成就，深入了解下JavaScript事件模型

最新推荐文章于 2021-10-09 14:20:28 发布

习翔宇

最新推荐文章于 2021-10-09 14:20:28 发布

阅读量744

点赞数

文章标签： form 内 onclick事件

本文链接：https://blog.csdn.net/weixin_29229055/article/details/113580755

版权

开篇寄语：

有些人看起来整天面带笑容，并不是因为他们事事顺利，只是他们比你敢于面对问题、善于遗忘不幸、勇于拥抱欣喜。

人最大的对手，往往不是别人，而是自己的懒惰。别指望撞大运，运气不可能永远在你身上，任何时候都要靠本事吃饭。

也许这每天的两句话不能改变你当下的情况，但至少被你看见过，就是最美好的事。

从今天开始就要对JavaScript做进一步的学习了。

一、JavaScript事件模型

事件是 JavaScript 应用跳动的心脏，进行交互，使网页动起来。当我们与浏览器中 Web 页面进行某些类型的交互时，事件就发生了。事件可能是用户在某些内容上的点击、鼠标经过某个特定元素或按下键盘上的某些按键。

事件还可能是 Web 浏览器中发生的事情，比如说某个 Web 页面加载完成，或者是用户滚动窗口或改变窗口大小。

通过使用 JavaScript ，你可以监听特定事件的发生，并规定让某些事件发生以对这些事件做出响应。

1、理解

作用

验证用户输入的数据。
增加页面的动感效果。
增强用户的体验度。

事件中几个名词

事件源：谁触发的事件

事件名：触发了什么事件

事件监听：谁管这个事情，谁监视？

事件处理：发生了怎么办

比如

闯红灯
事件源：车；事件名：闯红灯；监听：摄像头、交警；处理：扣分罚款。
点击按钮
事件源：按钮；事件名：点击；监听：浏览器窗口；处理：执行函数。

当我们用户在页面中进行的点击动作，鼠标移动的动作，网页页面加载完成的动作等，都可以称之为事件名称，即：click、mousemove、load等都是事件名称，对应具体的执行代码处理，响应某个事件的函数。

<!-- onload浏览器加载时就执行的事件 -->
<body onload="loadWindow();">

   <script type="text/javascript">
       function loadWindow() {
           alert("加载窗体");
      }
   </script>

</body>

2、事件类型

JavaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件。

Window事件属性: 针对 window 对象触发的事件（应用到 <body> 标签）

Form事件: 由 HTML表单内的动作触发的事件（应用到几乎所有 HTML 元素，但最常用在 form 元素中）

Keyboard 事件: 键盘事件

Mouse 事件: 由鼠标或类似用户动作触发的事件

Media 事件: 由媒介（比如视频、图像和音频）触发的事件（适用于所有 HTML 元素，但常见于媒介元素中，比如<audio>、<embed>、<img>、<object> 以及<video>）

3、常用事件

onload：当页面或图像加载完后立即触发

onclick：鼠标点击某个对象

onblur：元素失去焦点

onfocus：元素获得焦点

onchange：用户改变域的内容

onmouseover：鼠标移动到某个元素上

onmouseout：鼠标从某个元素上离开

onkeyup：某个键盘的键被松开

onkeydown：某个键盘的键被按下

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>常用事件</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background: gray;
margin-top: 100px;
}
</style>
</head>

<body onload="loadFunc();">
<button type="button" onclick="clickFunc();">点击事件</button><br/>

用户名：<input id="user_id" type="text" onblur="blurFunc();" onfocus="focusFunc();" onkeydown="keydownFunc();" onkeyup="keyupFunc();" />
<span id="user_span"></span>
<br />

爱好：
<select onchange="changeFunc();">
<option>---请选择---</option>
<option>篮球</option>
<option>足球</option>
<option>乒乓球</option>
</select>

<div onclick="clickFunc();" onmouseover="moverFunc();" onmouseout="moutFunc();">我是一个div</div>

<script type="text/javascript">
function loadFunc() {
alert('浏览器加载时调用指定函数执行的代码');
}

// onload：当页面或图像加载完后立即触发
/*
window.onload = function() {
alert('浏览器加载时调用指定函数执行的代码');
}
*/

// onclick：鼠标点击某个对象
function clickFunc() {
alert('点击事件触发的效果');
}

// onblur：元素失去焦点
function blurFunc() {
document.getElementById('user_span').innerHTML = '用户名不能为空';
}

// onfocus：元素获得焦点
function focusFunc() {
document.getElementById('user_span').innerHTML = '用户名为4~10个字符';
}

// onkeydown：某个键盘的键被按下
function keydownFunc() {
               // m是77
if(77 == event.keyCode) {
document.getElementById('user_span').innerHTML = '不要骂人，消息无效';
}
}

// onkeyup：某个键盘的键被松开
function keyupFunc() {
console.log(event.keyCode);
if(77 == event.keyCode) {
document.getElementById('user_id').value = '';
}
}

// onchange：用户改变域的内容
function changeFunc() {
document.getElementById('user_span').innerHTML = '爱好已改变';
}

// onmouseover：鼠标移动到某个元素上
function moverFunc() {
document.getElementById('user_span').innerHTML = '鼠标已移动至div';
}

// onmouseout：鼠标从某个元素上离开
function moutFunc() {
document.getElementById('user_span').innerHTML = '';
}
</script>
</body>

</html>

4、事件处理程序

事件就是用户或浏览器自身执行的某种动作。例如click、load和mouseover都是事件的名字，而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。事件处理程序的名字以“on”开头，因此click事件的事件处理程序就是onclick，为事件指定处理程序的方式有好几种。

HTML事件处理程序

某个元素支持的每种事件，都可以用一个与相应事件处理程序同名的HTML特性来指定。这个特性的值应该是能够执行的JavaScript代码：

<input type="button" value="Press me" onclick="alert('thanks');" />

这样做有一些缺点，例如耦合度过高，还可能存在时差问题（当用户点击按钮时，处理函数还未加载到，此时处理函数是单独写的一段js代码），而且在不同的浏览器上可能会有不同的效果。

DOM事件处理程序

通过JavaScript指定事件处理程序的传统方式，就是将一个函数赋值给一个事件处理程序属性。这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种属性的值设为一个函数，就可以指定事件处理程序了。例如：

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DOM事件处理程序</title>
<style type="text/css">
div {
width: 300px;
height: 200px;
background: gray;
margin-top: 100px;
}
</style>
</head>

<body>
<button id="myBtn">按钮</button>
<span id="user_span"></span>
<div id="dv">我是一个div</div>

<script type="text/javascript">
var btn = document.getElementById('myBtn');
btn.onclick = function() {
alert('you click a button');
}

// onclick：鼠标点击某个对象
function clickFunc() {
alert('点击事件触发的效果');
}

// onmouseover：鼠标移动到某个元素上
function moverFunc() {
document.getElementById('user_span').innerHTML = '鼠标已移动至div';
}

// onmouseout：鼠标从某个元素上离开
function moutFunc() {
document.getElementById('user_span').innerHTML = '';
}

           // DOM方式处理 解耦
var dv = document.getElementById('dv');
dv.onclick = clickFunc;
dv.onmouseover = moverFunc;
dv.onmouseout = moutFunc;
</script>
</body>

</html>

也可以通过DOM删除指定的事件处理程序，只要将属性值设为null即可：

btn.onclick = null;
dv.onclick = null;
dv.onmouseover = null;
dv.onmouseout = null;

下一篇是学习JavaScript必然会遇到的DOM，我们不见不散。

习翔宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
form 内 onclick事件_小有成就，深入了解下JavaScript事件模型

开篇寄语：有些人看起来整天面带笑容，并不是因为他们事事顺利，只是他们比你敢于面对问题、善于遗忘不幸、勇于拥抱欣喜。人最大的对手，往往不是别人，而是自己的懒惰。别指望撞大运，运气不可能永远在你身上，任何时候都要靠本事吃饭。也许这每天的两句话不能改变你当下的情况，但至少被你看见过，就是最美好的事。从今天开始就要对JavaScript做进一步的学习了。一、JavaScript事件模型事件是 JavaS...
复制链接

扫一扫