javascript基础加固4—-事件

2.1 什么是事件

通常鼠标或热键的动作我们称之为 事件(Event),而由鼠标或热键引发的一连串程序的动作,称之为 事件驱动。对事件进行处理程序或函数,我们称之为 事件处理程序。

2.2 事件处理程序

在某个事件发生的时候,执行特定的 JavaScript 代码(事件处理程序)。

比如点击页面的某个按钮这是一个很常见的事件,执行对应的事件处理程序,弹出提示小窗口,代码如下:

<html>
<head>
  <script>
    function click_button() {     // 事件处理程序,弹出提示窗
      alert(‘welcome to shiyanlou‘);
    }
  </script>
</head>

<body align="center">
  <br></br>
  <button onclick="click_button()">click me</button>  <!--发生事件 onclick 的时候,执行 click_button()-->
</body>
</html>

2.3 常用事件

除了刚才提到的 onclick 事件,还有这些常用的事件:

  • onclick 单击
  • ondblclick 双击
  • onfocus 元素获得焦点
  • onblur 元素失去焦点

  • onmouseover 鼠标移到某元素之上
  • onmouseout 鼠标从某元素移开

  • onmousedown 鼠标按钮被按下
  • onmouseup 鼠标按键被松开

  • onkeydown 某个键盘按键被按下
  • onkeyup 某个键盘按键被松开
  • onkeypress 某个键盘按键被按下并松开


其中,onmouseover 和 onmouseout 事件可用于在鼠标移至 HTML 元素上和移出元素时触发函数。比如这一例子:

<html>
<head></head>

<body>
<div style="background-color:green;width:200px;height:50px;margin:20px;padding-top:10px;color:#ffffff;font-weight:bold;font-size:18px;text-align:center;"

onmouseover="this.innerHTML=‘good‘"

onmouseout="this.innerHTML=‘you have moved out‘"

>move your mouse to here</div>
</body>

</html>

鼠标移入时,显示“good”,鼠标移出时显示“you have moved out”:

onmousedown, onmouseup 是鼠标 压下 和 松开 的事件。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件。举例说明:

<html>
<head>
  <script>

    function mDown(obj)    // 按下鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="#1ec5e5";
    obj.innerHTML="release your mouse"
    }

    function mUp(obj)     // 松开鼠标 的 事件处理程序
    {
    obj.style.backgroundColor="green";
    obj.innerHTML="press here"
    }

  </script>
</head>

<body>
<div style="background-color:green;width:200px;height:35px;margin:20px;padding-top:20px;color:rgb(255,255,255);font-weight:bold;font-size:18px;text-align:center;"

onmousedown="mDown(this)"

onmouseup="mUp(this)"

>press here</div>
</body>

</html>

运行结果可见,按下鼠标时,显示“release your mouse”,背景变为蓝色;松开鼠标后,显示为“press here”,背景变为绿色。

原文地址:https://www.cnblogs.com/hackerbird/p/8794411.html

时间: 2024-11-05 19:30:57

javascript基础加固4—-事件的相关文章

JavaScript基础—闭包,事件

Js基础-闭包,事件 1:js中的闭包 概念:在一个函数内部又定义了一个函数,内部函数能访问到外部函数作用域范围内的变量,这时这个内部函数就叫做闭包,无论这个内部函数在哪里被调用都能访问到外部函数作用域中的那些变量.这些闭包是通过作用域链来实现的. 闭包可以做什么: 改变变量作用域;js中的面向对象都是用闭包来模拟的. 注意:当代码中有闭包的时候,闭包的代码什么时间执行最重要. Eg:下面的代码相当于C#中的局部变量,外面是访问不到的. <script type="text/javascr

JavaScript 基础知识梳理——事件

事件 1)事件是文档或浏览器窗口中发生的特定的交互瞬间. JavaScript和HTML之间的交互是通过事件实现的. 2)事件流——描述的是从页面中接受事件的顺序 IE——事件冒泡流 Netscape——事件捕获流 3)事件冒泡:即事件最开始由最具体的元素(文档中嵌套层次最深的哪个节点)接收,然后逐级向上传播至最不具体的哪个节点(文档). click事件在input触发,它会一级一级往上冒,直到冒到document上 点击按钮不但触发了按钮,也触发了div.body直到document 4)事件

