关于js中对事件绑定与普通事件的理解
普通事件指的是可以用来注册的事件;
事件绑定是指把事件注册到具体的元素之上。
通俗点说:
普通事件:给html元素添加一个特定的属性(如:onclick);
事件绑定:js代码中通过标记(id tag class)获取元素,给元素添加特定的方法(如:onclick);
扩展:事件监听addEventListener事件可以绑定多次事件,并进行触发
div1.onclick = function(){};
<button onmouseover = " "></button>
1、如果说给同一个元素绑定了两次或者多次相同类型的事件,那么后面的绑定会覆盖前面的绑定
2、不支持DOM事件流 事件捕获阶段目标元素阶段=>事件冒泡阶段
addEventListener
⦁ 如果说给同一个元素绑定了两次或者多次相同类型的事件,所以的绑定将会依次触发
⦁ 支持DOM事件流的
⦁ 进行事件绑定传参不需要on (在我们前端)
addEventListener(“click”,function(){},true); //此时的事件就是在事件冒泡阶段执行
兼容性处理
ie9开始 到ie11 edge:addEventListener
ie9以前:attachEvent/detachEvent
⦁ 进行事件类型传参需要带上on前缀
⦁ 这种方式只支持事件冒泡,不支持事件捕获
比较attachEvent 和 addEventListener:
- attachEvent只支持事件冒泡 addEventListener既支持事件冒泡,也支持事件捕获
- 参数: attachEvent事件类型需要on前缀, addEventListener事件类型不需要on前缀
- 如果使用attachEvent对一个元素的目标阶段绑定了多次事件,那么会按照绑定顺序的相反顺序进行触发;如果使用addEventListener对一个元素的目标阶段绑定多次事件,那么会按照绑定顺序进行触发
关于js中对事件绑定与普通事件的理解的更多相关文章
- js和jQuery中的事件绑定与普通事件
普通事件,是指直接对元素进行事件注册,然后触发 而事件绑定是将事件注册到元素上 两者区别就是在于普通事件不可以重复添加多个事件,若添加也会覆盖,只会触发其中一个事件(最后注册的那个) 而事件绑定是可以 ...
- python 全栈开发,Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- js中的前绑定和后绑定详解
这篇文章详细介绍了js中的前绑定和后绑定,有需要的朋友可以参考一下 其主要意思就是看我有没有用过前绑定,即Dom树中的某些元素在还没有创建出来时,就指定该类型的元素一出生就应该拥有的某些事件.在实际开 ...
- (转载)js(jquery)的on绑定点击事件执行两次的解决办法
js(jquery)的on绑定点击事件执行两次的解决办法—不是事件绑定而是事件冒泡 遇到的问题:jquery中用.on()给页面中新加的元素添加点击事件时,点击事件源,绑定的事件执行两次,这里的ale ...
- js课程 5-13 js事件绑定和鼠标事件注意事项有哪些
js课程 5-13 js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...
- JS中事件绑定函数,事件捕获,事件冒泡
1 事件绑定:事件与函数绑定以及怎么取消绑定 1.1 元素.onclick这种形式,如下: <div id="div1">aaa</div> <scr ...
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
- js中this的绑定规则及优先级
一. this绑定规则 函数调用位置决定了this的绑定对象,必须找到正确的调用位置判断需要应用下面四条规则中的哪一条. 1.1 默认绑定 看下面代码: function foo() { cons ...
- js中同一个onclick绑定了两个js方法出现的问题
问题: js中如果同一个onclick绑定了两个js方法问题,即 <li onclick="f1(),f2()"></li> 两个方法f1,f2中都分别有一 ...
随机推荐
- 160412、DWR使用笔记
DWR是一个框架,简单的说就是能够在javascript直接调用java方法,而不必去写一大堆的javascript代码.它的实现是基于ajax的,可以实现无刷新效果. 网上有不少DWR的例子,但大都 ...
- SignalR循序渐进(一)简单的聊天程序
前阵子把玩了一下SignalR,起初以为只是个real-time的web通讯组件.研究了几天后发现,这玩意简直屌炸天,它完全就是个.net的双向异步通讯框架,用它能做很多不可思议的东西.它基于Owin ...
- 20165330 2017-2018-2 《Java程序设计》第8周学习总结
课本知识总结 第十二章 Java多线程机制 Java中的线程 进程:是程序的一次动态执行过程,它对应了从代码加载.执行至执行完毕的一个完整过程 线程:一个进程在其执行过程中,可以产生多个线程,形成多条 ...
- null array mysqli_fetch_assoc ( mysqli_result $result ) void mysqli_free_result ( mysqli_result $result )
w取最大db_id. if($row=null){ var_dump(123); } var_dump($row); if($rowb=array('ww','w123')){ var_dump(23 ...
- nodejs(一)
nodejs第一章节 使用node来实现第一个http服务器 var http = require(‘http’); http.createServer(function (request, resp ...
- Supervisor快速上手指南(转)
原文:http://maemual.me/index.php/archives/8/ Supervisor是一个进程控制程序.用于监控管理你需要的程序. 当你有一个程序,需要长期在后台运行,并且希望能 ...
- 【云安全与同态加密_调研分析(6)】云计算及云安全主流体系架构与模型——By Me
云计算及云安全的主流体系架构与模型 1. 云计算主流安全参考模型 1.1 云计算安全参考 ...
- Spring boot 打包瘦身方法
背景 随着spring boot 的流行.越来越多的来发着选择使用spring boot 来发 web 应用. 不同于传统的 web 应用 需要 war 包来发布应用. spring boot 应用可 ...
- a=a+1背后的内存模型和CPU高速缓存
学过JAVA的人都知道,程序运行过程中的临时数据,都是从外部存储设备调入内存(物理内存)中,再进行读写操作的.而计算机在执行程序时,对程序的每条指令都是在CPU中执行的,而指令的执行,势必涉及到对数据 ...
- tkprof参数详解
tkprof参数详解 table=schema.table 指定tkprof处理sql trace文件时临时表的模式名和表名 insert=scriptfile 创建一个文件名为scriptfile的 ...