JavaScript Dom 绑定事件操作实例详解


Posted in Javascript onOctober 02, 2019

本文实例讲述了JavaScript Dom 绑定事件操作JavaScript Dom 绑定事件操作。分享给大家供大家参考,具体如下:

JavaScript  Dom 绑定事件

// 先获取Dom对象,然后进行绑定
document.getElementById('xx').onclick
document.getElementById('xx').onfocus
// 谁调用这个函数,这个this就指向谁

this:当前出发事件的标签、全局对象 window

一、绑定方式

<input id='i1' type='button' onclick='ClickOn(this)'>
function ClickOn(this){
   // this 带指当前点击的标签
}

二、绑定方式

<input id='i1' type='button'>
document.getElementById('i1').onclick = function(){
   // this 带指当前点击的标签
}
var myTrs = document.getElementsByTagName("tr");
var len = myTrs.length;
for(var i=0;i<len;i++){
  myTrs[i].onmouseover = function(){ //绑定事件
  this.style.backgroundColor = "red";
}

三、绑定方式

一次事件触发两个结果: addEventListener、w3c提供

标签对象.addEventListener('click',function(){console.log('aaa');},false);
标签对象.addEventListener('click',function(){console.log('bbb');},false);

:三个参数:false 代表事件的模型。冒泡模型。

:三个参数:true 代表事件的模型。捕捉模型。

例子:

迭代标签:鼠标单击标签后A与a同时出发事件

<div id='A'>
  <div id='a'></div>
</div>
a.addEventListener('click',function(){console.log('aaa');},false);
A.addEventListener('click',function(){console.log('AAA');},false);

:冒泡模型:a标签先输出、A标签后输出

:捕捉模型:A标签先输出、a标签后输出

JavaScript Dom 绑定事件操作实例详解

PS:这里再为大家附上javascript系统自带事件参考表供大家参考查询:

javascript事件与功能说明大全:
http://tools.3water.com/table/javascript_event

更多关于JavaScript相关内容可查看本站专题:《JavaScript事件相关操作与技巧大全》、《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
IE8 中使用加速器(Activities)
May 14 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
在AngularJS中如何使用谷歌地图把当前位置显示出来
Jan 25 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
微信小程序 实现tabs选项卡效果实例代码
Oct 31 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
Mar 06 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 Javascript
小程序实现上下切换位置
Nov 16 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
JavaScript 面向对象基础简单示例
Oct 02 #Javascript
Nautil 中使用双向数据绑定的实现
Oct 02 #Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
Oct 02 #Javascript
基于iview-admin实现动态路由的示例代码
Oct 02 #Javascript
你不可不知的Vue.js列表渲染详解
Oct 01 #Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 #Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 #Javascript
You might like
深入PHP curl参数的详解
2013/06/17 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
图片onload事件触发问题解决方法
2011/07/31 Javascript
javascript作用域容易记错的两个地方分析
2012/06/22 Javascript
JavaScript中json使用自己总结
2013/08/13 Javascript
Bootstrap前端开发案例一
2016/06/17 Javascript
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
2020/01/12 Javascript
jQuery 实现扁平式小清新导航
2020/07/07 jQuery
Python实现扫描局域网活动ip(扫描在线电脑)
2015/04/28 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
对Django中内置的User模型实例详解
2019/08/16 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
mac使用python识别图形验证码功能
2020/01/10 Python
Pycharm内置终端及远程SSH工具的使用教程图文详解
2020/03/19 Python
python3:excel操作之读取数据并返回字典 + 写入的案例
2020/09/01 Python
python 线程的五个状态
2020/09/22 Python
HTML5之SVG 2D入门6—视窗坐标系与用户坐标系及变换概述
2013/01/30 HTML / CSS
英国领先的运动营养品牌:Protein Dynamix
2018/01/02 全球购物
业务经理岗位职责
2013/11/11 职场文书
酒店销售主管岗位职责
2014/01/04 职场文书
医院检讨书范文
2014/02/01 职场文书
大学生社会实践评语
2014/04/25 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
个人校本研修方案
2014/05/26 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
先进党员事迹材料
2014/12/24 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
本地通过nginx配置反向代理的全过程记录
2021/03/31 Servers
oracle表分区的概念及操作
2021/04/24 Oracle
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
使用@Value值注入及配置文件组件扫描
2021/07/09 Java/Android
CSS使用伪类控制边框长度的方法
2022/01/18 HTML / CSS