事件

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. display:table-cell的应用

    一.display:table-cell属性简述 display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以及其他现代浏览器都是支持此属性的,但是IE6 ...

  2. NOIP2003pj栈[卡特兰数]

    题目背景 栈是计算机中经典的数据结构,简单的说,栈就是限制在一端进行插入删除操作的线性表. 栈有两种最重要的操作,即pop(从栈顶弹出一个元素)和push(将一个元素进栈). 栈的重要性不言自明,任何 ...

  3. 【HeadFirst设计模式】13.与设计模式相处

    模式: 是在某情境下,针对某问题的某种解决方案. 要点: 让设计模式自然而然地出现在你的设计中,而不是为了使用而使用. 设计模式并非僵化的教条,你可以依据自己的需要采用或者进行调整. 总是使用最简单的 ...

  4. 【html】【0】开始的序言

    人生总得做点什么才显得有意义,在牛逼的梦想也抵挡不住你傻逼似的坚持! 1>本系列适用于没有任何计算机语言基础的小白入门级教程 2>为了我喜欢的一个女生小娜娜 3>为自己系统的学习ht ...

  5. win10开始菜单打不开的解决办法

    解决方法: 1.在Win10系统下按Win+R打开运行,输入services.msc回车打开服务: 2.在服务中找到User Manager服务;3.打开usermanager服务属性,将其启动类型设 ...

  6. 深入研究Clang(四) Clang编译器的简单分析

    作者:史宁宁(snsn1984) 首先我们确定下Clang编译器的详细内容和涵盖范围.之前在<LLVM每日谈之二十 Everything && Clang driver>中 ...

  7. zTree市县实现三个梯级DAO接口测试

    zTree市县实现三个梯级DAO接口测试 ProvinceDaoTest.java: /** * @Title:ProvinceDaoTest.java * @Package:com.gwtjs.da ...

  8. n皇后问题 [随机化算法,拉斯维加斯算法]

    问题: 如何能够在 n×n 的国际象棋棋盘上放置八个皇后,使得任何一个皇后都无法直接吃掉其他的皇后?为了达到此目的,任两个皇后都不能处于同一条横行.纵行或斜线上. 分析: 这题常规的解法应该是回溯法, ...

  9. WP-player——WordPress的一款好用的音乐插件

    作者的主页:http://webjyh.com/wp-player/ 安装:在WordPress后台搜索安装即可,或者去作者的主页下载安装. 使用方法:这个插件是通过短代码调用的,安装好插件之后便可以 ...

  10. es6 proxy代理

    es6 新增构造函数 Proxy Proxy 构造函数,可以使用new 去创建,可以往里面插入两个参数,都是对象 let target = {} let handler = {} let proxy ...