JavaScript 事件的作用

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件
页面关闭时触发事件
用户点击按钮执行动作
验证用户输入内容的合法性
HTML事件是发生在HTML上的事情。
当在HTML页面中使用JavaScript时，JavaScript可以触发这些事件。

HTML 事件

HTML事件既是浏览器行为和用户行为。
以下是HTML 事件的实例：

HTML 页面加载完成
HTML 输入的字段被改变时
HTML 按钮被点击通常，当事件发生时，用户可以做些事情。
当事件触发时JavaScript可以执行一些代码。
通过JavaScript代码，HTML允许用户向HTML元素添加事件处理程序。
实例：
在以下实例中，按钮元素添加了onclick属性

<html>
<head> 
<meta charset="utf-8"> 
<title>崔氏集团代码部</title> 
</head>
<body>

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
<p id="demo"></p>

</body>
</html>

运行实例：

实例
在下一个实例中，代码将修改自身元素的内容 (使用 this.innerHTML):

<html>
<head> 
<meta charset="utf-8"> 
<title>崔氏集团代码部</title> 
</head>
<body>

<button onclick="this.innerHTML=Date()">现在的时间是?</button>

</body>
</html>

运行实例

实例
比较常见的是通过事件属性来调用：

<html>
<head> 
<meta charset="utf-8"> 
<title>崔氏集团代码部</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

运行实例

扩展：JavaScript与jquery事件的区别

一、入口函数的不同
1、js：window.onload = function(){内部放js}　　　

　　实质就是一个事件，拥有事件的三要素，事件源，事件，事件处理程序。等到所有内容，以及我们的外部图片之类的文件加载完了之后，才会去执行。只能写一个入口函数；
2、jQuery: $(function(){})或者$ (document).ready(function(){})是在 html所有标签都加载之后，就回去执行，可以写多个；
二、获取元素的方式不同

　　1、js：常用的以下几个，除了id，其他的结果都是伪数组；

　　2、jQuery：$(" ")通过和css雷同的选择器方式来获取元素。得到的是jquery对象（dom元素的数组，外加其他一些成员）。即使写的是id，唯一的，得到的对象都不是单一的；

　　本质上jquery方式和qs方式都是获取DOM数组，只不过jquery会多一些其他成员，DOM数组的每一个成员注册事件不能像jquery一样直接注册，必须分别给每个元素注册；

　　三、DOM对象和jquery对象的相互转换　

　　1、jQuery对象转换成DOM对象，方式一： $(“#btn”)[0]，方式二：$ (“#btn”).get(0)得到dom对象；

　　2、eq（0）得到jquery对象

　　DOM对象转换成jQuery对象：

　　$(document) -> 把DOM对象转成了jQuery对象

　　var btn = document.getElementById(“btn”);

　　btn -> $(btn)；$ (this)

　　Jquery得到的元素类型都是对象，内容是伪数组，无论是不是唯一的元素；

　　四、事件处理程序不同

　　1、js：document.getElementById(“id”).onclick = function(){　// 语句　}

　　document.getElementById(“id”).addEventListener("click",function(){})

　　onclick，onfoucs，onblur，fouce（自动获得），select（自动选择文本域内容），onmouseover，onmouseout，

　　oninput/onpropertychange用户输入事件，onchange(下拉菜单select内容发生改变时发生事件，如果内容为几，那么做出什么反应)，

　　2、jquery：$(“#id”).click(function(){ 　　　　// 语句　　});

　　以上就是关于js和jquery的区别的解答，希望可以帮助到大家。

JavaScript 事件对象

事件对象用于描述所产生的事件。调用事件处理程序时，JS会把事件对象作为参数传给事件处理程序。事件对象提供了有关事件的详细信息，因而可以在事件处理程序中通过事件对象获取有关事件的相关信息，例如获取事件源的名称、键盘按键的状态、鼠标光标的位置、鼠标按钮的状态等信息。
*事件对象的常用属性和方法：