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 01 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
Aug 15 Javascript
jquery图片播放浏览插件prettyPhoto使用详解
Dec 19 Javascript
jquery实现图片预加载
Dec 25 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
基于Vuejs框架实现翻页组件
Jun 29 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
Apr 02 jQuery
微信小程序拍照和摄像功能实现方法示例
Feb 01 Javascript
微信小程序聊天功能的示例代码
Jan 13 Javascript
Vue如何将页面导出成PDF文件
Aug 17 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
jenkins自动构建发布vue项目的方法步骤
Jan 04 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+SqlServer实现分页显示
2006/10/09 PHP
分享下php5类中三种数据类型的区别
2015/01/26 PHP
php构造函数与析构函数
2016/04/23 PHP
PHP Ajax实现无刷新附件上传
2016/08/17 PHP
laravel unique验证、确认密码confirmed验证以及密码修改验证的方法
2019/10/16 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
你必须知道的JavaScript 变量命名规则详解
2013/05/07 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
css结合js制作下拉菜单示例代码
2014/02/27 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
详解ES6中的三种异步解决方案
2018/06/28 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Vue父组件如何获取子组件中的变量
2019/07/24 Javascript
python中引用与复制用法实例分析
2015/06/04 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
Django进阶之CSRF的解决
2018/08/01 Python
python将一个英文语句以单词为单位逆序排放的方法
2018/12/20 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
Pytorch 多块GPU的使用详解
2019/12/31 Python
Python字符串三种格式化输出
2020/09/17 Python
新电JAVA笔试题目
2014/08/31 面试题
大四学年自我鉴定
2013/11/13 职场文书
2014学雷锋活动心得体会
2014/03/10 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
新闻报道稿范文
2015/07/23 职场文书
SpringBoot生成License的实现示例
2021/06/16 Java/Android