js：事件（注册、解绑、DOM事件流、事件对象、事件委托）
1、注册事件
（1）传统方式注册事件
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(){
alert("hello");
}
b.onclick=function(){
alert("你好");
}
</script>
</body>
- 存在唯一性，同一个元素，同一个事件只能设置一个处理函数，后面注册的处理函数会覆盖前面的处理函数
（2）方法监听注册方式（IE9以上）
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert("hello");
});
b.addEventListener("click", function(){
alert("你好");
});
</script>
</body>
- 注册事件的类型是字符串，必须加引号，且不带on
- 同一个元素同一个时间可以注册多个监听器
2、解绑事件
（1）传统方式
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(){
alert("hello");
b.onclick=null;
}
</script>
</body>
点过一次按钮后事件就失效了
（2）方法监听注册事件后解绑事件
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", fn);//不需要写小括号
function fn(){
alert("hello");
b.removeEventListener("click",fn);
}
</script>
</body>
3、DOM事件流
（1）概念
事件流是从页面中接收事件的顺序
事件发生时会在元素结点之间按照特定的顺序传播，这个传播过程即DOM事件流
从document到html再到元素搜索事件的阶段为捕获阶段，相反，为冒泡阶段
（2）演示
捕获阶段：
<body id="body">
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert("hello");
},true); var mybody=document.getElementById("body");
mybody.addEventListener("click", function(){
alert("body");
},true);
</script>
</body>
- js代码中执行捕获或者冒泡中的一个阶段
- onclick和attachEvent只能得到冒泡阶段
- 参数为false或者省略则为冒泡阶段捕获
冒泡阶段：
<body id="body">
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert("hello");
},false); var mybody=document.getElementById("body");
mybody.addEventListener("click", function(){
alert("body");
},false);
</script>
</body>
阻止冒泡：
<body id="body">
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.addEventListener("click", function(){
alert("hello");
event.stopPropagation();
},false); var mybody=document.getElementById("body");
mybody.addEventListener("click", function(){
alert("body");
},false);
</script>
</body>
- 冒泡被阻止后只能点击一次确定，点击后不会再跳出来新的页面
- event是事件对象
4、事件对象
（1）获取事件对象
<body id="body">
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(event){
console.log(event);
}
</script>
</body>
- event就是一个事件对象，写到侦听函数内部的小括号里面当形参来看
- 事件对象只有有了事件才会存在，是系统自动创建的不需要我们传递参数
- 事件对象是我们的事件的一系列相关数据的集合，跟事件相关
（2）事件对象的属性和方法
<body>
<button id="b1">请点击</button>
<script>
var b=document.getElementById("b1");
b.onclick=function(event){
console.log(event.target);//触发事件的元素
console.log(this);//绑定事件的对象
console.log(event.type);//事件的类型
}
</script>
</body>
5、事件委托（代理、委派）
<body id="body">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ul=document.querySelector("ul");
ul.addEventListener("click",function(){
alert("helo");
})
</script>
</body>
不是每一个子结点设置事件监听器，而是将事件的监听器设置到父节点上，然后利用冒泡原理影响到设置的子结点上
事件委托的作用：只操作了一次dom，提高了程序的性能
js：事件（注册、解绑、DOM事件流、事件对象、事件委托）的更多相关文章
- 从零开始学 Web 之 jQuery（六）为元素绑定多个相同事件，解绑事件
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- 对事件委托绑定click的事件的解绑
大家都知道解绑事件的jquery写法,很简单: $("xxx").unbind("click"); 然后对于事件委托式的事件绑定,亲测,这种解绑方法是无效的, ...
- jQuery事件之解绑事件
语法: $(selector).unbind([eventType][,handler(eventObject)]); 返回值:jQuery 参数解释: eventTypey:类型:String以后包 ...
- 5月23日笔记-js绑定事件、解绑事件、复合事件
each() $("p").each(function(i,ele){ //alert(ele.innerHTML); alert($("p:eq("+i+&q ...
- jQuery在on绑定事件时，使用Function.prototype.bind上下文，只能用off(event)解绑函数，否则可能导致事件叠加
因为一个bind函数,未解绑成功导致事件叠加,搞了一下午. keyup事件绑定: this.$document.on('keyup', this.keyUp.bind(this)); 原解绑函数: t ...
- window.onresize绑定事件以及解绑事件
问题描述 在Vue工程中,添加样式,部分需要做到自适应,需要添加resize事件,由于是单页面应用,如果组件初始化的时候绑定事件,在切换页面的时候不去注销事件,如果来回切换,会让resize事件执行多 ...
- js中邦定事件与解绑支持匿名函数
和一个朋友讨论了一下,DOM2绑定方式都是有名的函数,匿名的处理起来有些麻烦,而且即使是有名的函数,在IE低版本的浏览器也是解除不掉的,this指向需要修改,着实费了一番功夫,这个是兼容ie低版本的, ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- 【JQ】jq动态绑定事件.on()、解绑事件off()
#JQ 绑定与解绑事件的方法的历史演变 1. jquery1.4 及之前的版本,由.click() 或 .bind()方法绑定的事件,不能适用脚本创建的新元素:即是说页面加载完成后,再动态创建的DOM ...
随机推荐
- Apache POI 操作Excel（2）-- POI包引入项目
Apache POI发行版包含对许多文档文件格式的支持.这种支持在几个Jar文件中提供.并非每种格式都需要所有jar.下表显示了POI组件.Maven存储库标记和项目的Jar文件之间的关系. (htt ...
- 浅谈hash
hash 算法介绍 hash说得通俗一点,就是给一个变量编上一个马甲 比如说一个人聪明可爱,举世无双,天资聪慧.活泼机灵...,那么就是叫我了(真不要脸 但是这样是不是显得些许麻烦? 于是人类发明了名 ...
- 题解 P1144 【最短路计数】
这道题用一次SPFA就可以过了.在求最短路的同时,对答案进行统计即可. 实现: \(dis_i\)表示从1到\(i\)的最短路(实在还是不懂的话看程序吧). 当\(dis_i>dis_j+1\) ...
- 内存疯狂换页！CPU怒批操作系统
内存访问瓶颈 我是CPU一号车间的阿Q,前一阵子我们厂里发生了一件大喜事,老板拉到了一笔投资,准备扩大生产规模. 不过老板挺抠门的,拉到了投资也不给我们涨点工资,就知道让我们拼命干活,压榨我们的劳动力 ...
- 手写一个Redux，深入理解其原理
Redux可是一个大名鼎鼎的库,很多地方都在用,我也用了几年了,今天这篇文章就是自己来实现一个Redux,以便于深入理解他的原理.我们还是老套路,从基本的用法入手,然后自己实现一个Redux来替代源码 ...
- 状压DP之吃奶酪
题目 传送们 思路 1≤n≤15,妥妥的状压,数据这么小, 这道题的状压思路还是很好想的,我们定义f[i][s]代表以i为起点,吃掉状态为s的奶酪所需要跑的最短距离,那么显然,我们先枚举状态s,然后枚 ...
- CF833 A The Meaningless Game
题干 Slastyona and her loyal dog Pushok are playing a meaningless game that is indeed very interesting ...
- CVE-2020-5902 F5 BIG-IP 远程代码执行RCE
cve-2020-5902 : RCE:curl -v -k 'https://[F5 Host]/tmui/login.jsp/..;/tmui/locallb/workspace/tmshCmd. ...
- VS2019无法获取本地变量或参数的值，因为它在此指令指针中不可用，可能是因为它已经被优化掉了。
解决方法:
- SpringCloud组件的停更和替换说明
SpringCloud的Hoxton版本,和之前的版本相比,用新的组件替换掉了原来大部分的组件,老的组件现在处于 停更不停用 的状况. 详情见下图(× 的表示之前的组件,现在停更了的:√ 的表示新的替 ...