脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JavaScript Dom 绑定事件

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命名约定的最佳实践指南

    JavaScript命名约定的最佳实践指南

    js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于JavaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • 原生JS实现首页进度加载动画

    原生JS实现首页进度加载动画

    这篇文章主要为大家详细介绍了原生JS实现首页进度加载动画,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript中日期函数new Date()的浏览器兼容性问题

    javascript中日期函数new Date()的浏览器兼容性问题

    这篇文章主要介绍了javascript中日期函数new Date()的浏览器兼容性问题,需要的朋友可以参考下
    2015-09-09
  • javascript实现回到顶部特效

    javascript实现回到顶部特效

    当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。
    2015-05-05
  • javascript中去除数组重复元素的实现方法【实例】

    javascript中去除数组重复元素的实现方法【实例】

    下面小编就为大家带来一篇javascript中去除数组重复元素的实现方法【实例】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-04-04
  • 分享XmlHttpRequest调用Webservice的一点心得

    分享XmlHttpRequest调用Webservice的一点心得

    因为项目需要，以后前端、手机客户端调用ASP.NET的Webservice来获取信息.所以这段时间开始看Webservice，试着通过XmlHttpRequest调用Webservice，过程中碰到不少问题，也有不少的收获
    2012-07-07
  • Bootstrap实现下拉菜单效果

    Bootstrap实现下拉菜单效果

    这篇文章主要为大家详细介绍了Bootstrap实现下拉菜单效果的相关资料,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JavaScript 大数据相加的问题

    JavaScript 大数据相加的问题

    写一个函数处理大数据的相加问题，所谓的大数据是指超出了整型，长整型之类的常规数据类型表示范围的数据。实现语言不限。
    2011-08-08
  • 使用JavaScript实现实时搜索建议功能

    使用JavaScript实现实时搜索建议功能

    在我们的技术旅程中,JavaScript 无疑是一个不可或缺的伙伴,这篇文章主要为大家详细介绍了如何使用 JavaScript 来实现一个复杂功能,即实时搜索建议,感兴趣的可以了解下
    2024-02-02
  • JS画图(非VML)--兼容IE/FF

    JS画图(非VML)--兼容IE/FF

    JS画图(非VML)--兼容IE/FF...
    2006-12-12

最新评论