js事件操作方法

js事件

事件是什么？
事件可以是浏览器或用户做的某些事情。

事件总结

事件绑定有几种方法？

标签事件绑

function print(){
　　console.log('print');
}
<button onclick="show()">点我</button>

使用属性名称绑定

<button id="btn">点我</button>
<script type="text/javascript">
	var btn=document.getElementById('btn');
	btn.onclick=function(){
		alert('1')
	}
</script>

使用addeventlistener进行绑定

<button id="btn3">事件监听</button>      
document.getElementById("btn3").addEventListener("click",show);

事件流

事件流概念：
HTML中与javascript交互是通过事件驱动来实现的，例如鼠标点击事件、页面的滚动事件onscroll等等，可以向文档或者文档中的元素添加事件侦听器来预订事件。

什么是事件流？

1.事件流分为三个阶段分别是
事件捕获阶段。
处于目标阶段。
事件冒泡阶段。

2.事件流执行步骤是啥？
事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。

3.addEventListener有几个参数，分别是什么作用
它有三个参数事件名称、事件处理程序的函数、和布尔值，最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。

4.document、mentElement和document.body三者之间的关系：
document代表的是整个html页面，
document.documentElement代表是的标签。
document.body代表的是标签。

事件流有几个阶段？
事件流分为两个阶段分别是：
1.事件冒泡
事件由最具体的元素传播到最不特定的节点。
2.事件捕获
事件由最不特定的节点传播到最具体的元素。

什么是事件处理程序？
响应某个事件的函数就叫做事件处理程序，事件处理程序的名字是以"on"开头，所以像click的事件处理程序就是"onclick"。
每个事件处理程序都有一个event变量，也就是事件对象。
有两种方式事件处理程序，第一种是直接在html标签中定义，第二中在js中写函数。

<input type="button" value="Click Me" onclick="alert('clicked')">
<button onclick="showMessage(event)">show message</button>
<script>
 // 在js中写入
function showMessage(event){
    console.log(event);
    alert('Hello world');
}
</script>

标签绑定事件的缺点：
1、如果页面没有完全加载完毕会出错。
2、HTML与JS紧密耦合。
3、不同浏览器出现差异。