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

要想让 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. 《Android进阶》之第三篇 深入理解android的消息处理机制

    Android 异步消息处理机制 让你深入理解 Looper.Handler.Message三者关系 android的消息处理机制(图+源码分析)——Looper,Handler,Message an ...

  2. Python进阶 - 对象,名字以及绑定

    Python进阶 - 对象,名字以及绑定 1.一切皆对象 Python哲学: Python中一切皆对象 1.1 数据模型-对象,值以及类型 对象是Python对数据的抽象.Python程序中所有的数据 ...

  3. Fast data loading from files to R

    Recently we were building a Shiny App in which we had to load data from a very large dataframe. It w ...

  4. 使用MySQLdb操作Mysql数据库

    MySQLdb简介 MySQL是一个小型关系型数据库管理系统,开发者为瑞典MySQLAB公司.在2008年1月16号被Sun公司收购.目前MySQL被广泛地应用在Internet上的中小型网站中.由于 ...

  5. SQL SERVER 自动生成 MySQL 表结构及索引 的建表SQL

          SQL SERVER的表结构及索引转换为MySQL的表结构及索引,其实在很多第三方工具中有提供,比如navicat.sqlyog等,但是,在处理某些数据类型.默认值及索引转换的时候,总有些 ...

  6. Jquery操作Table

    Jquery 操作 Html Table 是很方便的,这里对表格的基本操作进行一下简单的总结. 首先建立一个通用的表格css 和一个 表格Table: table { border-collapse: ...

  7. Dubbo有意思的特性介绍

    Duboo 不单让我们可以像使用本地服务一样的使用远程服务,还设计了很多特性来满足我们平时开发时常见的场景,省却了我们不少麻烦,真是一款有良心的框架,下面针对这些场景和解决方案来具体解释下: 1.接口 ...

  8. C++实现密码强度测试

    最近在博客中看到许多用js写的密码强度检测,我觉得挺有意思的,所以呢我打算自己也写个来玩玩,最可悲的是我还没学js,当然这不重要,所以呢打算用C++来写一个密码强度检测,这里我来给大家说说用JS写的和 ...

  9. SQL之删除触发器

    比如要删除的触发器名字叫dbo.test_trigger. 先判断这个触发器是否存在,判断存在后删除 if exists (select * from sysobjects where name = ...

  10. ThinkPHP 参数绑定原理

    ThinkPHP里有一个参数绑定的功能 想自己试着写一个类似的 主要利用到PHP里的反射的API <?php class Index { public function edit($id=0) ...