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

更新时间：2019年10月02日 10:59:56 作者：kevin.Xiang

这篇文章主要介绍了JavaScript Dom 绑定事件操作,结合实例形式详细分析了JavaScript实现dom绑定事件的相关实现方法与操作注意事项,需要的朋友可以参考下

本文实例讲述了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标签后输出

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

javascript事件与功能说明大全：
http://tools.jb51.net/table/javascript_event

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

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

您可能感兴趣的文章:

浅谈javascript中的DOM方法
DOM就是Html页面的模型，将每个标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。比如通过操作文本框的DOM对象，就可以读取文本框中的值、设置文本框中的值。
2015-07-07
Javascript 数组添加 shuffle 方法的实现代码
PHP 里面有个非常方便的打乱数组的函数 shuffle() ，这个功能在许多情况下都会用到，但 javascript 的数组却没有这个方法，没有不要紧，可以扩展一个，自己动手，丰衣足食嘛。
2009-09-09
js获取多个tagname的节点数组
写了个获取多个tagname节点集合的小方法。类似于jQuery的$(‘iput,select,textarea’,'#form’)的效果，返回是按节点在原有文档流中的顺序返回的
2013-09-09
对于Javascript 执行上下文的全面了解
下面小编就为大家带来一篇对于Javascript 执行上下文的全面了解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JavaScript内置对象Math与String详细介绍
这篇文章主要介绍了JavaScript内置对象Math与String的介绍与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
这篇文章主要介绍了element-ui 的el-button组件中添加自定义颜色和图标的实现方法，目前的解决方案是：添加一个自定义全局指令，同时在element-ui源码中，加入对应的组件。需要的朋友跟随小编一起看看吧
2018-10-10
关于JavaScript的面向对象和继承有利新手学习
这是一篇关于JavaScript的面向对象和继承的文章,对想学习JavaScript中面向对象的同学来说是很有帮助,虽然一些Javascript用户可能永远也不需要知道原型或面向对象语言的性质，但是那些来自传统面向对象的语言的开发者使用的时候会发现JavaScript的继承模型非常的奇怪
2013-01-01
JS匿名函数和匿名自执行函数概念与用法分析
这篇文章主要介绍了JS匿名函数和匿名自执行函数概念与用法,结合实例形式分析了匿名函数和匿名自执行函数的概念、功能、应用场景及相关使用技巧,需要的朋友可以参考下
2018-03-03
JavaScript必知必会(九）function 说起闭包问题
这篇文章主要介绍了JavaScript必知必会(九）function 说起闭包问题的相关资料,需要的朋友可以参考下
2016-06-06
TS中最常见的声明合并(接口合并)
这篇文章主要介绍了TS中最常见的声明合并：接口合并,TS中的声明合并，指的就是编译器会针对同名的声明合并为一个声明,合并后的声明会同时拥有原先两个或多个声明的特性,接口的合并也是一样，它会将双方的成员放到一个同名的接口里，更多详细内容请参考下面文章内容
2021-12-12