目录
行内和属性绑定的解绑: 元素.onclick = null;
事件
元素在某种状态(浏览器设定的)达成时(事件触发时),要执行的提前设定好的程序,我们称之为 事件句柄,也就是事件。
事件三要素
01.事件源 :给那个元素/标签/节点来绑定事件
02.事件类型(某种状态) : eg:点击状态
03.事件处理程序(事件句柄:handler)
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
// 事件源 box
var box = document.querySelector('.box');
//事件类型(某种状态) 鼠标点击时在box区域,松开时也在box区域,触发onclick事件
box.onclick = function(){
//事件处理程序(handler)
console.log('你购买了装备');
}
</script>
</body>
页面与用户的交互方式:通过鼠标 和 通过键盘
事件的绑定方式
1.行内式
写法1:
<div class="box" onclick="javascript:console.log(66666)">hello</div>
分析:οnclick="javascript:console.log(66666)"这段代码并不被渲染,而是V8引擎去扫描它,当点击事件发生时,打印66666
写法2:
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box" onclick="javascript:myconsole.mylog()">hello</div>
<script>
var box = document.querySelector('.box');
//ES6中对象的方法写法
var myconsole = {
mylog:()=>{
console.log('我自己写的函数');
}
}
</script>
</body>
分析: 方式1中:οnclick="javascript:console.log(66666)"这段代码意思,console是window的一个属性,该属性取出来是一个对象,再对象取方法log。方式2中:程序运行时,先运行script脚本中的代码, 声明的myconsole变量,是一个全局window的变量,οnclick="javascript:myconsole.mylog()",点击事件时:调用window.myconsole再对象调方法myconsole.mylog(),打印出 console.log('我自己写的函数');
写法3:
<div class="box" onclick="console.log(66666)">hello</div>
分析:方法1是label标签式写法,标签可以省略不写。
写法4:
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box" onclick="fn()">hello</div>
<script>
function fn(){
console.log('我自己写的函数2');
}
</script>
</body>
分析:这种写法的好处是,下面可以可以写函数体,上面再点击时调用。
标签的属性值是事件触发时的执行代码
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: palegreen;
}
</style>
<div class="box" onclick="javascript:console.log(6666)">box</div>
</body>
2.属性绑定(只能绑定一个处理程序handler)
跟行内绑定都是针对于元素。
得到一个对象,给其添加属性就完了。
对象添加成员两种方法:
01.box['name'] = xxx;
02.box.name = xx;
eg:
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//对象添加属性 点语法
box.onclick = function(){
console.log('你购买了装备');
}
box.onclick = function(){
console.log('你购买了装备2');
}
</script>
</body>
分析:只会 打印出 你购买了装备2 因为:box.onclick给对象添加了函数,然后又给同一对象的同一属性又添加一个函数,后面一个把前面的覆盖了。
所以:属性绑定法只能绑定一个handler。
如要属性绑定,又需要绑定多个handler方法:在绑定的handler里面再调用其它函数就行。
3.给元素添加一个事件监听器 (推荐)
监听器和属性绑定有很大的区别,监听器与页面上的元素没有任何关系,相当于监听了页面上的按钮有没有被点击。而属性绑定是标签/元素自身都有的功能。
eg:举例是:监听器就是车厢的烟雾报警器,发现烟雾就报警,跟车厢没什么关系,属性绑定可以理解为,车厢自己本身的一种机制,遇到文档升高或者烟雾,车厢本身会运行自己本身的一些功能。,
addEventListener() 是一个异步非阻塞函数(官方提供) 该函数体没执行完,并不影响后面函数的执行。
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//给元素添加一个事件监听器 (绑定事件处理程序)
box.addEventListener('click',function(){
console.log(666);
});
console.log(999);
</script>
</body>
分析:还没点击,就打印出999,点击后打印出666,说明 addEventListener()函数并不阻碍后面代码的运行。
addEventListener() 方法用于向指定元素添加事件处理程序(事件句柄handler)。
参数1:enent(事件类型) 必须。字符串,指定事件名。
注意: 不要使用 "on" 前缀。 例如,使用 "click" ,而不是使用 "onclick"。
参数2:function 必须。指定要事件触发时执行的函数。
注意:当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。例如, "click" 事件属于 MouseEvent(鼠标事件) 对象。
参数3:useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
可能值:
- true - 事件处理程序(事件句柄)在捕获阶段执行
- false- false- 默认。事件处理程序(事件句柄)在冒泡阶段执行
低版本的 IE种监听器绑定事件了解:
attachEvent() 只能用于IE浏览器,只有两个参数 ,参数1和参数2
注意点:第一个参数要 添加 on, 不能像addEventListener一样,只写 click
兼容性写法:
box.adde = box.addEventListener || box.attachEvent;
box.adde('click',function(){
console.log(666);
});
分析:整个表达式的结果不是布尔值,是表达式,要么是box.addEventListener,要么是box.attachEvent
可以绑定多个handler,且不影响行内绑定的
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//给元素添加一个事件监听器 (绑定事件处理程序)
box.addEventListener('click',function(){
console.log(6661);
});
box.addEventListener('click',function(){
console.log(6662);
});
</script>
</body>
分析:一点击按钮,就会打印出 6661 和 6662
事件的解绑
行内和属性绑定的解绑: 元素.onclick = null;
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//绑定点击事件 属性要保存函数
box.onclick = function(){
console.log(6666);
}
//解绑 不让你保存函数,不就是解绑了么
box.onclick = null; //false也可以
</script>
</body>
解绑一般放在某些条件中,是具有意义的,一般在某些条件达成时解绑。
eg:抢红包时,一旦点击了抢红包按钮,函数正常运行,就会连接后台,会很卡,因为突然很多人在抢(点的那一刻,大家都在同一台服务器发送网络请求),此时就点不动(如果还能点动,函数又运行,更卡,所以不合理),抢红包的按钮就只按一下,运行了就不能点了。所以怎么实现函数运行(一点击),就不能再点击(运行了)?解绑就可以了。
<body>
<style>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
}
</style>
<div class="box">hello</div>
<script>
var box = document.querySelector('.box');
//绑定点击事件 属性要保存函数
box.onclick = function(){
box.onclick = null;
console.log(6666);
}
</script>
</body>
分析:一点击,打印出666,再次点击就不行了。
所以一般点不动了,就刷新网页。但一般被抢完了,所以手速就很重要。。。。
事件监听器的解绑
元素.removeEventListener();
元素.removeEventListener('click',fn1);
参数:event 和 监听器(监听器就是那个事件处理函数)
函数是对象,解绑就是把对象的内存空间释放了。
<body>
<div id="xiake" onclick="console.log('下课1')">下课</div>
<script>
var xiake = document.querySelector('#xiake');
//绑定点击事件 属性要保存函数
xiake.onclick = function(){
xiake.onclick = null;
console.log(6666);
}
function fn1(){
console.log('真下课1');
}
function fn2(){
console.log('真下课2');
}
function fn3(){
console.log('真下课3');
}
//给xiake元素添加一个监听事件
xiake.addEventListener('click',fn1);
xiake.addEventListener('click',fn2);
xiake.addEventListener('click',fn3);
//移除对应的元素的对应的监听程序
xiake.removeEventListener('click',fn1);
</script>
</body>
分析:xiake事件的fn1函数被释放,所以只有监听事件fn1,fn2.且事件监听器的解绑并不影响行内事件的绑定。
兼容性写法
1.事件绑定的兼容性写法
function addEvent(el, type, handle) {
//如果这个元素对象有addEventListener属性
if (el.addEventListener) {
el.addEventListener(type, handle);
} else if (el.attachEvent) {
//针对于IE低版本
el.attachEvent('on' + type, handle);
} else {
//针对于行内绑定方式 onclick = fn;
// el.onel = fn; //这样写是错误的,这个是el这个元素对象添加一共onel属性
el['on' + type] = fn;
}
}
addEvent(box1, 'click', fn); //事件源(要绑定事件的元素) ,事件类型,事件处理函数
2.事件解绑的兼容性写法
function removeEvent(el, type, handle) {
//如果这个元素对象有addEventListener属性
if (el.removeEventListener) {
el.removeEventListener(type, handle);
} else if (el.detachEvent) {
//针对于IE低版本
el.detachEvent('on' + type, handle);
} else {
//针对于解除行内绑定方式/属性绑定方式 元素.onclick = null;
el['on' + type] = null;
}
}
removeEvent(box1, 'click', fn1); //事件源(要绑定事件的元素) ,事件类型,事件处理函数