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 相关文章推荐
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
HTTP 304错误的详细讲解
Nov 13 Javascript
JQuery拖动表头边框线调整表格列宽效果代码
Sep 10 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
Angular.js自动化测试之protractor详解
Jul 07 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
Aug 28 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
js实现简单的日历显示效果函数示例
Nov 25 Javascript
vue设置默认首页的操作
Aug 12 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
谈一谈收音机的高放电路
2021/03/02 无线电
oracle资料库函式库
2006/10/09 PHP
PHP 文件编程综合案例-文件上传的实现
2013/07/03 PHP
php生成excel文件的简单方法
2014/02/08 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
golang与PHP输出excel示例
2016/07/22 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
简单几行JS Code实现IE邮件转发新浪微博
2013/07/03 Javascript
PHP开发者必须掌握的6个关键字
2014/04/14 Javascript
js选项卡的实现方法
2015/02/09 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
2016/10/24 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python迭代器与生成器详解
2016/03/10 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
提高python代码运行效率的一些建议
2020/09/29 Python
Html5 APP中监听返回事件处理的方法示例
2018/03/15 HTML / CSS
英格兰足协官方商店:England Store
2019/07/12 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
护理专科学生自荐书
2014/07/05 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
上课睡觉检讨书300字
2014/11/18 职场文书
幼儿园个人总结
2015/02/28 职场文书
《叶问2》观后感
2015/06/15 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android