事件

HTML 事件是发生在 HTML 元素上的事情。例如用户点击按钮时,点击也是一个事件。事件可以用于处理表单验证,用户输入,用户行为及浏览器动作,如:

  • 页面加载时触发事件
  • 页面关闭时触发事件
  • 用户点击按钮执行动作
  • 验证用户输入内容的合法性

PC端上常用的事件:

事件 说明
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

怎样将事情处理程序绑定到特定的事件中?

方法一:

在标签中添加事件

<button onclick="alert(‘hello world’)">点我</button>

方法二:

在js代码中获取对象,然后设置对象事件的匿名函数

var btn=document.getElementById('btn');
btn.onclick=function() {
alert('hello world');
}

方法三:

addEventListener() 方法用于向指定元素添加事件句柄

var btn=document.getElementById('btn');
btn.addEventListener("click",function(){
alert("hello world");
})

给一个按钮添加一个点击事件,固然简单,但如果是N多个呢?这时我们可以使用 for 循环

//获取一系列按钮
var btn=document.getElementsByTagName('button');
for(var i = 0; i < btn.length; i++){
btn[i].onclick= function() {
   //代码
  }
}

以上面的例子,值得一说的是,在 for 循环中你可以用 i 来选择 btn ,但是 for 循环会把所有除事件外所有代码都执行一遍,等到用户进行特定的操作后才会触发事件,而 i 这时候已经变成了 btn.length ,无法调用相应的元素事件,所以要用到 this 或 给元素绑定一个值。例:

var btn=document.getElementsByTagName('button');
for(var i = 0; i < btn.length; i++){
//给元素绑定一个值
btn[i].index = i;
btn[i].onclick= function() {
//使用this 调用自身
   this.style.width="100px";
//用绑定的值调用元素
btn[this.index].style.width="100px";
  }
}

this 是的使用时有局限性的,在不同的地方有不同的含义与功能,例如在上面例子的事件中加上一个定时器,这是定时器里的 this 就无法正确的指向我们想要元素与事件,这时,我们可以在定时器外把 this 赋值给一个变量,this有局限性,而这个变量却没有。例:

var btn=document.getElementsByTagName('button');
for(var i = 0; i < btn.length; i++){
btn[i].onclick= function() {
//将自身复制给一个变量
var obj = this;
setInterval(function() {
obj.style.width = "100px";
},1000)
  }
}

Javascript初学篇章_8(事件)的更多相关文章

  1. Javascript初学篇章_5(对象)

    对象 Javascript是一种面向对象的语言,因此可以使用面向对象的思想来进行javascript程序设计对象就是由一些彼此相关的属性和方法集合在一起而构成的一个数据实体.举个例子,一只猫是个对象, ...

  2. Javascript初学篇章_4(循环与函数)

    七.循环语句 1.While 语法: while (exp){ //statements; } 说明: while (变量<=结束值){ 需执行的代码 } 例: var i=0; while(i ...

  3. Javascript初学篇章_3(注释/if/switch)

    五.javascript的注释 // 单行注释 /* …*/ 多行注释 注:多行注释不能互相嵌套 六.程序流程控制 一.条件语句 if 语法: if(condition) statements1 el ...

  4. Javascript初学篇章_1(概念/数据类型)

    Javascript是一门脚本语言,主要由浏览器来执行.它可以说是页面的灵魂,让页面活过来.与之前学的HTML5+CSS样式的不同之处就在于,JS能让静态网页成为一个动态网页,实现与用户的互动. Ja ...

  5. Javascript初学篇章_7(DOM)

    DOM 文档对象模型DOM (document object model) 文档对象模型,它定义了操作文档对象的接口.DOM 把一份html文档表示为一棵家谱树,使用parent(父), child( ...

  6. Javascript初学篇章_6(BOM)

    BOM 浏览器对象模型 BOM (浏览器对象模型),它提供了与浏览器窗口进行交互的对象 一.window对象 Window对 象表示整个浏览器窗口. 1.系统消息框 alert() alert('he ...

  7. Javascript初学篇章_2(数据类型的查看和转换/运算符)

    三.数据类型的查看和转换 1.查看数据类型 typeof 说明:typeo可以查看变量的类型. 语法:alert(typeof  变量名或数据): 2.转换成字符串 var married = fal ...

  8. Javascript并发模型和事件循环

    Javascript并发模型和事件循环 JavaScript的"并发模型"是基于事件循环的,这个并发模型有别于Java的多线程, javascript的并发是单线程的. Javas ...

  9. JavaScript学习06 JS事件对象

    JavaScript学习06 JS事件对象 事件对象:当事件发生时,浏览器自动建立该对象,并包含该事件的类型.鼠标坐标等. 事件对象的属性:格式:event.属性. 一些说明: event代表事件的状 ...

随机推荐

  1. 判断 .NET Framework安装版本

    How To Determine the .NET Framework Installed Versions This topic is a how to.Please keep it as clea ...

  2. java关键字extends(继承)、Supe(父类引用空间)、 This(方法调用者对象)、Instanceof(实例类型-判断对象是否属于某个类)、final(最终)、abstract(抽象) 、interface(接口)0

    java 继承使用关键字extends   继承的作用:减少代码量,优化代码 继承的使用注意点: 1子类不能继承父类的私有变量 2.子类不能继承父类的构造方法 3.子类在调用自己的构造方法时 会默认调 ...

  3. 用Ghost进行备份还原

    今天给大伙介绍一下怎么用Ghost给自己的系统进行备份和还原,在这里我用的是U盘启动盘(电脑店)里面的手动Ghost.   首先给大家介绍一下Ghost界面的一些相关选项的含义:(虽然难看但希望大伙们 ...

  4. mongodb安装、启动、远程连接

    1.现在mongodb安装包 mongodb-linux-x86_64-3.0.6.tgz 2.解压缩安装包 tar zxvf  mongodb-linux-x86_64-3.0.6.tgz /opt ...

  5. addEventListener详解

    为什么需要addEventListener? 先来看一个片段: html代码 <div id="box">追梦子</div> 用on的代码 window.o ...

  6. 动态创建 Lambda 表达式

    首先我们看一个简单 Lambda 表达式的构成. i => i > 5 在这个表达式中,"i" 被称为 Parameter,"i > 5" 是 ...

  7. MongoDB聚合运算之group和aggregate聚集框架简单聚合(10)

    聚合运算之group 语法: db.collection.group( { key:{key1:1,key2:1}, cond:{}, reduce: function(curr,result) { ...

  8. Chrome Extension 检查视图(无效)处理方法

    最近闲来无事,简单看了下Chrome扩展的开发,并且开发一个小小的翻译插件(TranslateBao)作为练手,开发细节不详述了,如果有新学习chrome extension开发的新人,可以参考源码, ...

  9. 未能加载文件或程序集“System.Web.DataVisualization...”

    启动web项目发现未能加载文件或程序集“System.Web.DataVisualization...” 这是因为项目bin目录缺少“System.Web.DataVisualization.dll” ...

  10. java中的多线程

    什么是多线程? 首先得知道什么是线程? 线程是一组指令的集合,或者是程序的特殊段,它可以在程序里独立执行.也可以把它理解为代码运行的上下文.所以线程基本上是轻量级的进程,它负责在单个程序里执行多任务. ...