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中的call()和apply()方法
Nov 28 Javascript
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)
Jan 26 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
JavaScript微信定位功能实现方法
Nov 29 Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 Javascript
jquery获取下拉框中的循环值
Feb 08 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
Laravel admin实现消息提醒、播放音频功能
Jul 10 Javascript
jquery 插件重新绑定的处理方法分析
Nov 23 jQuery
Postman动态获取返回值过程详解
Jun 30 Javascript
js用正则表达式筛选年月日的实例方法
Jan 04 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
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
event.srcElement+表格应用
2006/08/29 Javascript
JavaScript 存在陷阱 删除某一区域所有节点
2010/05/10 Javascript
JavaScript 模拟类机制及私有变量的方法及思路
2013/07/10 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
常见的浏览器Hack技巧整理
2017/06/29 Javascript
JavaScript原型继承_动力节点Java学院整理
2017/06/30 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
2018/08/03 Javascript
Nodejs中获取当前函数被调用的行数及文件名详解
2018/12/12 NodeJs
Vue动态修改网页标题的方法及遇到问题
2019/06/09 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
[01:00]一分钟回顾2018DOTA2亚洲邀请赛现场活动
2018/04/07 DOTA
Python金融数据可视化汇总
2017/11/17 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
python pygame实现球球大作战
2019/11/25 Python
python创建ArcGIS shape文件的实现
2019/12/06 Python
HTML5自定义视频播放器源码
2020/01/06 HTML / CSS
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
六查六看剖析材料
2014/02/15 职场文书
公司募捐倡议书
2014/05/14 职场文书
公司会议策划方案
2014/05/17 职场文书
运动员口号
2014/06/09 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
元旦晚会活动总结
2014/07/09 职场文书
医德医风自我评价
2014/09/19 职场文书
matlab xlabel位置的设置方式
2021/05/21 Python
36个正则表达式(开发效率提高80%)
2021/11/17 Javascript
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js