事件绑定,就是要对某一个东西进行操作。(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!)

要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。

在JavaScript中,有三种常用的绑定事件的方法:

  1. 在DOM元素中直接绑定;
  2. 在JavaScript代码中绑定;
  3. 绑定事件监听函数。

1、用例子的形式来给大家解释一下,如何在DOM元素中直接绑定。

单击一个按钮,弹出警告框的代码

<input onclick="myAlert()" type="button" value="点击我,弹出警告框" />
<script type="text/javascript">
function  alert(){
alert("hello,我是警告框");
}
</script>

是不是很简单,然后继续吧...

2、在JavaScript代码中绑定(绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发)

<input id="demo" type="button" value="点击我,显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素
}
</script>

3、绑定事件监听,绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。

①.addEventListener(eventName,handle,useCapture)。

标准的绑定事件监听函数的方法

eventName 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
handle 事件句柄函数,即用来处理事件的函数。
useCapture

Boolean类型,是否使用捕获,一般用false 。

②.attachEvent(eventName,handle);

elementObject DOM对象(即DOM元素)。
eventName 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
handle 事件句柄函数,即用来处理事件的函数。  

javaScript事件绑定的更多相关文章

  1. 第一百二十一节,JavaScript事件绑定及深入

    JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...

  2. Javascript事件绑定的几种方式

    Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...

  3. Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)

    JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...

  4. 详解javascript事件绑定使用方法

    由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...

  5. javascript事件绑定和普通事件的区别

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. javascript 事件绑定

    一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...

  7. javascript事件绑定1-模拟jquery可爱的东西

    1.给对象添加事件attachEvent(兼容IE,不兼容ff.chrome) <html xmlns="http://www.w3.org/1999/xhtml"> ...

  8. JavaScript事件绑定的常见方式

    在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...

  9. JavaScript事件绑定的三种方式

    (一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...

随机推荐

  1. JVM学习笔记二:JVM参数

    所有线程共享的内存主要有两块:堆内存和方法区. 其中堆内存分为两块:新生代Young generation(Eden区.From Survivor区.To Survivor区).老年代Tenured ...

  2. (转ORCLE导入导出命令)

    oracle数据库导入导出命令! Oracle数据导入导出imp/exp 功能:Oracle数据导入导出imp/exp就相当与oracle数据还原与备份.   大多情况都可以用Oracle数据导入导出 ...

  3. Http学习之使用HttpURLConnection发送post和get请求(3)

    使用HttpURLConnection发送post和get请求 但我们常常会碰到这样一种情况: 通过HttpURLConnection来模拟模拟用户登录Web服务器,服务器使用cookie进行用户认证 ...

  4. lucene全文搜索之四:创建索引搜索器、6种文档搜索器实现以及搜索结果分析(结合IKAnalyzer分词器的搜索器)基于lucene5.5.3

    前言: 前面几章已经很详细的讲解了如何创建索引器对索引进行增删查(没有更新操作).如何管理索引目录以及如何使用分词器,上一章讲解了如何生成索引字段和创建索引文档,并把创建的索引文档保存到索引目录,到这 ...

  5. (转)对Http协议的长连接和短连接新的认识

    转载来自:http://www.cnblogs.com/zuoxiaolong/p/life49.html一直对长连接短连接模模糊糊,看着该博主的文章,豁然开朗~ 引言 最近刚到公司不到一个月,正处于 ...

  6. 如何在office2007中插入MathType教学

    很多人在安装MathType数学公式编辑器时可能会遇到这个问题,MathType安装好了,可是在office2007的菜单栏中没有MathType这个选项卡,也就是说MathType没有成功加载在of ...

  7. angular多页面切换传递参数

    <!DOCTYPE html> <html lang="en" ng-app="myapp"> <head> <met ...

  8. JavaScript数组基础及实例

    js数组 和var i=1;这样的简单存储一样是js中的一种数据结构,是专门用来存储多个数据的一种数据结构. 摘:数组是一组数据的集合,其表现形式就是内存中的一段连续的内存地址,数组名称其实就是连续内 ...

  9. Redis数据类型之List(三)

         前言:list即链表,它是一个能维持数据先后顺序的列表,便于在表的两端追加和删除数据,中间位置的存取具有O(N)的时间复杂度,是一个双向链表. 一.内部原理            redis ...

  10. rest api get 查询接口 多个参数

    查询时,使用get,传递参数至服务器. angular js中,$http可以直接传递object,在get中,params:data 在服务端, query(x=x,y=y)可写成 query(** ...