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 相关文章推荐
对象特征检测法判断浏览器对javascript对象的支持
Jul 25 Javascript
jQuery避免$符和其他JS库冲突的方法对比
Feb 20 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
js动态生成Html元素实现Post操作(createElement)
Sep 14 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
javascript跨域请求包装函数与用法示例
Nov 03 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Mar 02 Javascript
jQuery插件HighCharts实现的2D条状图效果示例【附demo源码下载】
Mar 15 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
Aug 22 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 Javascript
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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
php简单开启gzip压缩方法(zlib.output_compression)
2013/04/13 PHP
jqPlot jquery的页面图表绘制工具
2009/07/25 Javascript
javascript 面向对象编程基础:封装
2009/08/21 Javascript
JS文本获得焦点清除文本文字的示例代码
2014/01/13 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
json对象转为字符串,当做参数传递时加密解密的实现方法
2016/06/29 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
vue组件编写之todolist组件实例详解
2018/01/22 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
c++生成dll使用python调用dll的方法
2014/01/20 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
Python操作SQLite数据库的方法详解
2017/06/16 Python
python3调用R的示例代码
2018/02/23 Python
Django中reverse反转并且传递参数的方法
2019/08/06 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
python GUI库图形界面开发之PyQt5滑块条控件QSlider详细使用方法与实例
2020/02/28 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
基于python实现监听Rabbitmq系统日志代码示例
2020/11/28 Python
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果
2014/07/21 HTML / CSS
英国工艺品购物网站:Minerva Crafts
2018/01/29 全球购物
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
美国山地自行车、露营、户外装备和服装购物网站:Aventuron
2018/05/05 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
仓库保管员岗位职责
2013/12/20 职场文书
党课培训主持词
2014/04/01 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
六年级语文下册教学计划
2015/01/22 职场文书
慰问信格式
2015/02/14 职场文书
应聘教师自荐信
2015/03/26 职场文书
python中tkinter复选框使用操作
2021/11/11 Python
mybatis 获取更新记录的id
2022/05/20 Java/Android