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 ...
随机推荐
- 几个常见CSS错误和解决办法
1.IE6下,当float存在时,margin双倍的问题 解决方法:加display:inline; 例: #content { float: left; width: 500px; ...
- 【CSGRound1】天下第一 题解
[CSGRound1]天下第一 https://www.luogu.com.cn/problem/P5635 分析题目: 题目中说明,有T组数据,但是mod只有一个.很显然,这道题可以用记忆化搜索嘛! ...
- SpringBoot + MyBatis + MySQL 读写分离实战
1. 引言 读写分离要做的事情就是对于一条SQL该选择哪个数据库去执行,至于谁来做选择数据库这件事儿,无非两个,要么中间件帮我们做,要么程序自己做.因此,一般来讲,读写分离有两种实现方式.第一种是依靠 ...
- Layui的省市区三级联动
PHP: /** * 通过接口获取省市区 * @param string $name * @return json */ public function getDataTree($name = '') ...
- innobackupex 数据库备份
一,安装innobackupex CentOS: yum install percona-xtrabackup 二,备份数据 备份: innobackupex --user=user --passwo ...
- day10 基本数据类型（下）
目录 一.集合 1.作用 2.定义 3.类型转换 4.内置方法 4.1交集:两者共有的 4.2合集:两者融合去重 4.3差集:某个集合单独有的 4.4对称差集:两个集合各自单独有的组成的集合 4.5父 ...
- 解决android studio 文本乱码问题
下面图片,部分字体,有一些中文字符无法显示,可选择提交保存,立即可看到效果,不喜欢就再换一个合适的字体.
- CSRF原理及防御
CSRF原理及防御 CSRF攻击原理 CSRF攻击利用网站对用户的信任,以用户的身份发送请求来执行攻击者所要的操作,比如:转账.发邮件.修改密码.添加用户等. CSRF和XSS一样危害都特别大,只不过 ...
- python positional argument follows keyword argument
关键字参数必须跟随在位置参数后面! 因为python函数在解析参数时, 是按照顺序来的, 位置参数是必须先满足, 才能考虑其他可变参数.
- java 面向对象（五）：类结构 方法（二） 关键字:return；方法的重载；可变个数形参的方法
return关键字:1.使用范围:使用在方法体中2.作用:① 结束方法 * ② 针对于返回值类型的方法,使用"return 数据"方法返回所要的数据.3.注意点:return关键字 ...