js事件绑定的几种方式
在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定;
在JavaScript代码中绑定;
绑定事件监听函数 一. 在DOM元素中直接绑定
这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:
onXXX="JavaScript Code" 其中: onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
JavaScript Code 为处理事件的JavaScript代码,一般是函数。 例如,单击一个按钮,弹出警告框的代码有如下两种写法。
.原生函数 <input onclick="alert('警告,不要乱点!!!')" type="button" value="点我试试" />
.调用自定义函数 <input onclick="attention()" type="button" value="点我试试22" />
<script type="text/javascript">
function attention(){
alert("提示:这是一个警告提示");
}
</script> 二. 在js代码中绑定
在JavaScript代码中(即<script>标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。 在JavaScript代码中绑定事件的语法为:
elementObject.onXXX=function(){
// 事件处理代码
} 其中:
elementObject 为DOM对象,即DOM元素。
onXXX 为事件名称。
例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性: <input id="demo" type="button" value="点击我,显示 type 属性" />
<script type="text/javascript">
document.getElementById("demo").onclick=function(){
alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签
}
</script> 注:给一个事件绑定多个操作只会执行最后一个
例: document.getElementById("btn1").onclick=function(){
alert("method111");
};
document.getElementById("btn1").onclick=function(){
alert("method222");
};
document.getElementById("btn1").onclick=function(){
alert("method333");
};
只会弹出“method333”;
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。 注:可给一个事件绑定多个操作 addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数 说明
elementObject DOM对象(即DOM元素)。
eventName 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。
handle 事件句柄函数,即用来处理事件的函数。
useCapture Boolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。
例: var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false); 执行顺序为method1->method2->method3 attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
参数 说明
elementObject DOM对象(即DOM元素)。
eventName 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
handle 事件句柄函数,即用来处理事件的函数。 例: var btn1Obj = document.getElementById("btn1");
//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3); 执行顺序为method3->method2->method1 注意:事件句柄函数是指“ 函数名 ”,不能带小括号。 addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。 下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){
try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
obj.addEventListener(type,handle,false);
}catch(e){
try{ // IE8.0及其以下版本
obj.attachEvent('on' + type,handle);
}catch(e){ // 早期浏览器
obj['on' + type] = handle;
}
}
} 这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。 例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:
addEvent(document.getElementById("demo"),"click",myAlert); function myAlert(){
alert("又是一个警告框");
}
在JavaScript中,有三种常用的绑定事件的方法:
- 在DOM元素中直接绑定;
- 在JavaScript代码中绑定;
- 绑定事件监听函数
一. 在DOM元素中直接绑定
这里的DOM元素,可以理解为HTML标签。JavaScript支持在标签中直接绑定事件,语法为:
onXXX="JavaScript Code"
其中:
- onXXX 为事件名称。例如,鼠标单击事件 onclick ,鼠标双击事件 ondouble,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。
- JavaScript Code 为处理事件的JavaScript代码,一般是函数。
例如,单击一个按钮,弹出警告框的代码有如下两种写法。
1.原生函数
<input onclick="alert('警告,不要乱点!!!')" type="button" value="点我试试" />
2.调用自定义函数
- <input onclick="attention()" type="button" value="点我试试22" />
- <script type="text/javascript">
- function attention(){
- alert("提示:这是一个警告提示");
- }
- </script>
二. 在js代码中绑定
在JavaScript代码中(即<script>标签内)绑定事件可以使JavaScript代码与HTML标签分离,文档结构清晰,便于管理和开发。
在JavaScript代码中绑定事件的语法为:
elementObject.onXXX=function(){
// 事件处理代码
}
其中:
- elementObject 为DOM对象,即DOM元素。
- onXXX 为事件名称。
例如,为 id="demo" 的按钮绑定一个事件,显示它的 type 属性:
- <input id="demo" type="button" value="点击我,显示 type 属性" />
- <script type="text/javascript">
- document.getElementById("demo").onclick=function(){
- alert(this.getAttribute("type")); // this 指当前发生事件的HTML元素,这里是<div>标签
- }
- </script>
三. 绑定事件监听函数
绑定事件的另一种方法是用 addEventListener() 或 attachEvent() 来绑定事件监听函数。
注:可给一个事件绑定多个操作
addEventListener()函数语法:
elementObject.addEventListener(eventName,handle,useCapture);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,这里的事件名称没有“ on ”,如鼠标单击事件 click ,鼠标双击事件 doubleclick ,鼠标移入事件 mouseover,鼠标移出事件 mouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
useCapture | Boolean类型,是否使用捕获,一般用false 。这里涉及到JavaScript事件流的概念,后续章节将会详细讲解。 |
例:
attachEvent()函数语法:
elementObject.attachEvent(eventName,handle);
参数 | 说明 |
---|---|
elementObject | DOM对象(即DOM元素)。 |
eventName | 事件名称。注意,与addEventListener()不同,这里的事件名称有“ on ”,如鼠标单击事件 onclick ,鼠标双击事件 ondoubleclick ,鼠标移入事件 onmouseover,鼠标移出事件 onmouseout 等。 |
handle | 事件句柄函数,即用来处理事件的函数。 |
例:
注意:事件句柄函数是指“ 函数名 ”,不能带小括号。
addEventListener()是标准的绑定事件监听函数的方法,是W3C所支持的,Chrome、FireFox、Opera、Safari、IE9.0及其以上版本都支持该函数;但是,IE8.0及其以下版本不支持该方法,它使用attachEvent()来绑定事件监听函数。所以,这种绑定事件的方法必须要处理浏览器兼容问题。
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持:
- function addEvent(obj,type,handle){
- try{ // Chrome、FireFox、Opera、Safari、IE9.0及其以上版本
- obj.addEventListener(type,handle,false);
- }catch(e){
- try{ // IE8.0及其以下版本
- obj.attachEvent('on' + type,handle);
- }catch(e){ // 早期浏览器
- obj['on' + type] = handle;
- }
- }
- }
这里使用 try{ ... } catch(e){ ... } 代替 if ... else... 语句,避免浏览器出现错误提示。
例如,为一个 id="demo" 的按钮绑定事件,鼠标单击时弹出警告框:
addEvent(document.getElementById("demo"),"click",myAlert);
function myAlert(){
alert("又是一个警告框");
}
动态绑定:
jquery给动态添加的dom元素绑定事件
$('input').click(function () { //处理代码 });
这只能是对已经加载好的元素定义事件,那些后来添加插入的元素则需要另行绑定,对于页面中动态添加的元素,在页面加载完成后添加的,因此页面加载时无法给其绑定事件处理函数,好在jquery提供了on方法,如为动态添加的元素附加单击事件。对于jquery1.+的版本直接用on方法, $('body').append('<p id=\"pid\"></p>');
$('#pid').on('click',function(){
//业务逻辑
}); 对于早于1.7的版本用live方法. $('body').append('<p id=\"pid\"></p>');
$('pid').live('click',function(){
//业务逻辑
});
js事件绑定的几种方式的更多相关文章
- js事件绑定的几种方式与on()、bind()的区别
版权声明:本文为博主原创文章,未经博主允许不得转载 一直不是很理解几种js事件绑定之间的区别与联系,今天百度了一下,在此做一总结: 1.如果只是简单的绑定一个事件,可以直接写在行内,点击执行一个函数, ...
- JS事件绑定的三种方式比较
js事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- JS 事件绑定的几种方式 小笔记
第一种 var test=document.getElementById('add'); add.onclick=function(){ alert('1'); } 直接在对象上注册事件 缺点:如果我 ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
- JavaScript事件绑定的三种方式
(一)事件绑定的三种方式 (1)通过on的形式 <script type="text/javascript"> var div = document.getElemen ...
- Javascript事件绑定的几种方式
Javascript的事件绑定主要有四种方法(一下在IE中运行正常,但不保证其他浏览器): [注:onXXX为某一事件,fun为某一function,domId为某一DOM对象id,event类型见后 ...
- jQuery中的事件绑定的几种方式
jQuery目前有on(),bind(),delegate(),live()四种绑定方式,但是随着版本的不断更新,有的方式也相应的被淘汰掉 [band()方式绑定] 3.0版本之前的绑定方式比较常用的 ...
- React事件绑定的几种方式对比
React事件绑定 由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined.通常如果不是直接调用,应该为方法绑定this.绑定方式有以下几种: 1. 在构 ...
随机推荐
- nodeJS服务器的创建和重新启动
一: 首先在nodejs项目里创建一个server.js文件,输入下面代码 var http = require("http"); http.createServer(functi ...
- spring-mybatis-data-common程序级分表操作实例
spring-mybatis-data-common-2.0新增分表机制,在1.0基础上做了部分调整. 基于机架展示分库应用数据库分表实力创建 create table tb_example_1( i ...
- C#中DataTable删除多条数据
//一般情况下我们会这么删除 DataTable dt = new DataTable(); for (int i = 0; i < dt.Rows.Count; i++) { if (99 % ...
- 我的Nginx配置文件
#user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...
- Vue(八):监听属性watch
Vue.js 可以通过 watch 来响应数据的变化. 以下实例模拟购物车里商品数量增加,对应价格也增加 <!--模拟购物车商品数量增加,价格也随之增加--> <div id = & ...
- 第一部分:开发前的准备-第一章 什么是Andorid
第1章 什么是Android Android是一个移动设备的软件栈,它包含操作系统,中间件和一些关键的应用.Android SDK提供工具和必要的API用来在Android平台上使用java程序语言来 ...
- mongodb复制集Replica Set使用简介
MongoDB高可用 对于MongoDB,可以支持使用单机模式提供服务,但是在实际的生产环境中,单机模式将面临很大的风险,一旦这个数据库服务出现问题,就会导致线上的服务出现错误甚至崩溃.因此,在实际生 ...
- java实现urlencode
https://www.cnblogs.com/del88/p/6496825.html ****************************************************** ...
- remmina如何上传文件到linux服务器
1.安装filezilla 2. remmina中选择列表中的主机,点击“外部工具 -> filezilla-xfp.sh” 3. 弹出filezilla,输入主机,端口,用户名,密码,连接, ...
- TCP/IP四层模型讲解笔记
本文转载自:http://www.vuln.cn/2041 OSI七层模型 表示层:用来解码不同的格式为机器语言,以及其他功能. 会话层:判断是否需要网络传输. 传输层:识别端口来指定服务器,如指 ...