JS 事件初识

JavaScript010

JS 事件初识,第1张

事件就是在文档或者浏览器窗口触发的某些动作，例如鼠标点击或滚动，键盘按下放起等。

缺点： JS 与 HTML 耦合性太强，修改了 JS 也可能要修改 HTML。当函数没有加载成功时，用户去触发事件，则会报错。

ie8以上或者非ie： e.stopPropagation()

ie8以下： window.event.cancelBubble = true

事件：

是js中特有的东西。js就是基于事件驱动的一门语言。

想一下js的实现，都（大多数）是通过用户与浏览器的交互，比如你点击某个控件，鼠标放上，ajax请求等等，你的这些操作其实都是触发了js中定义的具体的事件，你可以给具体的事件绑定处理事件的函数。

我们常用的事件有：click，mouseover，mouseout等等。

事件属性：

表示的是具体的事件的一些特性，这些属性是让你更好的去控制这个事件，比如点击事件有属性可以判断点击的位置，点击时候是不是按下了哪个键盘按键，点击是鼠标左键还是鼠标右键。

关于事件的一些知识，强烈建议你去看下《javascript权威指南》，里面对事件，事件属性，事件目标，事件触发等等各种含义都解释的相当到位，相信你看了一定有帮助。

同时很希望帮到你，看到下面专家的回答，我压力还是蛮大的，真心希望我的回答能解决你的问题。

1.JavaScript 的事件处理是所有浏览器端程序的基本必备技巧。当目标元素的事件被触发时，比如按钮被点击，鼠标移动，或者是表单提交，这些事件触发时都可以触发对应的方法。当然这个过程中我们可以传递一些参数过去来自定义很多事情。

一个要注意避免的就是事件与DOM元素的紧耦合。比如先看看下面这个代码，考虑到用一个简单表单来接受用户输入的信息。

<form id="msgbox" action="#" method="get">

<label for="msg">your message</label>

<input id="msg" value="" />

<button>SEND</button>

</form>

2.我们能写一段代码让屏幕上显示刚才表单提交的信息

document.getElementById("msgbox").addEventListener("submit", function(e) {

e.preventDefault()

var msg = e.currentTarget.getElementById("msg").value.trim()

if (msg) {

alert(msg)

}

}, false)

那么如果我们想对显示出来的这句话做一些操作，比如发一条tweet，或存储在服务器或者干些其他什么？则有两个选择：

1，对已有的事件处理方法添加代码

这个方案的缺陷就是每当打算测试或者更新后来添加的事件处理方法时变得非常不弹性化，每当更改或者删除一些功能的时候，总会有一大段代码要跟着去修改。

2，为每一个功能都创建事件处理方法

第二个方法很好的解决了前面方法的问题，虽然这个方法可能会一开始麻烦点。毕竟所有的方法代码都要处理重复的消息提取以及验证步骤。

设想假如能够自行触发自定义的"newMessage"事件而无需验证是否有message提交，或假如能监控整个HTML文档或者body这样的标签而不仅仅只是某个表单的节点，能否做到呢？这就是自定义事件要解决的问题了。

自行触发一个自定义事件是很简单的；如下代码就是传递一个name,details以及options到新建的 CustomEvent对象中:

var event = new CustomEvent(

"newMessage",

{

detail: {

message: "Hello World!",

time: new Date(),

},

bubbles: true,

cancelable: true

}

)

这个案例中，"newMessage"是一个自定义事件类型。而第二个参数包含了此对象的三个属性(detail,bubbles,cancelable)。

detail: 包含了自定义事件的具体信息，这里仅仅就包括了一个message与一个time

bubbles: 如果是true，则事件会一直传递给自身的父对象元素，接着父对象也会触发此类事件

cancelable: 如果是true, 事件可以被事件触发元素的 stopPropagation( ) 方法停止

现在，我们需要针对某个特定元素来触发此类事件。

document.getElementById("msgbox").dispatchEvent(event)