javascript基础加固3—-语法2

2.1 JavaScript 语句 2.1.1 if/else 语句 JavaScript 中的 if/else 判断选择,你会发现,就像 C 语言.语法格式是这样的: if (条件 1) { 当条件 1 为 true 时执行的代码; } else if (条件 2) { 当条件 2 为 true 时执行的代码; } else { 当条件 1 和 条件 2 都不为 true 时执行的代码; } 2.1.2 switch/case 语句 在做大量的选择判断的时候,如果依然使用 if/else 结构

javascript基础加固2—-语法1

2.1 变量 2.1.1 什么是变量 从字面上看,变量是可变的量:从编程角度讲,变量是用于存储数据的存储器,每个变量都有其独有的名字,每个变量都占有一段内存. 在程序当中,直接使用数据值或直接使用数据值的内存地址都不够方便,所以我们用变量的名字来表示对应的数据. 每个变量都有它的变量名,变量类型,变量的作用域. 2.1.2 JavaScript 中的变量 JavaScript 中的变量规则和其它如 C.Java 等语言类似,建议的变量命名规则: 1.由字母.数字.下划线组成,区分大小写 2.以字

javascript基础加固6—-DOM

本节 JavaScript 的 DOM 操作,内容主要包括: 通过 ID.名字.标签名 选取元素: 通过 getAttribute 和 setAttribute 获取和设置元素属性: 通过 parentNode 获取父元素.createElement 动态地创建节点.appendChild 和removeChild 动态地添加或者删除节点. 基本概念 2.1.1 什么是 DOM DOM 是 文档对象模型(Document Object Model)的简称,它的基本思想是把结构化文档(比如 HTM

javascript基础加固5—-对象

2.1 什么是对象 JavaScript 的所有数据都可以被视为对象,而每个对象都有其 属性(properties)和 方法(methods). 对象的 属性 是反映该对象某些特定的性质的,例如:字符串的长度.图像的长宽.文字框(Textbox)里的文字等: 对象的 方法 能对该对象做一些事情,例如,表单的"提交"(Submit),窗口的"滚动"(Scrolling)等. 比如当申请一个变量的时候: var my_var="shiyanlou";

javascript基础六(事件对象)

1.事件驱动 js控制页面的行为是由事件驱动的. 什么是事件?(怎么发生的) 事件就是js侦测到用户的操作或是页面上的一些行为 事件源(发生在谁身上) 引发事件的元素 事件处理程序(发生了什么事) 对事件处理的程序或函数 事件对象(用来记录发生事件时的相关信息)  只有在事件发生的时候,才会产生事件对象,无法手动创建,并且事件对象只能在处理函数内部访问,处理函数允许结束后该对象自动销毁 事件的分类: 鼠标事件: onclick        单击 ondblclick     双击 onmous

javascript基础-事件1

原理 事件分两种.第一种浏览器事件,由浏览器抛出事件,它是人机交互的基础:第二种自定义事件,由程序员抛出事件,它是模拟事件流程.两者都是为了完成数据的传递. 浏览器事件 机制 冒泡和捕获两种机制.因IE8-前只支持冒泡,所以实际运用中,只允许事件冒泡. 处理方式 IE8- 与 IE9+.标准浏览器事件对象的区别 浏览器事件类型与处理单独放一节 自定义事件 通常用在  DOM渲染绑定自定义事件如'changeattr' --> 数据源(json对象属性)变更,抛出'changeattr'事件---

javascript 基础之事件(event)-------1

  如果在js中想触发另一个元素的onchang,onclick 等方法可以使用obj.fireEvent("onchange");   来实现: html: <input type="checkbox" id="mycheckox2" onclick="firemycheckoxonclick()"> javascript .csharpcode, .csharpcode pre { font-size: sma