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 ...
随机推荐
- 学习Java的Day05
知识点 关键字,常用类(super,static,final): super 子类对父类的引用,只能在非静态方法中使用 引用父类的成员变量的格式为 super.成员变量名称 引用父类的非静态方法的格式 ...
- 【博弈】HDU - 5963 朋友
题目 B君在围观一群男生和一群女生玩游戏,具体来说游戏是这样的: 给出一棵n个节点的树,这棵树的每条边有一个权值,这个权值只可能是0或1. 在一局游戏开始时,会确定一个节点作为根.接下来从女生开始,双 ...
- ASP.NET MVC 下拉框的传值的两种方式（第二种方式未完成）
控制器代码: public ActionResult Index() { List<SelectListItem> sli = new List<SelectListItem> ...
- em(倍)与px的区别
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- C#状态机Stateless
最近在折腾一些控制相关的软件设计,想起来状态机这个东西,对解决一些控制系统状态切换还是挺有用的. 状态机(有限状态自动机)网上有很多介绍.简单理解就是定义一系列状态,通过一系列的事件,可以使得状态可以 ...
- BZOJ 4055 Misc
原题传送门 比较复杂的一道DP. 设两点(i,j)之间最短路为dis[i][j],则 可转化为: 将该式前后分立,可得: 其中,可以单独求出,后面的部分则需要DP. 设为b(x),枚举i,并计算出从i ...
- 电脑添加多个SSH key
创建新得ssh key ssh-keygen -t rsa -C "excem@excemple" -f ~/.ssh/id_rsa.gitlab 编辑config vim ~/. ...
- HDU 2157 How many ways?? 题解
题目 春天到了, HDU校园里开满了花, 姹紫嫣红, 非常美丽. 葱头是个爱花的人, 看着校花校草竞相开放, 漫步校园, 心情也变得舒畅. 为了多看看这迷人的校园, 葱头决定, 每次上课都走不同的路线 ...
- redis 集群方案及搭建
由于Redis出众的性能,其在众多的移动互联网企业中得到广泛的应用.Redis在3.0版本前只支持单实例模式,虽然现在的服务器内存可以到100GB.200GB的规模,但是单实例模式限制了Redis没法 ...
- Java 基础 —— Lambda 表达式
概述 阅读项目代码时,尤其是阅读一些源码时,经常会遇到 Lambda 表达式.对此之前看过相关文章,但是停留在模模糊糊的印象上.今天趁着有时间,通过一些 demo 示例,梳理一下它的用法,以备后期遗忘 ...