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 绑定事件的更多相关文章
- JavaScript(1)---绑定事件、解除绑定事件
JavaScript(1)---绑定事件.解除绑定事件 一.事件概述 1.事件的几个概念 · 事件 指的是文档或者浏览器窗口中发生的一些特定交互瞬间.我们可以通过侦听器(或者处理程序)来预定事件,以便 ...
- 关于动态生成dom绑定事件失效的原因
之前做项目都是直接用jquery的bind绑定事件,不过当时都不是动态生成dom元素,而是已经页面中原本存在的dom元素进行事件绑定,最近在测试给动态生成的dom绑定事件的时候发现事件失效,于是就测试 ...
- JavaScript中绑定事件监听函数的通用方法addEvent() 和 事件绑定之bindEvent()与 unBindEvent()函数
下面绑定事件的代码,进行了兼容性处理,能够被所有浏览器支持: function addEvent(obj,type,handle){ try{ // Chrome.FireFox.Opera.Safa ...
- jquery每次动态加载dom,绑定事件会多一次,
jquery绑定事件,每次动态加载dom,绑定的事件会加1,比如动态加载dom5次,点那个点击事件会弹出5次 解决办法就是在每次绑定之前解绑定. $('.seek-footer .btn1').off ...
- javascript元素绑定事件
js元素绑定事件 想给一个元素绑定一个方法之后,在绑定一个方法而且不被覆盖 window.onload = function () { alert('a'); } window.onlaod=fu ...
- Jquery获取DOM绑定事件
获取到当前正在执行的事件: $('#testDive').bind('click', function(event){alert('event: ' + event.type)}); 获取所有绑定事件 ...
- JavaScript DOM 注册事件
一个HTML是一个DOM树,每一个节点都是DOM对象,整个HTML其实也是一个DOM对象,根节点是<html>; 在HTML页面初始化的时候,JavaScript会自动帮DOM对象注册消息 ...
- DOM绑定事件
addEventListener(event,function,useCapture)event:事件名,比如clickuseCapture布尔值,指定事件是否在捕获或冒泡阶段执行. 可能值: tru ...
- DOM 绑定事件
// 1.获取事件源 var oDiv = document.getElementById('box'); console.log(oDiv); //2.事件 (1)直接绑定匿名函数 oDiv.onc ...
随机推荐
- JS设计模式——单例模式剖析
转载于原文地址:https://blog.csdn.net/q1056843325/article/details/52933426 举一个通俗的例子,在页面中点击登录按钮,弹出了一个登录浮窗,这个登 ...
- cs231n笔记(二) 最优化方法
回顾上一节中,介绍了图像分类任务中的两个要点: 假设函数.该函数将原始图像像素映射为分类评分值. 损失函数.该函数根据分类评分和训练集图像数据实际分类的一致性,衡量某个具体参数集的质量好坏. 现在介绍 ...
- java课程课后作业05之动手动脑
一.使用Files. walkFileTree()找出指定文件夹下所有大于指定大小(比如1M)的文件 此代码没有使用walkfiletree,两者的差别在于walkfiletree在遍历文件的时候有一 ...
- python全栈开发 * 线程锁 Thread 模块 其他 * 180730
一,线程Thread模块1.效率更高(相对于进程) import time from multiprocessing import Process from threading import Thre ...
- Robot Framework自动化测试Selenium2Library库详细用法
一.浏览器驱动 通过不同的浏览器执行脚本. Open Browser Htpp://www.xxx.com chrome 浏览器对应的关键字: firefox FireFox ff internete ...
- SetupFactory 制作安装包
SetupFactory9.0.3.0Trial汉化破解版+使用教程 https://download.csdn.net/download/u010188178/10652645
- Fernflower 反编译.class文件
最近有些奇怪Intellij IDEA通过什么查看的源码,通过打开源码意外的发现如下注释 原来是通过Fernflower这个反编译工具w(゚Д゚)w. 使用Fernflower反编译出的代码相当友好, ...
- 在 vue 中使用 vieiwer 图片预览插件
https://blog.csdn.net/WestLonly/article/details/79801800?utm_source=blogxgwz0 首先,感谢原作者 官网链接 github地址 ...
- python基础之 while 逻辑运算符 格式化输出等
1.while循环 while 条件: 循环体 while 条件: 循环体 else: 循环体 重点: 当条件为真的时候,就进入循环体,从上到下依次执行,执行完最后一条语句时,while并不是直接退出 ...
- Golang--选择、循环语法总结
1.判断语句if 条件表达式没有括号 支持初始化表达式 初始化语句的变量自在本block内有效 if a,b,c := 1,2,3;a+b+c>6 { fmt.Println("hah ...