javaScript事件绑定
事件绑定,就是要对某一个东西进行操作。(因为你想让他实现什么效果,所以就得绑定他,哈哈哈!)
要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称。
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数。
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事件绑定的更多相关文章
- 第一百二十一节,JavaScript事件绑定及深入
JavaScript事件绑定及深入 学习要点: 1.传统事件绑定的问题 2.W3C事件处理函数 3.IE事件处理函数 4.事件对象的其他补充 事件绑定分为两种:一种是传统事件绑定(内联模型,脚本模型) ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- Javascript事件模型(三):JavaScript事件绑定方法总结(及Jquery)
JavaScript中绑定事件的方法主要有三种: 1 在DOM元素中直接绑定 2 JavaScript代码中直接绑定 3 绑定事件监听函数 JQuery中绑定事件的几种方法 主要有on().bind( ...
- 详解javascript事件绑定使用方法
由于html是从上至下加载的,通常我们如果在head部分引入javascript文件,那么我们都会在javascript的开头添加window.onload事件,防止在文档问加载完成时进行DOM操作所 ...
- javascript事件绑定和普通事件的区别
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript 事件绑定
一.最简单和向后兼容性最好的事件绑定方法是把事件绑定到元素标识的属性.事件属性名称由事件类型外加一个“on”前缀构成.这些属性也被称为事件处理器 <INPUT TYPE="text&q ...
- javascript事件绑定1-模拟jquery可爱的东西
1.给对象添加事件attachEvent(兼容IE,不兼容ff.chrome) <html xmlns="http://www.w3.org/1999/xhtml"> ...
- JavaScript事件绑定的常见方式
在Javascript中,事件绑定一共有3种方式: ① 行内绑定 ② 动态绑定 ③ 事件监听 原文: https://mbd.baidu.com/newspage/data/landingsuper? ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
随机推荐
- 导出CSV,导出excel数字过长显示科学计数法解决方案
再导出CSV表格时发现数字超过一定长度后会缩写成科学计数法,对于手机号和身份证就比较尴尬了. 在网上找了一下,大部分都是加"'"将数字转换为字符串,但是纠结于导出的数字前面有个单引 ...
- Akka(2):Actor生命周期管理 - 监控和监视
在开始讨论Akka中对Actor的生命周期管理前,我们先探讨一下所谓的Actor编程模式.对比起我们习惯的行令式(imperative)编程模式,Actor编程模式更接近现实中的应用场景和功能测试模式 ...
- kotlin语言使用初体验(一)
居说谷歌新认的干儿子kotlin极为受宠,隐隐有替代Java在 android平台老大位置的趋势.kotlin有谷歌撑腰,加上自己的底子也厚,再之与Java无缝兼容,将来在流行的编程语言中占有一席之地 ...
- 在host-only模式下ssh不插网线
visualbox在host-only模式下,宿主机可以在没有网络的条件下ssh虚拟机. 设置方法: 1.在visualbox中,选择全局设置(preference)--网络(network)-- h ...
- window.opener的用法
window.opener 主要用来打开窗体的父窗体,可以通过这种方式设置父窗体的值或者调用js方法. 例如: 1,window.opener.test(); ---调用父窗体中的test()方法 2 ...
- (转+原创)java的枚举类型Enum解释
原文:http://www.cnblogs.com/mxmbk/articles/5091999.html 下文中还添加了个人的一些补充和理解. 在Java SE5之前,我们要使用枚举类型时,通常会使 ...
- tomcat服务器端口冲突问题的解决
问题:tomcat服务器端口冲突 原因:服务器端口被占用:重启服务器之前原来的服务器没有关闭. 解决方案: 方案一:把占用的端口结束(方便快捷) 在cmd窗口输入命令 netstat -ano (查看 ...
- Spring 4学习——问题与注意事项(一)
1.Spring项目依赖的jar包有5个: 2.applicationContext.xml文件中,如下bean的property的name值对应的是HelloWorld类中的setter方法,即na ...
- msf 之 webshell 提权
首先建议一下到网上查查meterpreter的用法在看这篇文章,理解为什么要使用msf来提权(因为msf里边有个meterpreter很强大 ^_^)Metasploit 拥有msfpayload 和 ...
- yield详解
生成器generator 一个函数调用时返回一个迭代器,那这个函数就叫做生成器(generator),如果函数中包含yield语法,那这个函数就会变成生成器 yeild能暂时的保留函数的运行位置,每次 ...