目录
什么是事件?
HTML 事件是发生在 HTML 元素上的事情。
例如:HTML 页面完成加载、HTML input 字段改变时、HTML 按钮被点击;下图是一些常见的事件,在JavaScript里面我们常用的事件有很多鼠标事件和键盘事件。
事件三要素
- 事件源:事件被触发的对象 (是谁干了这件事!)
- 事件类型:如何触发什么事件 ,例如:鼠标点击、鼠标经过、键盘按下(干了啥!)
- 事件处理程序:通过函数赋值的方式(怎么干的!)
事件的执行步骤
- 获取事件源
- 注册事件(绑定事件)元素可以不用添加事件
- 添加事件处理程序(采用函数赋值的形式)
代码讲解
<body>
<input type="button" value="点秋香">
<script>
//1.获取事件源(是谁要做这件事情)
var btj = document.querySelector('input');
//2.注册事件 元素可以不添加事件
btj.onclick;
//3.添加事件处理程序
btj.onclick = function () {
alert('唐伯虎点秋香');
}
</script>
</body>
事件对象
概念
Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件在浏览器中是以对象的形式存在的,即event。触发一个事件,就会产生一个事件对象event,该对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型以及其他与特定事件相关的信息。事件通常与函数结合使用,函数不会在事件发生前被执行!
实例![](https://i-blog.csdnimg.cn/blog_migrate/a0f8ac4bf0501a855308dc31696c4771.png)
高级事件
绑定事件
绑定HTML元素
特点:绑定事件唯一性,只能添加一个处理函数,若设置多个后面的函数会将前面的函数覆盖。
语法:element.Event Handlers = function() {}
参数:
- element:事件源,引起事件的元素或者节点;
- Event Handlers:事件句柄,触发事件的行为,例如:onclick(点击鼠标);
- function() {}:匿名函数,处理事件的方法;
绑定DOM对象
特点:绑定事件不唯一,可以添加多个处理函数,但有一定兼容性问题IE9以上支持
语法:element.addEventListener(type,lister,useCapture);
参数:
- element:事件源,引起事件的元素或者节点;
- type :事件类型字符串,比如click、 mouseover 注意这里不要带on;
- listener :事件处理函数,事件发生时,会调用该监听函数;
- useCapture :可选参数,值为true为捕获阶段,值为false或省略不写(默认是false) 处于冒泡阶段;
代码讲解
<body>
<input type="button" value="秋香" id="but1">
<input type="button" value="唐伯虎" id="but2">
<script>
//获取事件源
var but1 = document.getElementById('but1');
var but2 = document.getElementById('but2');
//绑定HTML元素
but1.onclick = function () {
console.log('你点了秋香');
}
//绑定DOM对象
but2.addEventListener('click', function () {
console.log('你点了唐伯虎');
})
</script>
</body>
解绑事件
解绑HTML元素
语法:element.Event Handlers = null
解绑DOM对象
语法:element.removeEventListener(type,lister,useCapture);
注意:涉及到解绑的时候function不能使用匿名函数;
代码讲解
<body>
<input type="button" value="秋香" id="but1">
<input type="button" value="唐伯虎" id="but2">
<script>
//获取事件源
var but1 = document.getElementById('but1');
var but2 = document.getElementById('but2');
//绑定HTML元素
but1.onclick = function () {
console.log('你点了秋香');
}
//绑定DOM对象
function fn() {
console.log('你点了唐伯虎');
};
but2.addEventListener('click', fn);
//解绑HTML元素
but1.onclick=null;
//解绑DOM对象
but2.removeEventListener('click', fn);
</script>
</body>